摘要：更改文件名之后，在文件中寫入的代碼?？刂圃黾忧熬Y的版本根據(jù)頁面中的標(biāo)簽及標(biāo)簽中的選擇器屬性，來精簡樣式。

項(xiàng)目地址

既然重新學(xué)習(xí)了 Gulp，那索性就再把以前用 Gulp 寫的東西拿出來，重新寫一遍。這次寫的時(shí)候要把要點(diǎn)記錄下來，不然以后忘了就沒法回憶了。

因?yàn)?Gulp 現(xiàn)在使用沒有以前那么多了，所以就不寫復(fù)雜的應(yīng)用了。這次寫一個(gè)簡單的 Demo 處理工具，只是為了把 PSD 轉(zhuǎn)成 HTML 的時(shí)候，減少一些重復(fù)性操作。

由于寫 Demo 的時(shí)候，只去關(guān)心頁面結(jié)構(gòu)和對(duì)應(yīng)的樣式，因此，不去考慮 js 相關(guān)的內(nèi)容。主要實(shí)現(xiàn)以下幾個(gè)功能點(diǎn) :

在 Gulp 的配置文件中使用 ES6 語法書寫代碼

將 flexible.js 和 reset.css 注入到每個(gè) html 文件的頭部

使用 SASS 寫樣式

自動(dòng)增加瀏覽器前綴，處理樣式兼容

自動(dòng)將 px 轉(zhuǎn)成 rem

壓縮樣式文件

壓縮圖片

去除 .html 文件中的注釋

瀏覽器實(shí)時(shí)刷新

去除頁面中的無用樣式

每次打包前，刪除已存在的目標(biāo)目錄

為了這幾個(gè)小目標(biāo)，下面開始逐步實(shí)現(xiàn)這些功能點(diǎn)。

使用的 Gulp 版本是 3.9.1。

創(chuàng)建一個(gè) package.json :

$ npm init -y

安裝 Gulp 作為項(xiàng)目的開發(fā)依賴 :

$ yarn add gulp -D

在項(xiàng)目開始之前，首先需要搭建目錄結(jié)構(gòu)。

.
├── gulpfile.babel.js          gulp 的配置文件
├── package.json
├── src                        Demo 源代碼存放的目錄
│   ├── common                 公共文件存放的目錄，將來注入到html文件中
│   │   ├── flexible.min.js
│   │   └── reset.css
│   ├── css
│   │   ├── _none.scss
│   │   └── useful.scss
│   ├── html
│   │   └── index.html
│   └── imgs
│       └── test.png
├── task                       任務(wù)文件夾
│   ├── task-clean.js          刪除 dist 目錄
│   ├── task-css.js            處理 css 的任務(wù)
│   ├── task-default.js        默認(rèn)任務(wù)
│   ├── task-html.js           處理 html 的任務(wù)
│   └── task-img.js            處理圖片的任務(wù)
└── yarn.lock

如果需要在 gulpfile.js 中使用 ES6 相關(guān)語法，就需要把 gulpfile.js 改成 gulpfile.babel.js。更改文件名之后，在文件中寫入 ES6 的代碼。

import gulp from "gulp";

gulp.task("default", () => console.log(123));

運(yùn)行命令之后，發(fā)現(xiàn)，報(bào)錯(cuò)了。

$ ./node_modules/.bin/gulp

[14:15:34] Failed to load external module @babel/register
[14:15:34] Failed to load external module babel-register
[14:15:34] Failed to load external module babel-core/register
[14:15:34] Failed to load external module babel/register

出現(xiàn)這個(gè)錯(cuò)誤是因?yàn)槭褂?ES6 語法后，需要經(jīng)過 babel 進(jìn)行轉(zhuǎn)碼后才能正常執(zhí)行任務(wù)，因此，要配置 babel 相關(guān)的內(nèi)容。

首先是需要安裝 babel 的依賴 :

$ yarn add babel-cli babel-preset-env -D

babel 在運(yùn)行的時(shí)候，需要讀取其配置文件中的信息，將對(duì)應(yīng)的代碼進(jìn)行轉(zhuǎn)譯。所以，.babelrc 文件必不可少。

{
  "presets": ["env"]
}

再次運(yùn)行 Gulp 命令的時(shí)候，會(huì)發(fā)現(xiàn)還是有錯(cuò)誤。

$ ./node_modules/.bin/gulp

[14:20:33] Failed to load external module @babel/register

這個(gè)錯(cuò)誤就很奇怪了，命名已經(jīng)安裝了 babel 的依賴了，為什么還會(huì)有這個(gè)錯(cuò)誤呢？這是因?yàn)樵诮馕?.babel.js 文件中，加載 babel 組件不正確造成的。babel-core/register 已經(jīng)過時(shí)了，現(xiàn)在使用 babel-register 來代替了。如果要修復(fù)這個(gè)問題，就需要修改 node_modules 中 interpret 模塊中的 index.js。

