配置gulp進行es6開發，包括es六、壓縮圖片、編譯less、壓縮css、自動添加版本號，和熱更新的功能

百度了一圈，想要在PC端進行ES6開發，都沒有找到相關的腳手架工具。後來想起還有gulp這樣的東西，因此就動手配置了一個關於在gulp進行開發的自動化工具。這份配置文件包括了，es六、壓縮圖片、編譯less、壓縮css、自動添加版本號，和熱更新的功能。 __注：項目地址： github.com/gentlefung/…這裏有更詳盡的用法

var gulp = require('gulp'),
    less = require('gulp-less'),
    assetRev = require('gulp-asset-rev'),
    minifyCss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    htmlmin = require('gulp-htmlmin'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    clean = require('gulp-clean'),
    pump = require('pump'),
    changed = require('gulp-changed'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync = require("browser-sync").create(),
    source = require('vinyl-source-stream'),
    sourcemaps = require('gulp-sourcemaps'),
    glob = require('glob'),
    es = require('event-stream'),
    babel = require('gulp-babel'),
    browserify = require('browserify');
複製代碼

/* 添加版本號的主要思路是

css添加版本號：
在src目錄下把less文件編譯成css，壓縮，發佈到dist目錄下。而後給dist目錄下真正生成的css文件添加hash值。生成的hash文件在rev目錄下一一對應
最後使用revHtml，html文件裏面的引入的css添加版本號

js添加版本號：

一、在src目錄下把js文件 壓縮，es6轉換，發佈到dist目錄下。

二、而後利用browserify將解析後的ES5代碼合併，轉變成可供瀏覽器識別的import、exprot,之類的方式。其中pages的js文件是經過識別各類import、export最終生成合並後的js.

（若是咱們使用了ES6中的 module，經過 import、export 進行模塊化開發，那麼經過babel轉碼後， import 、 export 將被轉碼成符合CMD規範的 require 和 exports 等，可是瀏覽器仍是不認識，這時可使用 bowserify 對代碼再次進行構建）

三、最後給dist目錄下真正生成的js文件添加hash值。生成的hash文件在rev目錄下一一對應
最後使用revHtml，html文件裏面的引入的js添加版本號

*/
複製代碼

//定義css、js源文件路徑
var lessSrc = 'src/css/*.less',
    cssMinSrc = 'dist/css/*.css',
    jsSrc = 'src/js/*.js',
    jsMinSrc = 'dist/js/*.js',
    //imgMinSrc = 'dist/images/*.{png,jpg,jpeg,gif,ico}', //這是致使沒法給圖片添加版本號時所用的路徑
    imgSrc = 'src/images/*.{png,jpg,jpeg,gif,ico}', //這是修改後的路徑
    htmlSrc = 'src/view/*.html';



/** 處理css **/

gulp.task('less', function() {
    return gulp.src(lessSrc) //該任務針對的文件
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        // 編譯less
        .pipe(less()) //該任務調用的模塊
        .pipe(minifyCss({
            compatibility: 'ie7'
        })) //壓縮css
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false,
            remove: false
        }))
        .pipe(gulp.dest('dist/css')) //編譯後的路徑
        .pipe(browserSync.reload({
            stream: true
        }));
});

//爲css文件中引入的圖片/字體等添加hash編碼
gulp.task('assetRev', function() {
    return gulp.src('dist/css/*.css') //該任務針對的文件
        .pipe(assetRev()) //該任務調用的模塊
        .pipe(gulp.dest('dist/css')); //爲css中引入的圖片/字體等添加hash編碼後的路徑
});


//CSS生成文件hash編碼並生成rev-manifest.json文件名對照映射
gulp.task('revCss', function() {
    return gulp.src('dist/css/*.css')
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});




/** 處理js **/


// 壓縮 js 文件
gulp.task('uglify', function() {
    // 1 找到文件
    return gulp.src('src/js/**/*.js')
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        // 生成sourcemaps
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        // 2 轉換es6爲es5
        .pipe(babel({
            presets: ['es2015']
        }))
        // 3 壓縮文件
        .pipe(uglify({
            mangle: false
        }))
        // 結束sourcemaps
        .pipe(sourcemaps.write())
        //4 另存壓縮後的文件
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.reload({
            stream: true
        }));
})


