gulpfile.js demo

標籤：http   ssr   nano   div   proc   img   壓縮圖片   外掛程式   支援   

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

 

gulpfile.js demo