基於gulp搭建的前端自動化構建

基於gulp搭建的前端自動化構建，需要對gulp做文件路徑配置，執行打包命令即可
官網鏈接：https://www.gulpjs.com.cn/

1. 首先新建項目文件夾後，項目目錄下創建 package.json 文件。

npm init

2. 安裝 gulp 命令行工具

npm install --global gulp-cli

3. 安裝 gulp，作爲開發時依賴項

npm install --save-dev gulp

4. 新建gulpfile.js文件，簡單方法表示如下：

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

5. 在項目根目錄下執行 gulp 命令

gulp

6. 現對gulpfile.js進行詳細配置

gulp插件

我們要處理文件的合併、壓縮等操作，接口中沒有提供，都放在了插件中。

插件下載：

npm install 插件名 --save-dev

gulp-concat : 合併文件(js/css)

gulp-uglify : 壓縮js文件

gulp-rename : 文件重命名

gulp-less : 編譯less

gulp-sass：編譯sass

gulp-clean-css : 壓縮css

gulp-livereload : 實時自動編譯刷新

gulp-htmlmin：壓縮html文件

gulp-connect：熱加載，配置一個服務器

gulp-load-plugins：打包插件（裏面包含了其他所有插件）

未完全補全插件的信息，可根據下方代碼文件看插件名稱來下載，或者學習官網插件api。

代碼文件見如下：
首先對需要引用的文件寫完整

var gulp = require('gulp'),
    mincss = require('gulp-mini-css'),
    uglify = require('gulp-uglify'),
    htmlmin = require('gulp-htmlmin'),
    plumber = require('gulp-plumber'),
    Replace = require('gulp-replace'),
    processhtml = require('gulp-processhtml'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    imageminJpegtran = require('imagemin-jpegtran'),
    imageminGifsicle = require('imagemin-gifsicle'),
    imageminOptipng = require('imagemin-optipng'),
    imageminSvgo = require('imagemin-svgo'),
    domSrc = require('gulp-dom-src'),
    cheerio = require('gulp-cheerio'),
    cache = require('gulp-cache'),
    gutil = require('gulp-util'),
    babel = require("gulp-babel");

其次命名標示清楚需要打包壓縮的源文件，即src_xx命名信息，以及目的文件，命名未dest_xx信息。

var src_css = './src/css',
    dest_css = './dest/css',
    src_html = './src',
    dest_html = './dest',
    src_img = './src/img',
    dest_img = './dest/img',
    src_js = './srcA/js',
    dest_js = './dest/js',

針對打包異常可採用控制檯發聲

var date = new Date().getTime();
function errrHandler( e ){
    // 控制檯發聲,錯誤時beep一下
    gutil.beep();
    gutil.log(e);
    this.emit('end');
}

最重要的就是建立gulp執行打包的方法，這裏是分別對image/html/js/css等進行處理打包，function方法中需要添加好src_xx的路徑信息，具體實現爲固定寫法，想了解深層次含義可以學習官網api。以下建立的task任務，命名分別爲 ‘imagemin’ / ‘htmlmin’ / ‘minjs’ / ‘mincss’。

gulp.task('imagemin', function () {
    gulp.src(src_img + '/**/*.{png,jpg,gif,ico}')
        .pipe(plumber({errorHandler: errrHandler}))
        .pipe(imagemin({
            progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性
            use: [pngquant(), imageminJpegtran({progressive: true})
                , imageminGifsicle({interlaced: true}),
                imageminOptipng({optimizationLevel: 3}), imageminSvgo()]
            //使用pngquant深度壓縮png圖片的imagemin插件
        }))
        .pipe(gulp.dest(dest_img));
});

gulp.task('htmlmin', function () {
    var options = {
        removeComments: true,//清除HTML註釋
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: false,//省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: false,//刪除所有空格作屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };

    gulp.src([src_html+'/**/*.html','!./srcA/{service,hardware}.html'])

        .pipe(plumber({errorHandler: errrHandler}))
        .pipe(Replace(/_VERSION_/gi, date))
        .pipe(processhtml())
        .pipe(htmlmin(options))
        .pipe(gulp.dest(dest_html));

});
gulp.task('mincss', function () {
    gulp.src(src_css+'/**/*.css')
        .pipe(mincss())
        .pipe(gulp.dest(dest_css));
});
gulp.task('minjs', () => {
    return gulp.src(src_js+'/**/*.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(dest_js));
});

打包的任務列舉清楚後，下一步就是一次性執行任務了，也可針對上面的壓縮單獨操作。一般情況下可通過建立一個通用task 依次跑通所有的打包壓縮任務，即使用gulp.run方法執行。

gulp.task('default',['clean'],function(){
    gulp.run('minjs','mincss','htmlmin','imagemin');
    // gulp.run('watch');
});

這裏有註釋了一個watch方法，即爲監聽，當我執行打包壓縮後，我修改了開發工具中的代碼，該watch方法可自動爲項目進行打包壓縮，十分便捷。

gulp.task('watch', function () {
    gulp.watch(src_css+'/**/*.css',['mincss']);
    gulp.watch(src_js+'/**/*.js',['minjs']);
    gulp.watch(src_html+'/*.html',['htmlmin']);
    gulp.watch(src_img+'/**/*.{png,jpg,gif,ico}',['imagemin']);
});

這裏也寫了一個緩存清除的task，可跟隨默認打包一起執行使用。

gulp.task('clean', function (done) {//清除緩存
    return cache.clearAll(done);
});

gulpfiles.js文件 即爲上述代碼段連接而成，有需要可私信郵箱發送給你

gulp常用命令

執行壓縮： gulp default / gulp
編譯頁面： gulp htmlmin
編譯腳本： gulp minjs
編譯樣式： gulp mincss
壓縮圖片： gulp imagemin
//語法檢測： gulp eslint