// 將 轉化成es6,編譯能夠供瀏覽器使用的js,這裏主要遍歷了pages頁面下的js文件。由於全部的這裏的js是最終使用的實際使用的js
gulp.task('browser', function(done) {
    // glob爲遍歷文件函數
    glob('dist/js/pages/*.js', function(err, files) {
        if (err) done(err);
        var tasks = files.map(function(entry) {
            return browserify({
                    entries: [entry]
                })
                
                .bundle()
                .pipe(source(entry))
                .pipe(changed('dist', {
                    hasChanged: changed.compareSha1Digest
                }))
                // .pipe(rename({
                // extname: '.bundle.js'
                // }))
                // 這的目錄是相對於‘dist/js/pages/*.js’
                .pipe(gulp.dest(''))
                .pipe(browserSync.reload({
                    stream: true
                }))
        });
        es.merge(tasks).on('end', done);
    })
});


//js生成文件hash編碼並生成rev-manifest.json文件名對照映射 目錄結構爲dist/js/index.js
gulp.task('revJs', function() {
    return gulp.src(jsMinSrc)
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


//js生成文件hash編碼並生成rev-manifest.json文件名對照映射 目錄結構爲dist/js/lib/lib.js
gulp.task('revJs2', function() {
    return gulp.src('dist/js/**/*.js')
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'))
        .pipe(browserSync.reload({
            stream: true
        }));
});



/** 處理圖片 **/
gulp.task('imageMin', function() {
    gulp.src('src/images/*.{png,jpg,jpeg,gif,ico}')
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
        .pipe(browserSync.reload({
            stream: true
        }));
});



/** 處理html，壓縮 **/
gulp.task('htmlMin', function() {
    var options = {
        collapseWhitespace: true, //從字面意思應該能夠看出來，清除空格，壓縮html，這一條比較重要，做用比較大，引發的改變壓縮量也特別大。
        collapseBooleanAttributes: true, //省略布爾屬性的值，好比：<input checked="checked"/>,那麼設置這個屬性後，就會變成 <input checked/>。
        removeComments: true, //清除html中註釋的部分，咱們應該減小html頁面中的註釋。
        removeEmptyAttributes: true, //清除全部的空屬性。
        removeScriptTypeAttributes: true, //清除全部script標籤中的type="text/javascript"屬性。
        removeStyleLinkTypeAttributes: true, //清楚全部Link標籤上的type屬性。
        minifyJS: true, //壓縮html中的javascript代碼。
        minifyCSS: true //壓縮html中的css代碼。
    };
    return gulp.src(htmlSrc)
        .pipe(changed('dist', {
            hasChanged: changed.compareSha1Digest
        }))
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/view'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


//Html替換css、js文件版本,這是
gulp.task('revHtml', function() {
    return gulp.src(['rev/**/*.json', 'dist/view/*.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('dist/view'));
});


/** 刪除任務 **/

gulp.task('clean', function(cb) {
    pump([
        gulp.src('dist'),
        clean()
    ], cb)
})


// 打包到真的項目中去
gulp.task('build', function(done) {
    //condition = false;
    runSequence( //此處不能用gulp.run這個最大限度並行(異步)執行的方法，要用到runSequence這個串行方法(順序執行)才能夠在運行gulp後順序執行這些任務並在html中加入版本號
        'clean',
        'less',
        'assetRev',
        'revCss',
        'uglify',
        'browser',//若是不須要es6環境的開發，直接註釋這行就能夠，js文件能夠按照不是es6開發編寫
        'revJs',
        'revJs2',
        'imageMin',
        'htmlMin',
        'revHtml',
        done);
});


// 配置給熱更新用，防止過多任務，卡死

gulp.task('dev', function(done) {
    //condition = false;
    runSequence( //此處不能用gulp.run這個最大限度並行(異步)執行的方法，要用到runSequence這個串行方法(順序執行)才能夠在運行gulp後順序執行這些任務並在html中加入版本號
        'less',
        'uglify',
        'imageMin',
        'htmlMin',
        done);
});

/* 熱更新 給每一個任務開頭添加 .pipe(changed('dist', { hasChanged: changed.compareSha1Digest })) 結尾添加 .pipe(browserSync.reload({ stream: true })); 而後啓動下面 serve任務 */
gulp.task('serve', function() {
    gulp.start('dev');
    browserSync.init({
        port: 2017,
        server: {
            baseDir: ['dist']
        }
    });
    gulp.watch('src/js/*.js', ['dev']); //監控文件變化，自動更新 
    gulp.watch('src/css/*.less', ['dev']);
    gulp.watch('src/view/*.html', ['dev']);
    gulp.watch('src/images/*.*', ['dev']);
});


gulp.task('default', ['serve']);
複製代碼