前端构建工具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']);
});