作者:泡泡 | 来源:互联网 | 2023-08-12 19:37
8.3.1安装和配置运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境。使用NPM全局安装Gulp,命令如下:npminstallgulp-cli–g
8.3.1 安装和配置
运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境。使用NPM全局安装Gulp,命令如下:
然后,在项目根目录下创建package.json文件,命令如下:
根据引导配置项目信息。然后安装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 任务名”执行任务,实例命令如下:
提示:对于默认(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,代码如下:
编译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。
更多信息关注: