gulp - HackMD

![](https://gulpjs.com/img/gulp-white-text.svg) --- Gulp 是基於 Node.js 的任務自動化管理工具按照腳本一個任務一個任務的依序做完 --- 接下來直接用畫面帶實際操作目標是要 * 可以幫我執行 babel 把 ES6+ 編譯成 ES5 * 可以幫我執行 uglify 把 js 給壓縮並混淆 * 可以幫我改檔案名稱 .js -> .min.js * 可以幫我改 html 內 script 標籤的程式碼 --- 開個空白的新資料夾 --- 然後建立管理 npm 套件的 package.json ```bash= npm init -y ``` ![](https://i.imgur.com/9g2fAj5.png) --- 然後下載 gulp 要用來編譯用的東西 ```bash= npm i -D gulp gulp-rename gulp-html-replace gulp-uglify npm i -D gulp-babel @babel/core @babel/preset-env ``` --- 講解一下剛剛載的那些東西是什麼 gulp：執行自動化任務腳本的核心函式庫 gulp-rename：提供檔案重新命名函式 gulp-html-replace：replace html 的程式碼 gulp-uglify：壓縮混淆 js 的程式碼 --- gulp-babel：編譯 ES6+ 的函式庫 @babel/core：Babel compiler core @babel/preset-env：官方提供的編譯 ES6+ 懶人包 --- 在根目錄新建一個 src 目錄 ![](https://i.imgur.com/el6oVD5.png) --- 在根目錄設置 gulpfile.js ```javascript= const { src, dest, parallel } = require('gulp'); // * src (source 來源) // * dest (destination 目的地) // * parallel (平行處理) const rename = require('gulp-rename'); // 檔案重命名 const htmlreplace = require('gulp-html-replace'); // html 程式碼取代 const uglify = require('gulp-uglify'); // 壓縮混淆 JS const babel = require('gulp-babel'); // 編譯 ES6+ const jsBabelUglifyRename = () => src('./src/js/**/*.js') .pipe(babel({ presets: ['@babel/preset-env'], })) .pipe(uglify()) .pipe(rename((renamePath) => { Object.assign(renamePath, { basename: `${renamePath.basename}.min`, extname: '.js', }); })) .pipe(dest(`./dist/js/`, { sourcemaps: '.' })); const htmlReplace = () => src('./src/*.html') .pipe(htmlreplace({ js: { src: [ ['js/test.min.js'], ], tpl: '<script src="%s"></script>', }, })) .pipe(dest(`./dist/`)); exports.default = parallel(jsBabelUglifyRename, htmlReplace); ``` --- source code： https://github.com/littlehorseboy/gulp-test --- gulp 就是用這種非常彈性的方式自定義編譯的任務腳本只要指定好來源，目的，用什麼工具編譯等等就能用它來一鍵打包 --- 接下來要來介紹另一個打包工具 webpack 我認為毫無疑問的，它就是前端界最猛的打包工具 https://github.com/webpack/webpack 不過在看 webpack 之前一定要先了解 ES Module --- ###### tags: `前端` 下一章： [ES Module](https://hackmd.io/p/BJdInyyaN#/)