1、项目中新建gulpfle.js文件,使用npm init生成package.json文件
2、作为项目的开发依赖(devDependencies)安装gulp: $ npm install --save-dev gulp
3、安装gulp常用依赖 npm install --save-dev gulp-jshint
npm install --save-dev gulp-uglify
npm install --save-dev gulp-concat
以上三个分别 JS检验,JS压缩,JS合并 的功能
4、gulp只有五个方法:task,run,watch,src,和dest
gulp.task(name[, deps], function(){ /*任务内容*/}) //定义任务
deps :一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。
gulp.src(globs[, options]) //把globs匹配的文件以buffer或stream,传给下一步进行操作
options: {buffer:false,read:false,base:'js'}
gulp.watch(glob[, opts, function(event){/*检测到文件变化执行的操作*/}]);
也可以是gulp.watch(glob[, opts], tasks)
gulp.run('taskNames') //运行指定任务,可以是多个(数组)
gulp.dest(path[, options]) //将上一步操作传来的buffer或stream转为文件,存放到指定路径
options: {cwd:'',mode:''}
5、示例
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('concat', function () {
gulp.src('./js/*.js')
.pipe(jshint())
.pipe(uglify())
.pipe(gulp.dest('./build/'));
console.log('uglify');
});
gulp.task('default', ['concat']);
注:
gulp.src()方法输入一个glob(比如匹配一个或多个文件的字符串)或者glob数组,然后返回一个可以传递给插件的数据流。
Gulp使用node-glob来从你指定的glob里面获取文件
js/app.js 精确匹配文件
js/*.js 仅匹配js目录下的所有后缀为.js的文件
js/*/.js 匹配js目录及其子目录下所有后缀为.js的文件
!js/app.js 从匹配结果中排除js/app.js,这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用
*.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件