首页 > 嗟来之食 > gulp:更简单的自动化构建工具 – 飞鸿影~ –
2016
07-29

gulp:更简单的自动化构建工具 – 飞鸿影~ –

目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp。为什么使用gulp?因为Gulp更简单。Grunt任务拥有大量的配置,会引用大量你实际上并不需要的对象属性,但是Gulp里同样的任务也许只有几行。有兴趣的同学在学完本文后对比使用Grunt,你就会发现Gulp的代码量是最少的。
安装
需要先安装node.js。这里安装的v5.11.0。
使用node -v查看版本号。
gulp的安装不是很顺利。按照官方给的安装方法:
npm install –global gulp
npm install –save-dev gulp
先全局安装,然后再在项目的开发目录中安装为本地模块。但是在命令行输入gulp会提示:
Local gulp not found in …
好吧,百度搜索了一番,知乎上有朋友回答了,不要全局安装,直接安装为本地模块。发现问题解决了一半:
npm install –save-dev gulp
然后调用的问题,在项目目录还是无法执行命令。不过由于安装在node_modules,很快找到了可执行命令的路径:
node_modules/.bin/gulp
非Windows的朋友,可以直接使用:
./node_modules/.bin/gulp
运行命令,Windows的朋友需要到node_modules/.bin/目录去执行gulp。不过看了gulp.cmd的内容,稍微改改,可以复制一份gulp.cmd到项目根目录:
node "%~dp0\..\.npminstall\gulp\3.9.1\gulp\bin\gulp.js" %*
改为:
node "%~dp0\node_modules\.npminstall\gulp\3.9.1\gulp\bin\gulp.js" %*
就行了。当前目录执行:
>gulp
[21:30:58] Using gulpfile D:\Projects\gulp\gulpfile.js
[21:30:58] Task 'default' is not in your gulpfile
[21:30:58] Please check the documentation for proper gulpfile formatting
这里由于安装慢,使用了淘宝的镜像。命令后加
–registry=https://registry.npm.taobao.org
参数即可。或者安装个cnpm命令:
npm install -g cnpm –registry=https://registry.npm.taobao.org
下次使用cnpm代替npm。
简单示例
这里以压缩zepto.js为例。
需要先安装gulp插件模块gulp-uglify:
npm install –save-dev gulp-uglify
安装为本地模块。
需要新建配置文件gulpfile.js。项目根目录中的gulpfile.js,是Gulp的配置文件。示例:
var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('minify', function () {
gulp.src('js/zepto.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
});

上面代码中,gulpfile.js加载gulp和gulp-uglify模块之后,使用gulp模块的task方法指定任务minify。

task方法有两个参数,第一个是任务名,第二个是任务函数。在任务函数中,使用gulp模块的src方法,指定所要处理的文件,然后使用pipe方法,将上一步的输出转为当前的输入,进行链式处理。

task方法的回调函数使用了两次pipe方法,也就是说做了两种处理。第一种处理是使用gulp-uglify模块,压缩源码;第二种处理是使用gulp模块的dest方法,将上一步的输出写入本地文件,这里是build.js(代码中省略了后缀名js)。

好,配置完成。如何执行这个任务呢?
很简单,在命令行输入:
gulp minify
就行了。记住,是gulp后面跟任务(task)名。运行结果:
>gulp minify
[21:43:52] Using gulpfile D:\Projects\gulp\gulpfile.js
[21:43:52] Starting 'minify'…
[21:43:52] Finished 'minify' after 10 ms
在build目录生成了压缩过的zepto.js。
没有修过gulp或者gulp.cmd的同学需要执行:
./node_modules/.bin/gulp minify
下面的示例直接使用gulp命令。
压缩多个js文件
假如有js目录下有多个js文件,例如:
zepto.js
util.js
my.js
下面任务将会压缩js目录里所有的js文件:
var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('minify', function () {
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
});
在build文件夹会生成压缩过的所有js文件:
zepto.js
util.js
my.js
文件名还是一样的。

gulp模块的src方法,用于产生数据流。它的参数表示所要处理的文件,这些指定的文件会转换成数据流。参数的写法一般有以下几种形式。

js/app.js:指定确切的文件名。
js/*.js:某个目录所有后缀名为js的文件。
js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件。
!js/app.js:除了js/app.js以外的所有文件。
同时使用多个组件
除了压缩,我们可能还需要进行代码检查(jshint)、合并(concat)等工作:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('build'));
});
需要先安装依赖组件:
npm install jshint gulp-jshint –save-dev
npm install gulp-concat –save-dev
uglify前面我们已经安装了。安装jshint需要注意,还要安装jshint本身,否则会报错:
Error: Cannot find module 'jshint/src/cli'
安装插件完成后,执行:
gulp js
即可。会在build目录生成all.min.js压缩合并后的文件。
gulp常用插件
插件地址:http://gulpjs.com/plugins/
压缩css(gulp-minify-css)
合并文件(gulp-concat)
js代码校验(gulp-jshint)
压缩js代码(gulp-uglify)
less编译(gulp-less)
sass编译(gulp-sass)
stylus编译(gulp-stylus)
自动添加css前缀(gulp-autoprefixer)
压缩图片(gulp-imagemin)
自动刷新页面(gulp-livereload)
图片缓存,只有图片替换了才压缩(gulp-cache)
更改提醒(gulp-notify)
可以一条命令一次性安装:
npm install gulp-sass gulp-minify-css gulp-jshint gulp-concat gulp-uglify –save-dev
使用watch监视文件变动
本例通过监听less文件的变动生成编译好的css文件。
准备好css/demo.less文件:
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
gulpfile.js任务内容:
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('doless', function () {
return gulp.src('css/*.less')
.pipe(less())
.pipe(gulp.dest('build'));
});

gulp.task('watch', function () {
gulp.watch('css/*.less', ['doless']);
});
注意要先安装好gulp-less组件。当css/文件夹里任意less文件发送了变化 ,将执行doless任务:使用less方法编译生成对应的demo.css文件。
运行:
gulp watch
显示:
>gulp watch
[22:23:21] Using gulpfile D:\Projects\gulp\gulpfile.js
[22:23:21] Starting 'watch'…
[22:23:21] Finished 'watch' after 13 ms
我们现在去编辑css/demo.less文件,发现命令行自动执行了doless任务:
[22:23:25] Starting 'doless'…
[22:23:25] Finished 'doless' after 66 ms
在build/文件夹生成了demo.css:
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
当然,可以添加更多任务:
var gulp = require('gulp');
var less = require('gulp-less');
var minify = require('gulp-minify-css');
var concat = require('gulp-concat');
var autoprefix = require('gulp-autoprefixer');

gulp.task('doless', function () {
return gulp.src('css/*.less')
.pipe(less())
.pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
.pipe(gulp.dest('build'))
.pipe(minify())
.pipe(concat('all.min.css'))
.pipe(gulp.dest('build'));
});

gulp.task('watch', function () {
gulp.watch('css/*.less', ['doless']);
});
API
gulp只有四个API: task,watch,src, dest
task 这个API用来创建任务
watch 这个API用来监听任务
src 这个API设置需要处理的文件的路径,可以是多个文件以数组的形式
dest 这个API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本
参考
1、Gulp:任务自动管理工具 — JavaScript 标准参考教程(alpha)
http://javascript.ruanyifeng.com/tool/gulp.html
2、入门指南 – gulp.js 中文文档 | gulp.js 中文网
http://www.gulpjs.com.cn/docs/getting-started/
3、Gulp学习指南之CSS合并、压缩与MD5命名及路径替换 – YuanWing Notes – SegmentFault
https://segmentfault.com/a/1190000002932998
4、gulp入门教程 – 王叨叨 – SegmentFault
https://segmentfault.com/a/1190000002698606
5、nimojs/gulp-book: Gulp 入门指南
https://github.com/nimojs/gulp-book
6、Gulp开发教程(翻译) – w3ctech – 中国最大的前端技术社区
http://www.w3ctech.com/topic/134

最后编辑:
作者:
这个作者貌似有点懒,什么都没有留下。

留下一个回复