將 module: "@babel/register" 改成 module: "babel-register"。具體修改的位置就是下面代碼中的第三行 :

  ".babel.js": [
    {
      module: "@babel/register",

在 gulpfile.babel.js 中，我們將 task 目錄下的文件加載到該配置文件中，這個(gè)時(shí)候需要用到的模塊是 require-dir。

在項(xiàng)目中安裝 require-dir 模塊 :

$ yarn add require-dir -D

模塊完成之后，改造 gulpfile.babel.js。

import requireDir from "require-dir";

requireDir("./task");

一般情況下，把最終生成好的文件放入 dist 目錄中，那么目標(biāo)目錄就是 dist。

刪除文件夾或文件，一般使用 del 模塊，這個(gè)模塊異步方法返回的是一個(gè) Promise 對(duì)象。

// ./task/task-clean.js

gulp.task("clean", () => {
  return del("./dist").then(paths => {
    // 如果 paths 長度為 0，說明文件夾不存在
    if (paths.length) {
      console.log(paths + " 刪除成功")
    } else {
      console.log("文件夾不存在");
    }
  });
});

通過上面的代碼創(chuàng)建的 clean 任務(wù)，在執(zhí)行任務(wù) clean 的時(shí)候，就可以把 dist 目錄進(jìn)行刪除了。

圖片的處理相對(duì)就比較簡單了，只需要壓縮圖片并拷貝到對(duì)應(yīng)的目錄中就可以了。壓縮圖片使用的模塊是 gulp-imagemin。

gulp.task("imgs", () => {
  return gulp.src([
      "./src/imgs/*.jpg",
      "./src/imgs/*.png",
      "./src/imgs/*.gif",
      "./src/imgs/*.svg"
    ], {
      base: "src"
    })
    .pipe(imagemin())
    .pipe(gulp.dest("./dist"));
});

通過上面的代碼創(chuàng)建的 imgs 任務(wù)，在執(zhí)行任務(wù) imgs 的時(shí)候，就可以把 ./src/imgs 中的內(nèi)容壓縮并拷貝到 ./dist/imgs 中了。

處理 html 文件的時(shí)候，就稍微復(fù)雜點(diǎn)了。因?yàn)闋可娴綁嚎s和替換。如果要替換 html 中的內(nèi)容，使用的模塊是 gulp-replace；如果需要壓縮 html 文件，那么就需要使用 gulp-htmlmin。

在這里，需要替換 html 中引入 flexible.js 的地方為對(duì)應(yīng)的內(nèi)容，就需要寫成下面的形式 :

    .pipe(replace("", () => {
      // 獲取 flexible.min.js 文件中的內(nèi)容
      let flexibleData = fs.readFileSync(path.resolve(__dirname, "../src/common/flexible.min.js"));
      // 返回一個(gè)流，寫入共下一個(gè)內(nèi)容使用
      return ``;
    }))

同時(shí)初始化 css 的樣式也要注入到 html 文件中，這個(gè)時(shí)候就要把 html 中對(duì)應(yīng)的路徑替換成對(duì)應(yīng)的文件內(nèi)容 :

    .pipe(replace("", () => {
      // 獲取 reset.css 文件中的內(nèi)容
      let flexibleData = fs.readFileSync(path.resolve(__dirname, "../src/common/reset.css"));
      // 返回一個(gè)流，寫入共下一個(gè)內(nèi)容使用
      return ``;
    }))

對(duì)應(yīng)的文件替換完成之后，就需要?jiǎng)h除 html 文件中的所有注釋信息 :

    .pipe(htmlmin({
      collapseWhitespace: false, // 刪除文檔中的空格和換行，默認(rèn)是false，不刪除
      removeComments: true // 清除注釋內(nèi)容
    }))

最后就是將對(duì)應(yīng)的 html 文件拷貝到對(duì)應(yīng)的文件夾中。完整的任務(wù)代碼如下 :

gulp.task("html", () => {
  return gulp.src("./src/html/*.html", {
      base: "src"
    })
    .pipe(replace("", () => {
      // 獲取 flexible.min.js 文件中的內(nèi)容
      let flexibleData = fs.readFileSync(path.resolve(__dirname, "../src/common/flexible.min.js"));
      // 返回一個(gè)流，寫入共下一個(gè)內(nèi)容使用
      return ``;
    }))
    .pipe(replace("", () => {
      // 獲取 reset.css 文件中的內(nèi)容
      let flexibleData = fs.readFileSync(path.resolve(__dirname, "../src/common/reset.css"));
      // 返回一個(gè)流，寫入共下一個(gè)內(nèi)容使用
      return ``;
    }))
    .pipe(htmlmin({
      collapseWhitespace: false, // 刪除文檔中的空格和換行，默認(rèn)是false，不刪除
      removeComments: true // 清除注釋內(nèi)容
    }))
    .pipe(gulp.dest("./dist"));
});

樣式文件的處理相對(duì)就比較復(fù)雜一點(diǎn)了。需要實(shí)現(xiàn)以下幾個(gè)功能點(diǎn) :

