Gulp与Grunt一样,也是一个自动任务运行器。它充分借鉴了Unix操作系统的管道(pipe)思想,在操作上,它要比Grunt简单。
安装
Gulp需要全局安装,然后再在项目的开发目录中安装为本地模块。先进入项目目录,运行下面的命令。
bash
npm install -g gulp npm install --save-dev gulp
gulpfile.js
项目根目录中的gulpfile.js,是Gulp的配置文件。它大概是下面的样子。
javascript
var gulp = require('gulp'); gulp.task('default', function () { });
举个栗子,我们要实现js的压缩。
javascript
var gulp = require('gulp'), uglify = require('gulp-uglify'); gulp.task('minify', function () { gulp.src('js/app.js') .pipe(uglify()) .pipe(gulp.dest('app.min')) });
上面代码中使用了gulp-uglify模块。在此之前,需要先安装这个模块。
记住在安装之前先 运行 npm init
来生成package.json,如果已经有了就不需要这一步了。
bash
npm install --save-dev gulp-uglify
Tips: --save-dev 会将 gulp-uglify 自动添加到package.json的devDependencies中;
gulpfile.js加载gulp和gulp-uglify模块之后,使用gulp模块的task方法指定任务。task方法有两个参数,第一个是任务名,第二个是任务函数。在任务函数中,使用gulp模块的src方法,指定所要处理的文件,然后使用pipe方法,将上一步的输出转为当前的输入,进行链式处理。
在上面代码中,使用两次pipe方法,也就是说做了两种处理。第一种处理是使用gulp-uglify模块,压缩源码;第二种处理是使用gulp模块的dest方法,将上一步的输出写入本地文件,这里是app.min.js(代码中省略了后缀名js)。
从上面的例子中可以看到,gulp充分使用了“管道”思想,就是一个数据流(stream):src方法读入文件产生数据流,dest方法将数据流写入文件,中间是一些中间步骤,每一步都对数据流进行一些处理。
gulp.src()
gulp模块的src方法,用于产生数据流。它的参数表示所要处理的文件,一般有以下几种形式。
- js/app.js:指定确切的文件名。
- js/*.js:某个目录所有后缀名为js的文件。
- js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件。
- !js/app.js:除了js/app.js以外的所有文件。
- *.+(js|css):匹配项目根目录下,所有后缀名为js或css的文件。
src方法的参数还可以是一个数组,用来指定多个成员。
javascript
gulp.src(['js/**/*.js', 'css/**/*.css'])
gulp.task()
gulp模块的task方法,用于定义具体的任务。它的第一个参数是任务名,第二个参数是任务函数。下面是一个非常简单的任务函数。
javascript
gulp.task('test', function () { console.log('就测试下。'); });
task方法还可以指定按顺序运行的一组任务。
javascript
gulp.task('build', ['css', 'js', 'templates']);
上面代码先指定build任务,它按次序由css、js、templates三个任务所组成。注意,由于每个任务都是异步调用,所以没有办法保证js任务的开始运行的时间,正是css任务运行结束。
如果希望各个任务严格按次序运行,可以把前一个任务写成后一个任务的依赖模块。
javascript
gulp.task('css', ['templates'], function () { // Deal with CSS here });
上面代码表明,css任务依赖templates任务,所以css一定会在templates运行完成后再运行。
如果一个任务的名字为default,就表明它是“默认任务”,在命令行直接输入gulp命令,就会运行该任务。
javascript
gulp.task('default', function () { // Your default task });
gulp.watch()
gulp模块的watch方法,用于指定需要监视的文件。一旦这些文件发生变动,就运行指定任务。
javascript
gulp.task('watch', function () { gulp.watch('templates/*.tmpl.html', ['build']); });
上面代码指定,一旦templates目录中的模板文件发生变化,就运行build任务。
watch方法也可以用回调函数,代替指定的任务。
javascript
gulp.watch('templates/*.html', function (event) { console.log('Event type: ' + event.type); console.log('Event path: ' + event.path); });
另一种写法是watch方法所监控的文件发生变化时(修改、增加、删除文件),会触发change事件。可以对change事件指定回调函数。
javascript
var watcher = gulp.watch('templates/*.html', ['build']); watcher.on('change', function (event) { console.log('Event type: ' + event.type); console.log('Event path: ' + event.path); });
除了change事件,watch方法还可能触发以下事件。
- end:回调函数运行完毕时触发。
- error:发生错误时触发。
- ready:当开始监听文件时触发。
- nomatch:没有匹配的监听文件时触发。
watcher对象还包含其他一些方法。
- watcher.end():停止watcher对象,不会再调用任务或回调函数。
- watcher.files():返回watcher对象监视的文件。
- watcher.add(glob):增加所要监视的文件,它还可以附件第二个参数,表示回调函数。
- watcher.remove(filepath):从watcher对象中移走一个监视的文件。
gulp实现自动刷新 - gulp-livereload
gulp-livereload模块用于自动刷新浏览器,反映出源码的最新变化。它除了模块以外,还需要在浏览器中安装插件,用来配合源码变化。
javascript
var gulp = require('gulp'), livereload = require('gulp-livereload'); gulp.task('watch', function () { livereload.listen(); gulp.watch(['./asset/**/*.*','./templates/**/*.*'], function (file) { livereload.changed(file.path); }); });
上面代码监视asset和templates下的任何文件,一旦有变化,就自动刷新浏览器。
Tips: 调试css 很方遍,因为刷新css 不需要刷新这个页面,只需要重新加载css即可,赶紧双屏幕,三屏幕搞起来;代码敲得飞起。
还有很多实用的插件 可以到 NpmJs.org 去找。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。