為了節省http請求次數、節約帶寬，加速頁面渲染速度，達到更好用戶體驗的目的。現在普遍的做法是在上線之前做靜態資源的打包構建，也就是靜態資源的合並壓縮；

　　這裏使用的是gulp，當然現在有更強大的模塊化構建工具webpack，大家可以嘗試一下，但是不管用什麽工具，只要能解決對應的問題，就是好工具；

　　大家註意，使用gulp需要先安裝node哦，具體安裝教程請百度一下

資源構建無非就是下面幾個步驟：

1. css、js、image的合並壓縮
2. 給css、js、image合並後添加版本號（hash），生成對應的manifest文件，這一步非常重要
3. 根據manifest文件來替換HTML文件和css文件中的對應資源路徑

看起來就幾個步驟，做起來還是挺麻煩的：

1、首先先在根目錄打開命令行做項目依賴初始化：

npm init -y

2、在根目錄創建一個gulpfile.js文件

3、安裝gulp的依賴，通過npm來安裝，如下，並在gulpfile中引入（commonjs規範，使用require來引入模塊）

var gulp = require(‘gulp‘);
var rev = require(‘gulp-rev‘); // 創建版本號（hash）值
var revCollector = require(‘gulp-rev-collector‘); // 將版本號添加到文件後
var sequence = require(‘run-sequence‘); //
 
 讓gulp任務同步運行
var clean = require(‘gulp-clean‘); // 清除dist構建目錄
var htmlmin = require(‘gulp-htmlmin‘); // 壓縮html
var cssnano = require(‘gulp-cssnano‘); // css壓縮
var autoprefixer = require(‘gulp-autoprefixer‘); // 自動處理css兼容後綴
var babel = require(‘gulp-babel‘); // es6轉es5
var concat = require(‘gulp-concat‘); // 文件合並
 

var uglify = require(‘gulp-uglify‘); // js混淆
var imagemin = require(‘gulp-imagemin‘); // 圖片壓縮
var browserSync = require(‘browser-sync‘).create(); // 啟動本地服務，修改免F5刷新
var useref = require(‘gulp-useref‘); // 替換HTML中資源的引用路徑

4、在開始編寫任務之前，先新建一個path對象，用來統一配置和保存靜態資源路徑

// 路徑配置
var path = {
    // 靜態資源輸入路徑
    input: { 
        html: [‘./src/*.html‘],
        css: [‘./src/css/*.css‘],
        js: [‘./src/js/*.js‘],
        images: [‘./src/images/*‘],
        lib: [‘./src/lib/**/*‘]
    },
    // 靜態資源輸出路徑
    output: {
        html: ‘./dist‘,
        css: ‘./dist/css‘,
        js: ‘./dist/js‘,
        images: ‘./dist/images‘,
        lib: ‘./dist/lib‘,
    },
    // manifest文件保存路徑
    rev:{
        baseRev:‘./rev‘,
        css:‘./rev/css‘,
        js:‘./rev/js‘,
        images:‘./rev/images‘
    }
};

5、編寫gulp任務

 // 1、統一將html中的資源替換成壓縮合並後的文件名並將HTML特定標簽中的文件合並
gulp.task(‘html‘,function () {
    var options = {
        removeComments: true, //清除HTML註釋
        collapseWhitespace: true, //壓縮HTML
        removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
        minifyJS: true, //壓縮頁面JS
        minifyCSS: true //壓縮頁面CSS
    };
    return gulp.src(path.input.html)
        .pipe(useref())
        .pipe(htmlmin(options))
        .pipe(gulp.dest(path.output.html))
})
// 2、刪除掉上一步操作生成的css、js合並文件(因為在後面的添加版本號過程中也會生成，避免重復)
gulp.task(‘del‘,function () {
    return gulp.src([path.output.css,path.output.js])
        .pipe(clean());
});
// 2、css合並壓縮並加版本號
gulp.task(‘css‘, function () {
    return gulp.src(path.input.css)
        .pipe(concat(‘all.min.css‘))
        .pipe(autoprefixer())
        .pipe(cssnano())
        .pipe(rev())
        .pipe(gulp.dest(path.output.css))
        .pipe(rev.manifest())
        .pipe(gulp.dest(path.rev.css))
});
// 3、js合並壓縮並加版本號
gulp.task(‘js‘, function () {
    return gulp.src(path.input.js)
        .pipe(concat(‘all.min.js‘)) // 合並
        .pipe(babel({               // 轉es5
            presets: [‘es2015‘]
        }))
        .pipe(uglify())             // 混淆
        .pipe(rev())
        .pipe(gulp.dest(path.output.js))
        .pipe(rev.manifest())
        .pipe(gulp.dest(path.rev.js))
});
// 4、圖片壓縮並加版本號
gulp.task(‘img‘, function () {
    return gulp.src(path.input.images)
        // .pipe(imagemin())           // 壓縮圖片
        .pipe(rev())
        .pipe(gulp.dest(path.output.images))
        .pipe(rev.manifest())
        .pipe(gulp.dest(path.rev.images))
});
// 5、給文件添加版本號，針對於已經替換引用路徑的HTML文件，在dist目錄下
gulp.task(‘rev‘, function () {
    return gulp.src([path.rev.baseRev+‘/**/*.json‘, path.output.html+‘/**/*.html‘, path.output.html+‘/**/*.css‘])
        .pipe(revCollector({
            replaceReved: true, // 一定要添加，不然只能首次能成功添加hash
            dirReplacements: {
                ‘css‘: ‘css/‘,
                ‘js‘: ‘js/‘,
                ‘images‘: ‘images/‘,
                ‘lib‘: ‘lib/‘,
            }
        }))
        .pipe(gulp.dest(‘dist‘));
});

// 6、復制其他庫到構建目錄(只要保持html和庫的相對路徑一致，就可以不用替換路徑)
gulp.task(‘copy‘,function () {
    return gulp.src(path.input.lib)
        .pipe(gulp.dest(path.output.lib))
});

// 7、移除rev目錄和dist構建目錄
gulp.task(‘clean‘, function() {
    return gulp.src([‘./dist‘,‘./rev‘])
        .pipe(clean());
});
// 8、監控文件的改變，頁面動態刷新
/*gulp.task(‘serve‘, function() {
    browserSync.init({
        port: 3000,
        server: {
            baseDir: [‘./src/‘],  // 啟動服務的目錄 默認 index.html
            index: ‘index.html‘   // 自定義啟動文件名
        }
    });
});*/
// 9、監控文件變化，自動重新構建
/*gulp.task(‘watch‘,function () {
    gulp.watch(‘./src/!**!/!*‘, [‘clean‘,‘html‘,‘del‘,‘css‘,‘js‘,‘img‘,‘rev‘,‘copy‘]);
})*/
// 9、build
gulp.task(‘default‘,function (callback) {
    // sequence的作用是讓所有任務同步執行，gulp默認的是異步執行
    sequence(‘clean‘,‘html‘,‘del‘,‘css‘,‘js‘,‘img‘,‘rev‘,‘copy‘,function () {
        console.log(‘構建完成‘);
    })
})

前端自動化構建配置清單