《移动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("thisis 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
6、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"]

}

编译SassECMAScript文件可以使用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**.png")                          // 处理theme目录下的png文件

                   .pipe(spritesmith({                                          // 调用插件合并图片

                            imgName:'sprite.png',                         // 输出合成的图片名称

                            cssName:'sprite.css'                            //输出对应的css文件

                   }))

                   .pipe(gulp.dest("dist"));                                  // 输出到dist目录

});

 

本节介绍了三单先行处理工具,有gulp-babel,gulp-sass和gulp.spritesmith。

 

再多信息关注:

ECMAScript 1