前端构建工具gulp的使用教程集合

基础教程：http://www.imooc.com/search/article?words=gulp

常用插件：http://www.mamicode.com/info-detail-517085.html

系列教程：http://www.w3cplus.com/blogs/blueed

视频教程：http://www.jikexueyuan.com/course/2261.html

细节注意：http://www.cnblogs.com/2050/p/4198792.html

revCollector-路径替换-详细介绍：http://blog.csdn.net/hayleyxia/article/details/46969711

revCollector-路径替换-默认只首次替换成功：http://blog.csdn.net/u010869754/article/details/52182015

gulp.spritesmith-精灵图：http://www.tuicool.com/articles/umiEbq

gulp-file-include-模板复用功能：https://www.npmjs.com/package/gulp-file-include

淘宝 NPM 镜像：https://npm.taobao.org/

注意一点：尽量不要用npm直接安装插件，国外的东西网速很慢，很可能出现各种缺少模块的的现象，所以请使用国内的npm镜像安装插件，链接在上一行

以下是我常用的插件package.json：

{
"devDependencies": {
"browser-sync": "^2.16.0",
"gulp": "^3.9.1",
"gulp-file-include": "^0.14.0",
"gulp-imagemin": "^3.0.3",
"gulp-load-plugins": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.1.2",
"gulp-rev-collector": "^1.0.5",
"gulp-sass": "^2.3.2",
"gulp-sequence": "^0.4.6",
"gulp-uglify": "^2.0.0",
"gulp-watch": "^4.3.9",
"gulp.spritesmith": "^6.2.1"
}
}注意点：
1. 图片压缩插件 gulp-imagemin 好像跟 node版本有关，如果 node版本过高，貌似会报错

2. 不建议使用 自动加载插件 gulp-load-plugins，有点坑

案例1

var gulp = require('gulp'),
sequence = require('gulp-sequence'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
rev = require('gulp-rev'),
revc = require('gulp-rev-collector');

// 压缩js并加min后缀
gulp.task('uglify', function () {
return gulp.src(['./js/minichat.js', './skin/h5chat/js/app.js'])
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('./skin/ding'));
});

// 给文件名加上MD5字符串
gulp.task('rev', function () {
return gulp.src(['./css/minichat.css', './skin/h5chat/css/app.css', './skin/ding/minichat.min.js', './skin/ding/app.min.js'])
.pipe(rev())
.pipe(gulp.dest('./skin/ding'))
.pipe(rev.manifest())// 生成清单json
.pipe(gulp.dest('./skin/ding'));
});

// 替换html中引用的文件名，和任务rev联合使用
gulp.task('revc', function() {
return gulp.src(['./skin/ding/*.json', './h5chat.html'])// 读取清单json和html
.pipe(revc({
replaceReved: true// 必加，模板中已经被替换的文件还能再被替换
}))
.pipe(gulp.dest('./skin/ding'));
});

// 复制页面，改变html文件名，防止缓存
gulp.task('revHtml', function () {
return gulp.src('./skin/ding/h5chat.html')
.pipe(rev())
.pipe(gulp.dest('./'))
.pipe(rev.manifest())// 生成清单json
.pipe(rename({suffix:'.html'}))
.pipe(gulp.dest('./skin/ding'));
});

// 控制任务执行的顺序
gulp.task('sequence', sequence('uglify', 'rev', 'revc', 'revHtml'));

// 监控
gulp.task('watch', function() {
gulp.watch(['./css/minichat.css', './skin/h5chat/css/app.css', './js/minichat.js', './skin/h5chat/js/app.js', './h5chat.html'], function (event) {
sequence('uglify', 'rev', 'revc', 'revHtml') (function (err) {
if (err) console.log(err)
})
})
});

案例2

// 压缩js并加min后缀
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');

gulp.task('uglify', function () {
return gulp.src('./js/*.js')
.pipe(rename({suffix:'.min'}))
.pipe(uglify({

}))
.pipe(gulp.dest('./js'));
});

案例3

// 自动刷新
var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('browserSync', function() {
browserSync.init({
server: "./"
});

gulp.watch(['*.html', 'js/abc/*.js']).on('change', browserSync.reload);
});

案例4

var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它，不建议使用该插件，很坑，所以以下可能报错
var plugins = require('gulp-load-plugins')();

//模板复用
gulp.task('fileinclude', function() {
return gulp.src(['./*.html'])
.pipe(plugins.fileinclude())
.pipe(gulp.dest('../'));
});

//sass(文件名前面带有_的，默认不被编译)
gulp.task('sass', function() {
return gulp.src('./scss/*.scss')
.pipe(plugins.sass({
outputStyle: 'compressed'
})).pipe(gulp.dest('../css'));
});

//图片无损压缩
gulp.task('imagemin', function() {
return gulp.src('./images/*')
.pipe(plugins.imagemin())
.pipe(gulp.dest('../images'));
});

//给文件名加上MD5字符串
gulp.task('rev', function () {
return gulp.src('js/*.js')
.pipe(plugins.rev())
.pipe(gulp.dest('dist/js'))
.pipe(plugins.rev.manifest())
.pipe(gulp.dest('dist'));
});

//替换html中引用的文件名，和任务rev联合使用
gulp.task('revc', function() {
return gulp.src(['dist/*.json', 'rev.html'])//读取清单json和html
.pipe(plugins.revCollector({
replaceReved: true//必加，模板中已经被替换的文件还能再被替换
}))
.pipe(gulp.dest('./'));
});

//自动生成精灵图
gulp.task('sprite', function () {
return gulp.src('images/*.png')
.pipe(plugins.spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.scss',
cssFormat: 'scss'
}))
.pipe(gulp.dest('images'));
});

//监控
gulp.task('watch', function() {
gulp.watch('js/*.js', ['rev']);
gulp.watch('js/*.js', ['revc']);
});