1 gulp介绍
gulp是一个前端的自动化构建工具,可以完成对前端资源的压缩、合并、格式化以及版本管理,也可以监听前端资源的变化去做一些自动化的构建工作
gulp也是一个基于nodejs的自动任务运行器,所以使用gulp的时候要有一套node的环境,这里对node的安装就不再赘述了。结合社区里好多优秀的gulp插件可以实现前端资源自动整合打包版本管理的功能,这里是gulp的官方: http://www.gulpjs.com.cn/
2 gulp 的安装
使用npm进行安装
npm install --global gulp
(也可以装在本地,建议装在全局里)
3 gulp的基本使用
gulp是以任务为单位的。如何执行一个任务
首先新建一个名叫gulpfile.js的文件,当在当前目录下运行“gulp”指令的时候就会执行gulpfile.js里的任务
引入gulp:
var gulp = require(‘gulp’);
编写一个任务:基本形式如下图所示,task函数的第一个变量是“任务名”,第二个参数为可选参数,是一个由其他任务名组成数组,设置这个任务执行前要执行的任务(其中的任务并发执行),第三个参数为任务执行的方法,就是该任务具体的操作。如下,编写了一个名叫default的任务(default任务为gulp默认任务)。
gulp.task(‘default’, function(){
//在这里写default任务具体要做的事情
console.log(‘gulp start’);
}
执行gulp:可以直接运行“gulp”指令来执行default任务(当单独执行gulp的时候会执行default任务),如果想执行其他任务:“gulp ”,例如有两个任务叫dev和rev,执行“gulp dev rev”(先执行dev)
- gulp大部分是对文件IO操作,gulp是对文件流进行操作,不同的操作之间用pipe链接起来,这样就不用生成中间文件,方便又快捷。如果像编写一个dev任务用来对目录下的index.html文件进行压缩并且复制到/views/目录下’,代码如下
gulp.task(‘dev’, function(){ gulp.src(‘index.html’) .pipe(gulp_uglify()) .pipe(gulp.dest(‘/views/index.html’)) })
- gulp.src是把文件读取成文件流,使用pipe去链接下一个操作,也就是把读出来的文件流进行压缩(gulp_uglify的操作),然后再将文件流产递给下面的dest方法,gulp.dest是写文件,将文件流写在/views/index.html文件中。
4 gulp主要方法及插件介绍
主要参考:http://www.cnblogs.com/2050/p/4198792.html
4.1 gulp.src
这个是用来获取文件流的,将参数中匹配出来的文件分别读成文件流,语法如下
//globs参数是文件匹配的字符串,符合glob语法
gulp.src(globs[, options]);
具体的glob语法:http://www.cnblogs.com/liulangmao/p/4552339.html
4.2 gulp.task
这个方法用来新建一个任务
第一个参数是任务名
第二个参数可选,是在这个任务执行之前要执行的任务的集合
第三个参数为任务的具体操作函数
gulp.task(name[, deps], fn)
gulp.task(‘fileCopy’, function(){
gulp.src(“/src/*.js”)
.pipe(gulp.dest(“/dist/”))
})
//将src下边的所有js文件复制到dist目录下
4.3 gulp.dest
这个方法是用来将文件流写到指定的位置,结合上面的例子,把所有js文件复制到dist目录下
gulp.dest(path[,options])
4.4 gulp.watch
这个方法是用来监听文件变化的,当文件变化要进行一些操作,算是gulp的一个特殊的任务。
gulp.watch(glob[, opts], tasks)
第一个参数是文件匹配的字符串,和src一样,也遵循glob语法
第二个参数可选,一般不用
第三个参数是文件变化之后要执行的任务的集合。
gulp.task(‘dispose’, function(){
//dispose1的操作
});
gulp.task(‘reload’, function(){
//dispose2的操作
});
gulp.watch(“/src/*.js”, [“dispose”, “reload”])
//当src目录下的js文件变化了,执行dispose和reload两个任务
4.5 插件
常见的插件请参考总结:http://www.cnblogs.com/zichi/p/6250504.html