gulp作者是Eric Schoffstall,gulp是基于流的前端自动化构建工具,gulp采用了类似unix管道的方式将前一级操作的输出,作为后一级操作的输入,gulp运行依赖于node,它可以对javascript/coffescript/sass/less/css/html/image等文件进行语法检测,编译,合并,压缩,浏览器自动刷新,生成部署文件。
gulp的作用有以下两点显而易见的好处:
1、对网站静态资源进行优化,合并压缩文件,减少了http请求和文件加载的大小;
2、开发完成之后,部署文件不用每次都重新手动操作,提高工作效率。
gulp和另外一个工具grunt一样也可以实现自动化构建,grunt更多的是做配置,而gulp更多的是书写易于理解的脚本语言,相对grunt更直观,更易于理解。
gulp官方介绍的一句话是:It should take in files,modify them,and output the new ones。即对开发完成即将部署的文件(静态文件)进行编译合并压缩,并生成新的文件。
gulp提供关键的api有以下五个:
gulp.task 指定执行的任务
gulp.run 运行任务
gulp.watch 监控文件变化
gulp.src 指定源文件,支持模糊匹配和精确指定
gulp.dest 指定目标文件
gulp快速构建需要安装node,npm,gulp本身是一个可以运行的命令,因此需要全局安装,它还是一个依赖库,需要在当前项目中安装。gulp需要一个项目顶级目录下的一个gulpfile.js的文件,这个文件用来书写相关逻辑代码来实现对静态文件的优化。书写完成之后可以直接运行gulp,这样它会运行默认名为default的任务,这个任务中可以指定其他的任务,如果没有名为default的任务,只运行gulp命令会出错。也可以运行gulp taskname直接运行gulpfile.js中指定的任务。如果指定的任务不存在也会报错。
gulp常用的库介绍:
gulp-concat ~文件合并
gulp-clean-css ~css压缩
gulp-sass ~sass文件编译为css
gulp-uglify ~js压缩
gulp-rename ~文件重命名
gulp-htmlmin ~对html中的css,script等进行压缩,去除空格和注释
以上对gulp进行了概述,下面结合实际来利用gulp来构建(项目中的示例文件均不是规范的完整的,都是临时写的一些)。
1、全局安装
$ npm install --global gulp
这样我们就可以在命令行下使用gulp命令来执行任务。
$gulp -v //检测是否安装成功
$ gulp -v
[10:07:04] CLI version 3.9.1
[10:07:04] Local version 3.9.1
2、新建一个项目,配置package.json文件,并安装依赖
{
"name": "index",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"asyncawait": "^1.0.6",
"bluebird": "^3.4.1",
"body-parser": "~1.13.2",
"express": "~4.13.1",
"lodash": "~4.13.1",
"moment": "~2.13.0",
"mysql": "^2.11.1",
"sequelize": "^3.23.4",
"redis": "^2.6.2",
"winston": "~2.2.0",
"chance": "^1.0.4",
"serve-favicon": "^2.3.0"
},
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^2.0.13",
"gulp-front-matter": "^1.3.0",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.1",
"gulp-imagemin": "^3.0.3",
"gulp-swig": "^0.8.0",
"gulp-uglify": "^2.0.0",
"gulp-useref": "^3.1.2",
"gulp-rename": ""
}
}
以上是我的package.json配置文件,这里引入了部分插件.
接着我们利用npm install --save-dev来安装项目依赖,包括项目依赖和构建依赖。
$ npm install --save-dev //这样就是在项目局部安装了依赖
安装之后项目下多了node_modules目录,这个目录下会有很多依赖包
3、第一个实例我们使用gulp-clean-css插件来对css进行压缩,这个其实就是去掉空格等。
var gulp = require("gulp");
var cleancss = require("gulp-clean-css");
gulp.task("compress",function(){
gulp.src("public/src/css/*.css")
.pipe(cleancss())
.pipe(gulp.dest('build/css'));
});
准备文件如下:public/src/css目录下有两个文件reset.css public.css,build目录下暂时什么也没有,我们通过这个任务来对css文件进行压缩。
运行 gulp compress
hadoop@feiy-pc /e/nodespace/hello
$ gulp compress
[10:25:40] Using gulpfile E:\nodespace\hello\gulpfile.js
[10:25:40] Starting 'compress'...
[10:25:40] Finished 'compress' after 15 ms
生成的文件如图所示:
生成的reset.css文件中样式都挤在了一行。
4、再来运行一个任务,这个任务是利用concat和uglify插件来对js进行合并和压缩。
var gulp = require("gulp");
var concat = rquire("gulp-concat");
var uglify = require("gulp-uglify");
gulp.task("jsmin",function(){
gulp.src(["public/src/js/a.js","public/src/js/main.js"])
.pipe(concat("all.min.js"))
.pipe(uglify())
.pipe(gulp.dest("build/js"));
});
a.js
const names = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
function GetName(index){
return names[index];
}
module.exports = GetName;
main.js
const a = require('./a');
console.log(a(0))
运行jsmin这个任务
$ gulp jsmin
$ gulp jsmin
[10:32:33] Using gulpfile E:\nodespace\hello\gulpfile.js
[10:32:33] Starting 'jsmin'...
[10:32:33] Finished 'jsmin' after 21 ms
生成的文件build/js/all.min.js
可以看到GetName中的变量index用a来代替了,而且代码少,都压缩在了一行。
最后贴上我的gulpfile.js的完整代码,这个代码
1、定义了一个删除文件的任务
2、定义了一个编译html的任务这是gulp中文社区的一个示例
3、定义了一个重命名js文件的任务
4、定义了压缩css的任务
5、定义了合并压缩js的任务
6、设置了默认任务执行的任务列表
var gulp =require("gulp");
var swig = require("gulp-swig");
var frontMatter = require("gulp-front-matter");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var cleancss = require("gulp-clean-css");
var concat = require("gulp-concat");
var del = require('del');
gulp.task('clean:mobile',function(cb){
del(['build/page_error.html'],cb);
})
gulp.task("compile-page",function(){
gulp.src("page.html")
.pipe(frontMatter({property:'data'}))
.pipe(swig())
.pipe(gulp.dest('build'));
});
gulp.task("rename-js",function(){
gulp.src("public/src/js/a.js")
.pipe(gulp.dest('build'))
.pipe(uglify())
.pipe(rename({extname:'.min.js'}))
.pipe(gulp.dest('build/js'));
});
gulp.task("compress",function(){
gulp.src("public/src/css/*.css")
.pipe(cleancss())
.pipe(gulp.dest('build/css'));
});
gulp.task("jsmin",function(){
gulp.src(["public/src/js/a.js","public/src/js/main.js"])
.pipe(concat("all.min.js"))
.pipe(uglify())
.pipe(gulp.dest("build/js"));
});
gulp.task('default',["clean:mobile","compile-page","rename-js"]);