《移动Web前端高效开发实战》笔记2——使用居尔p营造一个ECMAScript 6和Sass应用

8.3.1 安装和配置

运营居尔p必要Node.js环境,请参见第①章内容搭建Node.js环境。使用NPM全局安装居尔p,命令如下:

npm install gulp-cli –g

接下来,在类型根目录下创立package.json文件,命令如下:

npm init

据书上说指点配置项目音讯。然后安装居尔p正视包,命令如下:

npm install gulp –save-dev

在档次根目录下,创造gulpfile.js文件,内容如下:

var gulp = require("gulp");

gulp.task("default", function(){                     // 定义名称为“default”的任务

         console.log("thisis default task");       // 此处定义default任务处理过程。

});

和Grunt相似,Gulp将营造进程拆解为3个个独自的子职分,使用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目录下

Node.js,居尔p的历次操作都重回流对象,全数操作在内部存款和储蓄器中开始展览,不供给操作磁盘,从而小幅进步了构建速度。

8.3.2 预处理职分

上一节中,介绍了Gulp的装置,配置,以及Grunt职责的概念和实践。本节将介绍编写翻译ECMAScript
⑥ 、Sass和CSS Pepsi-Cola职务。

“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是对准特定编写翻译条件预设的一组插件集合。如本实例中,选用的es二零一六预设插件包含插件有“check-es2014-constants”,“transform-es二零一五-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**.png")                          // 处理theme目录下的png文件

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

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

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

                   }))

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

});

 

本节介绍了多少个预处理工科具,有gulp-babel,gulp-sass和gulp.spritesmith。

 

越来越多信息关心:

Node.js 1