詳解 Gulp4 和 Gulp3 的區別

const { src, dest, watch, task, series, parallel } = require('gulp');//gulp的檔案流API
const rename                                       = require('gulp-rename');//檔案重新命名的外掛
const uglify                                       = require('gulp-uglify');//壓縮JS檔案的外掛
const cleanCss                                     = require('gulp-clean-css');//壓縮CSS檔案的外掛
const connect                                      = require('gulp-connect');//熱更新的外掛
const webserver                                    = require('gulp-webserver');//熱更新的外掛
const clean                                        = require('gulp-clean');//刪除檔案的外掛
const fileInclude                                  = require('gulp-file-include'); //公共程式碼複用的外掛
const htmlmin                                      = require('gulp-htmlmin');//壓縮HTML檔案的外掛

//設定原始檔和輸出檔案的目錄設定
const path = {
    'html'           : './src/',
    'css'            : './src/css/',
    'js'             : './src/js/',
    'lib'            : './src/lib/',
    'component'      : './src/component/',
    'html_dist'      : './dist/',
    'css_dist'       : './dist/css/',
    'js_dist'        : './dist/js/',
    'lib_dist'       : './dist/lib/',
    'component_dist' : './dist/component/'
};


//設定HTML壓縮任務
task('html', function () {
    var options = {
        removeComments                : true, //清除HTML中的註釋
        collapseWhitespace            : true, //去除HTML中的空格
        collapseBooleanAttributes     : true, //省略布林屬性的值<input type="checkbox" checked="true"> 壓縮後為 <input type="checkbox" checked>
        removeEmptyAttributes         : true, //刪除所有空格作屬性值<input type="checkbox" id=""> 壓縮後為 <input type="checkbox">
        removeScriptTypeAttributes    : true, //刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes : true, //刪除<style>和<link>的type="text/css"
        minifyJS                      : true, //壓縮頁面JS
        minifyCSS                     : true //壓縮頁面CSS
    };
    return src(path.html + '*.html')
        .pipe(htmlmin(options))
        .pipe(dest(path.html_dist));
})

//設定CSS壓縮任務
task('css', function () {
    return src(path.css + '*.css')
        .pipe(cleanCss())
        .pipe(rename({
            'suffix' : '.min'//新增字尾名
        }))
        .pipe(dest(path.css_dist));
});

//設定JS壓縮任務
task('js', function () {
    return src(path.js + '*.js')
        .pipe(uglify())
        .pipe(rename({
            'suffix' : '.min'//新增字尾名
        }))
        .pipe(dest(path.js_dist));
});

//設定第三方依賴任務 => [無需合併和壓縮等操作，直接輸出到指定目錄]
task('lib', function () {
    return src(path.lib + '*.js')
        .pipe(dest(path.lib_dist));
})

//設定公共程式碼複用的任務 => [相當於元件的封裝]
task('fileInclude', function () {
    return src(path.component + '*.html')
        .pipe(fileInclude({
            prefix   : '@@',
            basepath : '@file'
        }))
        .pipe(dest(path.component_dist));
});

//設定刪除上一次建立的dist資料夾的任務 => [在打包之前，一般需要先清空原來的檔案，保證當前檔案是最新的]
task('clean', function () {
    return src('dist', {
        allowEmpty : true
    }).pipe(clean());//清除dist目錄
});


// 建立熱載入任務
task('reload', function () {
    return src('dist')
        .pipe(connect.reload());
})


//設定實時監控任務[熱載入]
task('watch', function () {
    watch(path.html, series('html', 'reload'));//監控HTML任務
    watch(path.css + '*.css', series('css', 'reload'));//監控CSS任務
    watch(path.js + '*.js', series('js', 'reload'));//監控JS任務
    watch(path.lib + '*.js', series('lib', 'reload'));//監控第三方JS任務
    watch(path.component + '*.html', series('fileInclude', 'reload'));//監控複用程式碼檔案的任務 => [相當於封裝元件]
});


//設定後臺服務任務【 -----   ⭐ ️方式一 ️ ----- 】
// task('server', function (done) {
//     connect.server({
//         root       : 'dist',//設定後臺服務存取的預設目錄
//         port       : 8888,//設定後臺預設的存取埠
//         livereload : true//開啟熱載入
//     });
//     done();//執行該服務
// });


//設定後臺服務任務【 -----   ⭐ ️方式二 ️ ----- 】
task('server', function () {
    return src('dist')
        .pipe(webserver({
            host             : 'localhost',//預設存取的地址【域名或者ip】
            port             : 8023,//預設存取的埠號
            path             : '/',//存取當前存取目錄的根目錄 例如：表示為 dist/
            livereload       : true,//開啟熱載入
            directoryListing : false,//true 設定為false時，存取預設的index.html
            fallback         : 'index.html',//預設存取的入口檔案 相對於設定的path路徑來說
            open             : true,//是否自動開啟瀏覽器
            /**
             *@desc 代理設定 如下:
             *      proxies: [
             *          {
             *              source: '/api', target: 'http://backend.api/api'
             *
             *          }
             *      ]
             */
            proxies          : []//代理設定
        }));
})


//執行所有任務 => [gulp3]
// task('default', series(
//     'clean',//刪除上一次的資料夾，來保持當前為最新的資料
//     parallel([ 'html', 'css', 'js', 'lib', 'fileInclude' ]),//並行執行所有任務
//     'server',//啟動服務任務
//     'watch'//啟動監視任務
// ));

//執行所有任務 => [gulp4]
module.exports.default = series(
    'clean',
    parallel([ 'html', 'css', 'js', 'lib', 'fileInclude' ]),
    'server',
    'watch'
);

/**
 * @desc 總結 gulp4 的series() 和 parallel() 兩個新方法
 *  說明如下：
 *          1. series(任務1,任務2,...) => 使任務按順序執行，第一個任務完成，才會執行下一個任務，簡單來說相當於一個佇列。
 *          2. parallel(任務1,任務2,...) => 以最大並行來執行的任務,任務同時執行。
 *
 * @desc 總結 gulp-connect() 和 gulp-webserver() 方法
 *   說明如下：
 *          1. gulp-connect()  => 內部connect.server()返回的是一個物件，
 *             所以不能直接返回，只能在處理完成之後，直接返回當前傳入的引數，該引數為該函數本身。
 *          2. gulp-webserver() => 該外掛的特點是可以設定代理，當前處理的管道函數最後直接返回就好了，但是反應相對比較慢
 *
 * @desc 總結 gulp3【本章任務的處理方式哦】 和 gulp4 處理任務的方式：
 *          1. gulp3 處理任務方式是：gulp.task(任務名，處理常式)
 *          2. gulp4 處理任務方式是：module.exports.任務名 = 任務名（可以是一個匿名函數或者是函數名）
 *              寫法如下：
 *              const test = function(done) {
 *                          done();
 *                    };
 *              或者
 *                   function test(done) {
 *                      done();
 *                   }
 *              最後執行方法：module.exports.test = test
 *              後臺執行命令為：gulp test
 */