$ npm install —g gulp全局安装
- 安装前保证已经安装了 ruby
$ npm install —save-dev- gulp作为项目的开发依赖( devDependence)安装到项目目录在项目根目录下创建一个名为
gulpfile.js的文件://引用 gulp pluginvar gulp = require(‘gulp’);
//建立 gulp task
gulp.task(‘default’, function(){
//任务代码
})</pre> 在项目根目录运行 gulp 时, gulp 会直接读取gulpfile.js`中定义的任务并执行.
- gulp 可以将每一个你要执行的工作命名, 而默认运行的 task 名为
default
- $ gulp`运行 gulp, 运行默认的名为’ default’ 的任务( task)
gulp <task> <othertask>运行指定 task
- gulp 基本 API
gulp.src(globs[, options])* `glob`参考 [node-glob 语法](https://github.com/isaacs/node-glob), 也可以直接写文件的路径options:略
gulp.dest(path[,options])* 能被`pipe`进来, 并能写文件到文件夹, 如果文件夹不存在, 则自动创建文件夹.path: String 或 Function, 可以直接写输出目录, 也可以传入一个返回路径的函数options:略
gulp.task(name[, deps], fn)* <pre>`gulp.task('script',function(){//待执行
})
`name: 赋予任务名称deps: 任务列表数组, 这些任务会在当前任务运行之前完成* task 默认以最大并发数执行, 也就是说 gulp 会一次性执行所有 task 并不做任何等待, 如果要以特定顺序执行, 需要: * 给出一个提示, 告知 task 什么时候执行完毕 * 再给出一个提示, 告知 task 依赖另一个 task 的完成 * ```var gulp = require(‘gulp’);
//返回一个 callback, 因此系统可以知道他什么时候完成
gulp.task(‘one’, function(cb){
//执行一些任务
cb(err); //如果 err 不是 null 或者 undefined, 则会停止执行, 这样代表执行失败.
});
//定义一个所以来的 task 必须在这个 task 执行之前完成
gulp.task(‘two’, [‘one’], function(){
//‘one’完成后要执行的任务
})
gulp.task(‘default’, [‘one’, ‘two’]);
1
* `fn`:要执行的操作
gulp.watch(glob [, opts], tasks)* 监听文件, 并可以在文件发生改动的时候做一些事情, 他总会返回一个 EventEmiiter 来发射`change`事件.glob: 指定具体监听哪些文件的变动tasks: 需要在文件变动后执行的任务* <pre>`var watcher = gulp.watch('js/**/*.js', ['uglify', 'reload']);watcher.on(‘change’, function(event){
console.log(‘File’+event.path+’ was ‘+event.type+’, running tasks…’);
});
`
- 工作流程
设定任务
* gulp 可以对不同的 task 命名, 而 default 是默认的人物名称, 如果执行 gulp 的时候没有指定任务名称, 则会执行`default` 任务.`//载入 gulp plugin var gulp = require('gulp'); //定义名称为 default 的 gulp 任务 gulp.task('default', function(){ console.log('Hello Gulp Default Task'); }); //定义名称为 other 的 gulp 任务 gulp.task('other', function(){ console.log('Hello Gulp Other Task'); }) `
执行指定的 gulp 任务
* <pre>`$ gulp`
* 执行默认的 default 任务`$ gulp other `
* 执行任务`other``$ gulp.task('default', ['other', 'script']); `* 在 default 任务中设定要执行的任务队列可以执行多个任务
监听
* 比如我们使用`gulp-uglify`最小化 JS 时, 希望可以在每次改动 JS 的时候自动执行 gulp 最小化动作 * <pre>`var gulp = require('gulp'),gulpUglify = require(‘gulp-uglify’);
gulp.task(‘script’, function(){
gulp.src(‘javascript/original/*.js’) //指定要处理的原始 JS 目录
.pipe(gulpUglify()) //执行最小化
.pipe(gulp.dest(‘javascript/minify’)); //最小化后部署到 JS 目录
})
`添加监听
* <pre>`gul.task('watch', function(){gulp.watch(‘javascript/original/_.js’, [‘script’]);
})</pre> _ <pre>$ gulp watch //执行监听 `* 执行监听后, 每次改动 javascript/origin/*.js 中所有 JS 文件时都会重新执行 script 任务. * 可以用`**`监听所有文件 * 可以将`watch`添加到任务列表, 这样只需要指令`gulp`就可以执行监听
例外处理
* 经历例外错误记录任务 * 由于例外错误可能会在很多地方出现, 最好是定义为可调用的函数 * <pre>`function errorLog(error){console.error(error);
this.emit(‘end’);
}
gulp.task(‘script’, function(){
gulp.src(‘…’)
.on(‘error’,errorLog)
.pipe(gulpUglify())
.pipe(gulp.dest(‘…’));
});
`
- 常用插件
gulp-uglify
* `$ npm install —save-dev gulp-uglify`- 将要最小化的 JS 文件放在 javascript/original 下
- 将最小化后的 JS 文件放在 javascript/minify 下
`var gulp = require('gulp'), gulpUgligy = require('gulp-uglify'); gulp.task('script', function(){ gulp.src('javascript/original/*js') .pipe(gulpUglify()) .pipe(gulp.dest('javascript/minify')); }) `
gulp-sass
* `$ npm install —save-dev gulp-sass` * 将要编译的 Scss 文件放在 scss 目录下 * 将编译后的 CSS 文件放在 css 目录下 * <pre>`var gulp = require('gulp'),gulpSass = required(‘gulp-sass’);
gulp.task(‘styles’,function(){
gulp.src(‘scss/_.scss’)
.pipe(gulpSass())
.pipe(gulp.dest(‘css’));
})</pre> _ 向 gulpSass()传入参数{outputStyle:’compressed’}`输出压缩后的 CSS 文件gulp-imagemin
* 压缩图片, 支持格式有 gif, jpg, png, svg$ npm install --save-dev gulp-imagemin- 指定 images/origin 下所有图片都压缩, 并把压缩后的图片放到 images 中
`var gulp = require('gulp'), gulpImagemin = require('gulp-imagemin'); gulp.task('image', function(){ gulp.src('images/original/**') .pipe(gulpImagemin()) .pipe(gulp.dest('images')); }) `
gulp-plumber
* `$ npm install —save-dev gulp-plumber`pipe(gulpPlumber())一定要在编译 scss 及最小化 js 之前就加入(注意顺序)`var gulp = require('gulp'), gulpUglify = require('gulp-uglify'); gulp.watch('watch', function(){ gulp.watch('javascript/original/*.js', ['script']); }); gulp.task('script', function(){ gulp.src('javascript/original/*.js') .pipe(gulpPlumber()) .pipe(gulpUglify()) .pipe(gulp.dest('javascript/minify')); }); `- gulp-autoprefixer
- gulp-minify-css
- gulp-clean
- gulp-livereload
- 工作范例
明确任务
* 检查 JS- 编译 Scss
- 合并 JS
- 压缩并重命名合并后的 JS
安装依赖
* `$ npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename —save-dev`新建`gulpfile.js`
* <pre>`//引入 gulp 及插件var gulp = require(‘gulp’),
gulpJshint = require(‘gulp-jshint’),
gulpSass = require(‘gulp-sass’),
gulpConcat = require(‘gulp-concat’),
gulpUglify = require(‘gulp-uglify’),
gulpRename(‘gulp-rename’);
//检查 JS, 该任务会检查 js/下的 js 文件有没有报错或警告
gulp.task(‘lint’,function(){
gulp.src(‘./js/.js’)
.pipe(gulpJshint())
.pipe(gulpJshint.reporter(‘default’));
});
//编译 Scss, 该任务会编译 scss/下的 scss 文件, 并把编译后的 css 文件保存到 /css 中
gulp.task(‘sass’, function(){
gulp.src(‘./scss/.scss’)
.pipe(gulpSass())
.pipe(gulp.dest(‘./css’));
});
//合并, 压缩 JS 文件, 该任务会合并 js/下的所有 js 文件, 并输出到 dist/目录, 然后重命名为.min.js, 并压缩再输出到 dist/下
gulp.task(‘scripts’, function(){
gulp.src(‘./js/.js’)
.pipe(gulpConcat(‘all.js’))
.pipe(gulp.dest(‘./dist’))
.pipe(gulpRename(‘all.min.js’)).
pipe(gulpUglify())
.pipe(gulp.dest(‘./dist’));
});
//默认任务, 默认任务基于其他任务, 使用.run()方法关联和运行我们之前定义的方法, 使用.watch()方法监听指定目录的文件
gulp.task(‘default’, function(){
gulp.run(‘lint’, ‘sass’, ‘scripts’);
//监听文件
gulp.watch(‘./js/.js’, function(){
gulp.run(‘lint’,’sass’,’scripts’);
});
});
