前提条件
已经安装了Node.js。如果没有安装，可以到官网下载。
安装
在我们配置任务之前，需要先安装gulp：
$ npm install gulp -g //将gulp安装到全局环境
接下来，进入项目目录，将gulp安装到依赖环境中
$ npm install gulp --save-dev
--save-dev这个属性会将gulp及版本信息保存到package.json的devDependeccies里面。package.json文件位于项目根目录中，可以自己编写
也可以通过 npm init 来初始化。
安装Gulp插件
我们将要使用Gulp插件来完成我们以下任务：
- sass的编译（gulp-sass）
- 自动添加css前缀（gulp-autoprefixer）
- 压缩css（gulp-minify-css）
- js代码校验（gulp-jshint）
- 合并js文件（gulp-concat）
- 压缩js代码（gulp-uglify）
- 压缩图片（gulp-imagemin）
- 自动刷新页面（gulp-livereload）
- 图片缓存，只有图片替换了才压缩（gulp-cache）
- 更改提醒（gulp-notify）
- 清除文件（del）
- bower安装的第三方包构建（main-bower-files）
- web服务（gulp-connect）
安装这些插件使用如下命令：
$ npm install --save-dev gulp-sass gulp-minify-css gulp-jshint
gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-livereload
gulp-rename gulp-cache gulp-filter gulp-connect del main-bower-files
gulpfile.js
下面是我写的一个gulpfile.js。具体的gulp接口可以查看其github上面的接口文档，地址：https://github.com/gulpjs/gulp/blob/master/docs/API.md
我也将其放在了gist上面。（有什么问题可以指出来，谢谢！）
'use strict';
/*!
* gulp
* $ npm install gulp-sass gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-livereload
* gulp-rename gulp-cache gulp-filter gulp-connect del main-bower-files --save-dev
*/
// 引入gulp
var gulp = require('gulp');
// 引入组件
var mainBowerFiles = require('main-bower-files'),
jshint = require('gulp-jshint'),
sass = require('gulp-sass'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
minifycss = require('gulp-minify-css'),
notify = require('gulp-notify'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
filter = require('gulp-filter'),
del = require('del'),
connect = require('gulp-connect');
// 过滤文件
var filterByExtension = function(extension) {
return filter(function(file) {
return file.path.match(new RegExp('.' + extension + '$'));
});
};
// 将bower安装的第三方包，存储到dist/lib目录下
gulp.task('bower', function() {
var mainFiles = mainBowerFiles();
var jsFilter = filterByExtension('js'),
cssFilter = filterByExtension('css');
return gulp.src(mainFiles, {base: './bower_components'})
.pipe(gulp.dest('./dist/lib'))
.pipe(rename({suffix: '.min'}))
.pipe(cssFilter)
.pipe(minifycss())
.pipe(gulp.dest('./dist/lib'))
.pipe(cssFilter.restore())
.pipe(jsFilter)
.pipe(uglify())
.pipe(gulp.dest('./dist/lib'));
});
// 编译sass, 压缩css
gulp.task('styles', function(){
return gulp.src('./app/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./app/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
// 检查，合并，压缩js文件
gulp.task('scripts', function(){
return gulp.src('./app/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('all.js'))
.pipe(gulp.dest('./dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('./dist/assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// 图片压缩
gulp.task('images', function(){
return gulp.src('./app/img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest('./dist/assets/img'))
.pipe(notify({message: 'Images task complete'}));
});
// 清除文件
gulp.task('clean', function(cb){
del(['./dist/assets/css', './dist/assets/js', './dist/assets/img'], cb)
});
gulp.task('clean-bower', function(cb){
del(['./dist/lib'], cb)
});
// 设置默认任务
gulp.task('default',['clean'], function(){
gulp.run('styles', 'scripts', 'images');
;})
// watch任务
gulp.task('watch', function(){
// 启动web服务
connect.server({
root: [__dirname],
port: 8099,
livereload: true
})
// 监听文件变化
gulp.watch('./app/js/*.js', ['scripts']);
gulp.watch('./app/scss/*.scss', ['styles']);
gulp.watch('./app/img/**/*', ['images']);
gulp.watch('./bower_components/**/*', ['bower']);
// 创建LiveReload服务
livereload.listen();
// 监听app文件夹下面的所有文件，有变化的浏览器就会重新加载
gulp.watch(['./app/**']).on('change', livereload.changed);
});