gulp 一般用於處理自動化任務，默認情況無法處理模塊化，也不會用於大型項目，但它可以使用各種插件來編譯 html、css、js 等資源。

不清楚如何使用 gulp 開啓任務的朋友可以參考 gulp使用指南

處理html

處理 html 資源使用到 gulp-htmlmin 這個插件，和 webpack中使用到的html-webpack-plugin 比較相似。

// gulpfile.js
const { src, dest } = require('gulp');
const htmlMin = require('gulp-htmlmin');

const htmlTask = () => {
  // base 表示基本目錄，編譯後會保持原文件結構
  return src('./src/*.html', { base: './src' }) 
    .pipe(
      htmlMin({
        collapseWhitespace: true,
      })
    )
    .pipe(dest('./dist'));
};

module.exports = {
  htmlTask,
};

執行 npx gulp htmlTask ，此時將 html 資源編譯輸出到 dist 文件夾下

處理less

要處理佈局就免不了樣式文件，處理 less 文件需要用到 gulp-less，如果對於 css 兼容性還要做處理的話，就需要用到 postcss 和它所需要的插件 postcss-preset-env，webpack處理css資源 文章中有詳細介紹

const { src, dest } = require('gulp');
const less = require('gulp-less');
const postcss = require('gulp-postcss');
const postCssPresetEnv = require('postcss-preset-env');

const lessTask = () => {
  return src('./src/css/*.less', { base: './src' })
    .pipe(less())
    .pipe(postcss([postcssPresetEnv()]))
    .pipe(dest('./dist'));
};

module.exports = {
  lessTask,
};

執行 npx gulp lessTask，less 文件會被處理成 css 文件

處理js

gulp-babel 用於轉化代碼等兼容處理，用法和 webpack中babel-loader 相似，gulp-terser 用於壓縮文件，用法和 terser-webpack-plugin 相似。

const { src, dest } = require('gulp');
const terser = require('gulp-terser');
const babel = require('gulp-babel');

const jsTask = () => {
  return src('./src/js/*.js', { base: './src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(terser({ mangle: { toplevel: true } }))
    .pipe(dest('./dist'));
};

module.exports = {
   htmlTask,
   lessTask,
   jsTask,
};

執行 npx gulp jsTask，編譯後文件能看到es6轉換es5和壓縮的代碼。

html資源注入

編譯後的 css 和 js 資源不會被默認添加到 html 頁面中，我們需要藉助插件 `
gulp-inject` 幫助編譯，並在模板 html 文件中添加魔法註釋，告知資源引入的地址。

const { src, dest } = require('gulp');
const inject = require('gulp-inject');

const injectHtml = () => {
  return src('./dist/*.html')
    .pipe(
       // 使用相對路徑將js和css資源引入
      inject(src(['./dist/js/*.js', './dist/css/*.css']), {
        relative: true,
      })
    )
    .pipe(dest('./dist'));
};

module.exports = {
  injectHtml,
};

在 html 文件中添加了魔法註釋，所以需要重新編譯 html 文件，再將 js 和 css 引入到 html 頁面中。依次執行 npx gulp htmlTask 和 npx gulp injectHtml，將編譯後的 html 文件格式化，可以看到已經在指定位置引入了 js 和 css 文件。

開啓自動服務

在開發的時候，通常希望開啓一個服務，當文件內容發生變化時，編譯後的代碼也同步發生變化，能夠更好的查看代碼執行的效果，這時候要用到 browser-sync 來操作。

const { src, dest, watch } = require('gulp');
const browserSync = require('browser-sync');

const bs = browserSync.create();
const serve = () => {
  // 當文件變化時，重新編譯文件，並注入到 html 文件中  
  watch('./src/*.html', series(htmlTask, injectHtml));
  watch('./src/js/*.js', series(jsTask, injectHtml));
  watch('./src/css/*.less', series(lessTask, injectHtml));
  
  // 自動服務的配置
  bs.init({
    port: 8808,
    open: true,
    files: './dist',
    server: {
      baseDir: './dist',
    },
  });
};

module.exports = {
  serve,
};

此時服務不會中斷，代碼更新就會重新編譯文件

組合任務

以上每個任務都是獨立的，每種類型文件的編譯都需要執行一次命令，開啓自動服務也必須先將 html、css、js 執行編譯到 dist 文件夾下才行，執行命令的次數會太繁瑣，可以將他們進行一個整合。

const { series, parallel } = require('gulp');
// series 表示串行，parallel 表示並行
const buildTask = series(parallel(htmlTask, lessTask, jsTask), injectHtml);
const serveTask = series(buildTask, serve);

module.exports = {
  buildTask,
  serveTask,
};

這樣只需要導出兩個任務，就可以覆蓋 編譯 和 開啓自動服務 兩個場景，還可以在 package.json 中配置 script 命令，就可以直接通過 npm 來執行任務，執行 npx gulp serveTask

總結

• html 文件通過插件 gulp-htmlmin 對代碼壓縮
• less 文件使用插件 gulp-less 解析， css 文件兼容性通過 gulp-postcss postcss-preset-env 處理
• js 文件使用 gulp-babel 進行代碼轉換，gulp-terser 壓縮代碼
• gulp-inject 配合魔法註釋將資源添加到 html 頁面中
• browser-sync 和 watch 為編譯開啓自動服務
• series parallel 串行和並行組合任務

以上就是 gulp 處理html、css、js資源的介紹， 更多有關 前端、工程化 的內容可以參考我其它的博文，持續更新中~