gulpfile.js demo

var config = require("./build.config")   //獲取build.config.js文件裏的內容
var gulp = require("gulp")　　　　　　　　　//獲取gulp模塊
var sass = require('gulp-sass');          //gulp-sass模塊是用於把sass轉成css
var path = require("path")
var babel = require("gulp-babel"); //gulp-babel模塊用於把es6轉成es5

var postcss = require("gulp-postcss")    //項目中把scss文件轉化成css文件
var autoprefixer = require('autoprefixer')    //autoprefixer根據當前瀏覽器的普及度以及屬性支持提供給你前綴：
var postasset = require("postcss-assets")  //postcss-assets 插件用來處理圖片和 SVG。在 CSS 聲明中引用圖片時，可使用 resolve 加上圖片路徑的形式，如「resolve(‘logo.png’)」。https://www.ibm.com/developerworks/cn/web/1604-postcss-css/
var cssnano = require('cssnano')      //css文件壓縮
var imagemin = require('gulp-imagemin');  //壓縮圖片文件
var pngquant = require('imagemin-pngquant');  //使用pngquant深度壓縮png圖片的imagemin插件
var uglify = require('gulp-uglify');         //壓縮javascript文件
var cache = require('gulp-cache');          //靜態資源緩存
var sourcemaps = require('gulp-sourcemaps');   //簡單說，Source map就是一個信息文件，裏面儲存着位置信息。也就是說，轉換後的代碼的每個位置，所對應的轉換前的位置
var browserify = require('gulp-browserify');
var changed = require('gulp-changed');     //該插件可以實現只編譯或打包改變過文件，大大加快了gulp task的執行速度。
var runSequence = require('run-sequence');    //讓gulp任務，能夠相互獨立，解除任務間的依賴，加強task複用
livereload = require('gulp-livereload');     //不用F5了，實時自動刷新頁面來開發
var rev = require('gulp-rev')                 //對文件加md5後綴
var revCollector = require('gulp-rev-collector');   //文件路徑替換
var log = console.log.bind(console);
var prefix = require('gulp-prefix');   //給引用了靜態資源的的HTML文件替換引用和加CDN前綴
require('shelljs/global')

gulp.task('d', function () {
    livereload.listen();
    gulp.watch('src/**/*.*', function (file) {   //關查src下的全部文件
        log("File " + file.path + " changed!");
        if (file.path.endsWith(".scss")) {    //若是文件後綴是.scss
            gulp.run("css")
        } else if (file.path.endsWith(".jsx")) {   //若是文件後綴是.jsx
            gulp.run("js") 
        } else {
            livereload.changed(file.path);
        }
    })
    log("     ***** Watching " + "[crtl+c to stop.] ******     ");
});

gulp.task('r', function (callback) {
    rm('-rf', config.distRoot)
    runSequence(["js:r", "css:r"], "revCss", "revJs", callback)
});
css()
css(":r")
js()
js(":r")
gulp.task("default", ["r"]);

function js(type) {
    gulp.task("js" + (type || ""), function () {
        var stream = gulp.src(config.jsSrc)
            .pipe(changed(config.jsDist))
            .pipe(sourcemaps.init())
            .pipe(babel({
                presets: ['es2015']
            }))
            .pipe(browserify({
                debug: false
            }))
        if (type == ":r") {
            stream = stream.pipe(uglify({compress: {warnings: true}}))
                .pipe(sourcemaps.write("./sources_maps"))
                .pipe(rev())
                .pipe(gulp.dest(config.jsDist))
                .pipe(rev.manifest())
                .pipe(gulp.dest('./rev/js'))
        } else {
            stream.pipe(gulp.dest("./src/static/js"))
        }
        return stream;
    });
}
function css(type) {
    var processors = [
        postasset,
        autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.1'],
            cascade: true,
            remove: true
        })
    ];
    var depend = [];
    if (type == ":r") {   // 若是是打包線上版本
        processors.push(cssnano());  壓縮css
        depend[0] = "img"
    }
    gulp.task('css' + (type || ""), depend, function () {
        var stream = gulp.src(config.cssSrc)
            .pipe(changed(config.cssDist))
            .pipe(sass())
            .pipe(postcss(processors))
        //.pipe(rename(function (path) {
        //    path.extname = ".css"
        //}))

        if (type == ":r") {
            stream.pipe(rev())
                .pipe(gulp.dest(config.cssDist))
                .pipe(rev.manifest())
                .pipe(gulp.dest('./rev/css'));
        } else {
            stream.pipe(gulp.dest("./src/static/css"))
        }
    });
}


gulp.task('img', function () {
    gulp.src(config.imgSrc)
        .pipe(cache(imagemin({   //緩存壓縮圖片
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        })))
        .pipe(gulp.dest(config.imgDist));
});

gulp.task('revCss', function () {
    return gulp.src(['./rev/css/*.json', './src/*.html'])   //讀取rev下面的.json文件，來替換html裏面對應的文件名字
        .pipe(revCollector())                         //替換html中對應的記錄
        .pipe(gulp.dest(config.distRoot));
});

gulp.task('revJs', function () {
    return gulp.src(['./rev/js/*.json', config.distRoot+"*.html"])
        .pipe(revCollector())
        .pipe(gulp.dest(config.distRoot));
});

gulp.task('prefix', function(){
    gulp.src(config.distRoot+"*.html")
        .pipe(prefix(config.cdnUrl, null, '{{'))
        .pipe(gulp.dest(config.distRoot));
});

gulp.task('img:clear', function (done) {  //清除圖片緩存
    return cache.clearAll(done);
});