最近在開發幾個網站，為了優化一下前端代碼，就復習一下gulpjs，之前作業gulp用的版本比較老，但是今天看了新的版本，新的語法出了一下，但是為了時間，我決定使用之前gulp3的舊版本，后面發現自己環境的node的版本是最新的，所以不得讓我來了解一下gulp的新版本，里面用到的最多就是commonjs的模塊化，解釋如下：
gulp4的官網地址： https://www.gulpjs.com.cn/
gulp3的官網地址： https://v3.gulpjs.com.cn/
下面代碼了解新語法：
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 */
本文來自博客園，作者：Carver-聽風，轉載請注明原文鏈接：https://www.cnblogs.com/carver/p/17072881.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542560.html
標籤：其他