Angular技术库
  • 简介
  • 研究热点
    • 单页面登录
    • 单页面服务器渲染
  • 项目实战
    • 目录结构
    • 模块开发流程
    • 公共模块编辑
    • UI使用
    • 工具库
      • util模块
      • filter模块
    • 表单验证
  • 整体框架
    • 环境搭建
      • Windows
      • MAC Linux
    • 示例项目
    • 开发调试
      • 编译JS
      • 编译CSS
      • 编译HTML
      • 编译Bower
      • 服务器启动
      • 与后端服务通讯
    • Gulp文档
      • Gulp API
      • 插件列表
      • Gulp构建
    • Gulp文档
    • 示例项目
  • Angular文档
    • 指令
    • 引导
    • 单页面
    • 基于requireJS和angularJS的前端技术架构
    • 数据共享
    • 模块加载
    • 事件循环
  • SASS文档
    • SASS特性
  • ES6文档
    • ECMAScript前导
    • ECMAScript6特性介绍
    • ES6特性筛选
  • JavaScript文档
    • 匿名函数定义
    • Function
      • 原生prototype
      • 自定义prototype
  • RequireJS
  • Node文档
  • 架构师
  • 时间轴
    • 2016-07-13
    • 2016-06-21
    • 2016-06-14
    • 2016-06-07
    • 2016-05-31
Powered by GitBook
On this page
  • 执行编译JS命令
  • 仅执行JS构建命令
  • 示例代码
  1. 整体框架
  2. 开发调试

编译JS

参见示例项目 gulp/js.js,该段代码包含ES6转义,JS压缩,构建文件清理,JS文件监听。

执行编译JS命令

包含清除已构建JS文件、构建JS、监听JS文件任务。

$ gulp js

仅执行JS构建命令

包含清除已构建JS文件、构建JS任务。

$ gulp js:build

示例代码

'use strict';

/**
 * 1. 构建JS文件
 *     • 编译JS
 *  • 压缩JS
 * 2. 监听JS文件变化并及时编译
 */

var config = require("./conf");
var path = require("path");
var gulp = require("gulp");
var rimraf = require("rimraf");
var $ = require("gulp-load-plugins")();


/**
 * 构建JS文件
 */
gulp.task("js:build", ["js:clean"], function(){
    gulp.src(config.paths.srcJs)
        .pipe($.babel({
                presets: ['es2015']
            }))
        .pipe($.if(config.system.compressed, $.uglify()))
        .pipe(gulp.dest(config.paths.build));
});


/**
 * 清除已构建的JS文件
 */
gulp.task("js:clean", function(cb){
    rimraf(config.paths.buildJs, cb);
});


/**
 * 1. 监听JS文件变化并及时重构
 * 2. 重启静态服务器
 */
gulp.task("js:watch", function(){
    gulp.watch(config.paths.srcJs, function(){
        $.runSequence("js:build", "serve:reload");
    });
});

/**
 * 定义对外暴漏的任务名
 */
gulp.task("js", ["js:build", "js:watch"]);
Previous开发调试Next编译CSS

Last updated 7 years ago