將 sass 文件轉(zhuǎn)成 css

將 px 轉(zhuǎn)成 rem

自動(dòng)增加瀏覽器前綴

排序 css 屬性

壓縮 css 代碼

首先定義一個(gè)規(guī)則，以下劃線開頭的 .scss 文件不進(jìn)行轉(zhuǎn)換。將以下劃線開頭的 .scss 文件作為提供公共方法的文件。

  gulp.src(["./src/css/*.scss", "!./src/css/_*.scss"], {
      base: "src"
    })

對(duì) .scss 文件進(jìn)行轉(zhuǎn)譯，生成的 css 文件不刪除注釋，因?yàn)樽⑨屝畔⒃?px 轉(zhuǎn)成 rem 的時(shí)候會(huì)用到。在轉(zhuǎn)換的過程中，使用的模塊是 gulp-sass。

    .pipe(sass({
      outputStyle: "compact" // sass文件的輸出方式，保留注釋內(nèi)容
    }))

將 px 轉(zhuǎn)成對(duì)應(yīng)的 rem，需要依賴兩個(gè)模塊 gulp-postcss 和 postcss-px2rem。postcss-px2rem 是核心的轉(zhuǎn)換模塊。

    .pipe(postcss([px2rem({
      remUnitpx2rem: 75 // // 將px轉(zhuǎn)成rem，基準(zhǔn)值是75，也就是用 75px/75=1rem
    })]))

接下來就可以做 css 的兼容處理，為屬性增加瀏覽器前綴了。自動(dòng)增加瀏覽器前綴使用到的模塊是 gulp-autoprefixer。

    .pipe(autoprefixer({
      browsers: ["last 2 versions", "Android >= 4.0"] // 控制增加前綴的版本
    }))

根據(jù)頁面中的標(biāo)簽及標(biāo)簽中的選擇器屬性，來精簡樣式。主要就是使用 postcss 的插件 postcss-uncss 來精簡樣式，但是 postcss-uncss 模塊又依賴 uncss 模塊，因此，這兩個(gè)模塊都需要安裝。安裝完成之后，就可以設(shè)置精簡樣式的代碼了。

    .pipe(postcss([uncss({ // 去除多余的樣式
      html: ["./src/**/*.html"]
    })]))

下面做的就是排序和壓縮 css 了。排序 css 屬性用到的模塊是 gulp-csscomb，壓縮 css 用到的模塊是 gulp-cssnano。

    .pipe(csscomb()) // 排序CSS屬性
    .pipe(cssnano()) // 壓縮CSS代碼
    .pipe(gulp.dest("./dist"));

在默認(rèn)任務(wù)中，首先序列化任務(wù)的執(zhí)行順序。在每次執(zhí)行任務(wù)之前，先把 dist 目錄刪除，然后執(zhí)行 html css imgs 任務(wù)。這個(gè)時(shí)候就要使用 gulp-sequence 模塊來定義任務(wù)執(zhí)行的順序。為了實(shí)現(xiàn)任務(wù)的順序執(zhí)行，就要在每個(gè)任務(wù)中返回一個(gè)流，或者調(diào)用一個(gè)回調(diào)函數(shù)，否則執(zhí)行順序會(huì)不正常。

gulp.task("build", gulpSequence("clean", ["html", "css", "imgs"]));

如果要實(shí)現(xiàn)代碼修改，瀏覽器自動(dòng)刷新，就要使用 browser-sync 模塊了。

gulp.task("default", ["build"], () => {
  // 啟動(dòng)瀏覽器
  browserSync({
    server: {
      baseDir: "./dist"
    },
  }, (err, bs) => {
    console.log(bs.options.getIn(["urls", "local"]));
  });
  // 監(jiān)視文件變化，執(zhí)行對(duì)應(yīng)的任務(wù)
  gulp.watch("src/html/*.*", ["html"]);
  gulp.watch("src/css/*.*", ["css"]);
  gulp.watch("src/imgs/*.*", ["imgs"]);
});

在執(zhí)行默認(rèn)任務(wù)后，修改代碼，并沒有發(fā)現(xiàn)瀏覽器跟著刷新。

$ ./node_modules/.bin/gulp

這是因?yàn)槊總€(gè)任務(wù)中沒有通知瀏覽器刷新，因此，要在每個(gè)任務(wù)中加入流發(fā)生變化，通知瀏覽器刷新。

    .pipe(browserSync.reload({ // 管道刷新
      stream: true
    }))
    .pipe(gulp.dest("./dist"));

在 src/html 寫 html 文件

在頁面的頭部加入 和

在 src/css 中寫 .scss 樣式

將圖片放入 imgs 文件夾中

執(zhí)行命令 : ./node_modules/.bin/gulp

當(dāng)然，命令也可以簡化，就是在 package.json 中配置。

  "scripts": {
    "gulp": "gulp"
  }

這個(gè)時(shí)候在命令行執(zhí)行命令就變成下面的形式了 :

$ npm run gulp