前端gulp自動化構建配置

　　爲了節省http請求次數、節約帶寬，加速頁面渲染速度，達到更好用戶體驗的目的。如今廣泛的作法是在上線以前作靜態資源的打包構建，也就是靜態資源的合併壓縮；

　　這裏使用的是gulp，固然如今有更強大的模塊化構建工具webpack，你們能夠嘗試一下，可是無論用什麼工具，只要能解決對應的問題，就是好工具；

　　你們注意，使用gulp須要先安裝node哦，具體安裝教程請百度一下

完整的配置和demo在github上：https://github.com/hj1226104386/gulp-workflow.git，歡迎你們star一下啦

 

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

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

看起來就幾個步驟，作起來仍是挺麻煩的：

 

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

npm init -y

二、在根目錄建立一個gulpfile.js文件

三、安裝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中資源的引用路徑

四、在開始編寫任務以前，先新建一個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'
    }
};

五、編寫gulp任務

 // 一、統一將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))
})
// 二、刪除掉上一步操做生成的css、js合併文件(由於在後面的添加版本號過程當中也會生成，避免重複)
gulp.task('del',function () {
    return gulp.src([path.output.css,path.output.js])
        .pipe(clean());
});
// 二、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))
});
// 三、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))
});
// 四、圖片壓縮並加版本號
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))
});
// 五、給文件添加版本號，針對於已經替換引用路徑的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'));
});

// 六、複製其餘庫到構建目錄(只要保持html和庫的相對路徑一致，就能夠不用替換路徑)
gulp.task('copy',function () {
    return gulp.src(path.input.lib)
        .pipe(gulp.dest(path.output.lib))
});

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

 好了，以上就是差很少比較全的配置了，gulp的話入門比較簡單，一共就5個api，其餘的都是一些插件來幫助咱們實現強大的功能；

附上gulp的文檔：gulp文檔

另外還有不懂的小夥伴，歡迎留言哦！