前端构建工具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-uglify": "^2.0.0",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-sass": "^2.3.2",
    "gulp-watch": "^4.3.9",
    "gulp.spritesmith": "^6.2.1"
  }
}

以下是gulpfile.js：

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']);
});

// 压缩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'));
});

// 自动刷新  
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);  
});