《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用

8.3.1 安装和配置

运行Gulp须要Node.js环境，请参看第二章内容搭建Node.js环境。使用NPM全局安装Gulp，命令以下：

npm install gulp-cli –g复制代码

而后，在项目根目录下建立package.json文件，命令以下：

npm init复制代码

根据引导配置项目信息。而后安装Gulp依赖包，命令以下：

npm install gulp –save-dev复制代码

在项目根目录下，建立gulpfile.js文件，内容以下：

var gulp = require("gulp");
gulp.task("default", function(){            // 定义名称为“default”的任务
    console.log("this is default task");    // 此处定义default任务处理过程。
});复制代码

和Grunt类似，Gulp将构建过程拆解为一个个独立的子任务，使用gulp.task方法定义任务。经过命令提示符进入到项目目录，用“gulp 任务名”执行任务，实例命令以下：

gulp default复制代码

提示：对于默认（default）任务，能够省去任务名。
在建立任务的时候，和Grunt类似，能够指定任务的依赖项，代码以下：

gulp.task(“main”, [“deps1”, “deps2”, …], function(){
    // 相关执行
});复制代码

gulp.task方法的第二个参数（数组）为“main”任务的依赖项。
项目中一般根据需求将构建过程拆解为多个小任务。下面介绍如何具体定义。
首先，指定须要构建的内容，并经过Gulp插件来完成构建，最终输出到指定的目录。
采用gulp.src方法指定文件源，代码以下：

gulp.src(“src/**/*.js”);：
// 或者 对于多个目录下的源，能够采用数组
gulp.src([“src/**/*.js”, “theme/**/*.scss”]);复制代码

gulp.src方法返回Stream对象，能够经过pipe方法将内容传递给插件。全部插件都接受pipe传递过来的数据，处理数据容许链式调用，代码以下：

gulp.src(“src/**/*.js”).pipe(plugin1()).pipe(plugin2())…复制代码

构建完毕后，须要采用gulp.dest方法将数据保存到文件中，代码以下：

gulp.src(“src/**/*.js”).pipe(gulp.dest(“dist”));     // 读取src下的全部js，写入到dist目录下复制代码

Gulp的每次操做都返回流对象，全部操做在内存中进行，不须要操做磁盘，从而大幅提升了构建速度。

8.3.2 预处理任务

上一节中，介绍了Gulp的安装，配置，以及Grunt任务的定义和执行。本节将介绍编译ECMAScript 六、Sass和CSS Sprite任务。
“gulp-babel”插件能够将ECMAScript 6编译为ECMAScript 5。以便运行在不支持ECMAScript 6的浏览器上。首先安装该插件，命令以下：

npm install gulp-babel –save-dev
npm install babel-preset-es2015  --save-dev复制代码

而后，在gulpfile.js文件中建立任务，代码以下：

var babel = require("gulp-babel");    // 引入babel
gulp.task("compile-js", function(){
    gulp.src("src/**/*.js")            // 处理src下的全部js脚本
        .pipe(babel({            // 调用babel
            presets: ['es2015']    // 采用es2015预设插件，将脚本编译为ECMAScript 5
        }))
        pipe(gulp.dest("dist/js"));    // 编译好的内容保存到dist目录下的js目录
});复制代码

Babel能够将JavaScript文件，甚至React的JSX文件编译为标准的JavaScript文件。Babel官方提供的预设插件（presets）让用户可以更简单地使用Babel。presets是针对特定编译条件预设的一组插件集合。如本实例中，采用的es2015预设插件包含插件有“check-es2015-constants”，“transform-es2015-arrow-functions”等。
注意：Babel只是作了语法层次的转换，并不会增长API的支持。对于class关键字定义的类，Babel会将其转化为经过prototype定义的对象。而对于ECMAScript 6的Promise对象，Babel不会作任何处理，所以须要经过polyfill来对浏览器不支持的API进行扩展。如“es6-promise”使得浏览器支持Promise对象。
在实际的项目中，能够在根目录下建立的“.babelrc”文件中配置Babel，代码以下：

{
    "presets":["es2015"]
}复制代码

编译Sass文件能够采用gulp-sass插件，安装命令以下：

npm install gulp-sass –save-dev复制代码

而后，在gulpfile.js文件中，增长任务执行Sass编译，代码以下：

var sass = require("gulp-sass");                // 引入sass插件 
gulp.task("compile-sass", function(){            // 定义编译sass的任务
    gulp.src("theme/**/*.scss")                // 处理theme下的全部的sass文件
    .pipe(sass().on('error', sass.logError))    // 采用sass插件编译，并处理错误
    .pipe(gulp.dest("dist/css"));            // 编译好的内容输出到dist目录下的css目录
});复制代码

在项目中，为了优化加载性能，须要将小图片合成一张大图，也就是所谓的“CSS Sprites”。该功能使用gulp.spritesmith插件来实现，安装命令以下：

npm install gulp.spritesmith –save-dev复制代码

而后在gulpfile.js文件中创建任务，代码以下：

var spritesmith = require('gulp.spritesmith');        // 引入sprite插件
gulp.task("sprite", function () {                    // 定义任务
    gulp.src("theme/images/**.png")            // 处理theme目录下的png文件
        .pipe(spritesmith({                    // 调用插件合并图片
            imgName: 'sprite.png',            // 输出合成的图片名称
            cssName: 'sprite.css'                // 输出对应的css文件
        }))
        .pipe(gulp.dest("dist"));                // 输出到dist目录
});复制代码

本节介绍了三个预处理工具，有gulp-babel，gulp-sass和gulp.spritesmith。