作为任务自动管理工具,是目前前端工程化提高效率非常有用的一环。以前觉得许多实用的功能webpack都有,也没怎么去研究,今天还是玩了下。
why gulp:我觉得唯一的原因是,gulp的使用够简单,能处理常见任务,帮我们实现项目构建的自动化。
安装:先npm全局安装gulp,再在项目文件夹npm本地安装gulp,即可在gulpfile.js配置文件中调用gulp。
npm install -g gulp
npm install --save-dev gulp
使用:和其他前端工具一样,当我们写好位于项目根目录的gulpfile.js配置文件后,只需要命令行输入gulp taskName(taskName是自定义的任务名),就会自动执行gulp中我们定义的任务。
//示例
var gulp = require('gulp'); //引入gulp
var uglify = require('gulp-uglify'); //引入gulp-uglify,用来压缩代码
var concat = require('gulp-concat'); //引入gulp-concat,用来合并代码
gulp.task('base',function(){
return gulp.src('./src/*.js') //从src目录中获取该录下所有js文件,产生数据流
.pipe(uglify()) //上一步的数据流作为输入,压缩,再输出
.pipe(concat('all.js')) //上一步的数据流作为输入,合并成一个all.js
.pipe(gulp.dest('build')); //上一步的数据流作为输入,将all.js写入到名为build的文件夹里
});
写完gulpfile.js后,在项目文件夹命令行工具输入:
gulp base
就会自动执行任务,生成/build/all.js。
gulp定义任务的一般格式如上。当项目复杂时,我们可能需要定义多个任务。从上面的例子我们可以看出,gulpfile配置文件在引入gulp和相关工具函数后,主要是下面4个步骤:
gulp.task(str,function) :通过task方法定义一个任务,参数1是任务名,参数2是封装了特定操作的函数,即任务。
gulp.src(path) :通过src方法获取源文件,产生数据流,供后续步骤操作。
.src()之后用连缀的写法执行.pipe(fn())对上一步的数据流执行中间件操作。
gulp.dest(path):将上一步的数据流写入指定文件夹中。
所以,gulp的任务流,其实就是借用了管道的思想,在管道中对数据流一次次进行操作,最后输出处理过后的文件。
其中,gulp.src(path)的路径参数可以有下面4种写法:
js/app.js:指定确切的文件名
js/*.js:某个目录所有后缀名为js的文件。
js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件。
!js/app.js:除了js/app.js以外的所有文件。
上例中,.task | .src | .dest 三个函数是gulp的方法,gulp还有一个watch方法,用来监听目标文件:
gulp.task('watch', function () {
gulp.watch('templates/*.tmpl.html',['build']); //第二个参数是任务名数组
});
命令行输入gulp watch之后,一旦templates目录中的.tmlp.html模板文件发生改动,就会执行build任务。
写gulp配置文件本身非常简单,真正出彩之处在于2点:
一是gulp的管道思想,让我们可以非常方便地管理任务。
二是gulp的各种插件,让我们使用工具函数一步步对项目文件进行定制操作。
附上几个看到的挺有用的插件:
gulp-cssnano或gulp-minify-css:压缩css文件
gulp-load-plugins:引入并执行后返回项目package.json所有gulp模块,如下:
var gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins'),
plugins = gulpLoadPlugins();
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(plugins.uglify())
.pipe(plugins.concat('app.js'))
.pipe(gulp.dest('build'));
});
gulp-sass:对sass文件进行预处理
gulp-imagemin:压缩图片
gulp-useref:将html页面中的script标签的js按顺序合并
run-sequence:按顺序执行任务:
gulp.task('task-name', function(callback) {
runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback);
});
gulp-autoprefixer:自动添加样式前缀
del:清除文件
遇到的问题:
1.如果命令行输入gulp taskName执行后没报错,但是没有生成预期的结果文件,应该是定义任务时路径有问题。
2.gulp执行时默认只能接受ES5语法,如果代码文件用了ES6,要先在gulp任务里用babel转ES5,再执行后续的压缩合并。
参考: