gulpfile.js配置

var gulp = require("gulp");
var cssMin = require('gulp-clean-css');//压缩css文件，减小文件大小，并给引用url添加版本号避免缓存
var jsMin = require('gulp-uglify');//压缩javascript文件，减小文件大小。
var babel = require('gulp-babel');//es6转es5
var jsEslint = require('gulp-eslint');//代码规范
var imgSprite = require('gulp.spritesmith');//将多个小图合并成一张精灵图
var plumber = require('gulp-plumber')//错误改过之后让watch继续执行
var useref = require('gulp-useref');//它可以把html里零碎的这些引入合并成一个文件，但是它不负责代码压缩
var rev = require('gulp-rev');//解决缓存的
var sass = require('gulp-sass');//把sass转成css
var imgMin = require('gulp-imagemin');//图片文件压缩（包括PNG、JPEG、GIF和SVG图片）
var runSequence = require("run-sequence");//作用就是控制多个任务进行顺序执行或者并行执行
var autoprefixer = require('gulp-autoprefixer');//浏览器兼容
var merge = require('merge-stream');//一个gulp的task只能返回一个stream，但有的时候有这么一种情景：有两类文件，它们的原始位置和处理后的位置都是不同的，
                                    // 但它们的处理流程相同。由于gulp.src和gulp.dest的参数不同，我们就需要写两个task来分别完成这个任务，一方面略显重复，
                                    // 另一方面逻辑上来讲这两个task本来就是处理同样的事情的。
                                    // 这种情况就需要merge-stream登场了，它的作用就是将多个stream合成一个返回(http://pinkyjie.com/2015/08/02/commonly-used-gulp-plugins-part-1/)                            
var buffer = require('vinyl-buffer');//vinyl-buffer用于将vinyl流转化为buffered vinyl文件（gulp-sourcemaps及大部分Gulp插件都需要这种格式）。
var revReplace = require('gulp-rev-replace');//配合 gulp-rev 使用，拿到生成的 manifest。json 后替换对应的文件名称。
var del = require("del");//删除
var rev = require('gulp-rev');解决缓存的
var gutil = require('gulp-util');//最基础的工具，但俺只用来打日志...
var gulpif = require('gulp-if');//做判断的
var browserSync = require("browser-sync").create(); //能让浏览器实时快速的响应更新的css,html,js
var reload = browserSync.reload;
var dev = true;
var glob = require('glob'); //匹配
const filter = require('gulp-filter');//gulp-filter
// css处理
gulp.task('cssBuild', function() {
    return setTimeout(function() {
        return gulp.src(['src/css/*.scss'])
            .pipe(plumber())
            .pipe(sass().on('error', function(err) {
                console.log(err)
            }))
            .pipe(autoprefixer({
                browsers: [
                    "> 1%",
                    "last 45 versions",
                    "not ie <= 8"
                ]
            }))
            .pipe(gulpif(dev, gulp.dest('.tmp/css/')))
            .pipe(reload({
                stream: true
            }))
    }, 300)
})
// gulp.task('cssLibMove', function() {
//     return gulp.src(['src/css/lib/*.css'])
//         .pipe(gulp.dest('dist/css/lib/'))
// })
// gulp.task('cssOther', function() {
//     return gulp.src(['.tmp/css/*.css'])
//         .pipe(gulp.dest('dist/css/'))
// })
// js处理
gulp.task('jsBuild', () => {
    return gulp.src(['src/js/*.js', '!src/js/lib/*.js'])
        // .pipe(babel())
        .pipe(gulpif(!dev, jsMin({
            mangle: true,
            compress: {
                sequences: true,
                dead_code: true,
                conditionals: true,
                booleans: true,
                unused: true,
                if_return: true,
                join_vars: true,
                drop_console: true
            }

        })))
        .on('error', function(err) {
            gutil.log('Error!', err);
        })
        .pipe(gulpif(dev, gulp.dest('.tmp/js/'), gulp.dest('dist/js/')))
        .pipe(reload({
            stream: true
        }));
});
// gulp.task('jsLib', () => {
//     return gulp.src('src/js/lib/*.js')
//         .pipe(gulp.dest('dist/js/lib/'))
// });
// 图片:背景图处理
gulp.task('spritesBuild', function() {
    var spritesStream = [];
    glob('src/images/sprites/**/', function(er, files) {
        if (files.length > 0) {
            files.forEach(function(item, index) {
                if (index > 0) {
                    var itemArr = item.split('/');
                    var imgName = itemArr[itemArr.length - 2];
                    var spriteData = gulp.src(item + '*.png')
                        .pipe(imgSprite({
                            imgName: imgName + new Date().getTime() + '.png',
                            cssName: imgName + '.scss',
                            imgPath: imgName + new Date().getTime() + '.png',
                            retinaSrcFilter: 'src/images/sprites/' + imgName + '/*@2x.png',
                            retinaImgName: imgName + new Date().getTime() + '@2x.png',
                            retinaImgPath: imgName + new Date().getTime() + '@2x.png',
                            cssTemplate: 'handlebarsInheritance.scss.handlebars'
                        }))
                    var imgStream = spriteData.img
                        .pipe(buffer())
                        .pipe(gulpif(dev, gulp.dest('.tmp/images')));
                    var cssStream = spriteData.css
                        .pipe(gulpif(dev, gulp.dest("src/css")));
                    spritesStream.push(merge(imgStream, cssStream))
                }
            });
        }

    })
    return spritesStream;
})
gulp.task('spritesMove', function() {
    return gulp.src(['.tmp/images/*.png'])
        .pipe(gulp.dest('dist/images'))
})
// 图片:压缩处理
gulp.task('imgMin', function() {
    return gulp.src(['src/images/*.*', '!src/images/sprites'])
        .pipe(imgMin())
        .pipe(gulp.dest('dist/images'))
})
// gulp.task('html', () => {
//     return gulp.src(['src/*.html'])
//         .pipe(gulp.dest('dist'));
// });
gulp.task('indexHtml', () => {
    var cssFilter = filter("**/*.css", {
        restore: true
    });
    return gulp.src(['src/*.html'])
        .pipe(useref({
            searchPath: ['.tmp', 'src']
        }))
        .pipe(cssFilter)
        .pipe(cssMin())
        .pipe(rev())
        .pipe(cssFilter.restore)
        .pipe(revReplace())
        // 压缩
        .pipe(gulp.dest('dist'));
});
// 清除生产文件
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
gulp.task('clean:dist', del.bind(null, ['dist']));
// 开发
gulp.task('serve', ['spritesBuild', 'clean'], () => {
    runSequence(['jsBuild', 'cssBuild'], () => {
        browserSync.init({
            open: true,
            notify: false,
            port: 8076,
            server: {
                baseDir: ['src', '.tmp'],
            }
        });
    });
    gulp.watch(['src/*.html', 'src/js/*.js']).on('change', reload);
    gulp.watch('src/images/sprites/**/*.png', ['spritesBuild', 'cssBuild']);
    gulp.watch('src/css/*.scss', ['cssBuild']).on('change', reload);
    gulp.watch('src/js/*.js', ['jsBuild']);
});
gulp.task('dev', () => {
    dev = false;
})
// 生产
gulp.task('build', ['clean:dist', 'dev'], () => {
    runSequence(['default'], () => {
        browserSync.init({
            notify: false,
            open: true,
            port: 8072,
            server: {
                baseDir: ['dist']
            }
        });
    })
});
gulp.task('default', ['spritesMove', 'cssBuild', 'jsBuild', 'imgMin', 'indexHtml']);