gulp使用插件

gulp使用插件

Gulp 插件實(shí)質(zhì)上是 Node 轉(zhuǎn)換流（Transform Streams），它封裝了通過管道（pipeline）轉(zhuǎn)換文件的常見功能，通常是使用 .pipe() 方法并放在 src() 和 dest() 之間。他們可以更改經(jīng)過流（stream）的每個(gè)文件的文件名、元數(shù)據(jù)或文件內(nèi)容。

托管在 npm 上的插件 - 標(biāo)記有 "gulpplugin" 和 "gulpfriendly" 關(guān)鍵詞 - 可以在插件搜索頁面上瀏覽和搜索。

每個(gè)插件應(yīng)當(dāng)只完成必要的工作，因此你可以把它們像構(gòu)建塊一樣連接在一起。獲得想要的結(jié)果可能需要把一組插件組合在一起使用。

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

exports.default = function() {
  return src('src/*.js')
    // gulp-uglify 插件并不改變文件名
    .pipe(uglify())
    // 因此使用 gulp-rename 插件修改文件的擴(kuò)展名
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
} 

gulp是否需要插件？

并非 gulp 中的一切都需要用插件來完成。雖然它們是一種快速上手的方法，但許多操作都應(yīng)當(dāng)通過使用獨(dú)立的功能模塊或庫來實(shí)現(xiàn)。

const { rollup } = require('rollup');

// Rollup 提供了基于 promise 的 API，在 `async` 任務(wù)（task）中工作的很好
exports.default = async function() {
  const bundle = await rollup.rollup({
    input: 'src/index.js'
  });

  return bundle.write({
    file: 'output/bundle.js',
    format: 'iife'
  });
}

插件應(yīng)當(dāng)總是用來轉(zhuǎn)換文件的。其他操作都應(yīng)該使用（非插件的） Node 模塊或庫來實(shí)現(xiàn)。

const del = require('delete');

exports.default = function(cb) {
  // 直接使用 `delete` 模塊，避免使用 gulp-rimraf 插件
  del(['output/*.js'], cb);
} 

gulp條件插件

因?yàn)椴寮牟僮鞑粦?yīng)該針對(duì)特定文件類型，因此你可能需要使用像 gulp-if 之類的插件來完成轉(zhuǎn)換某些文件的操作。

const { src, dest } = require('gulp');
const gulpif = require('gulp-if');
const uglify = require('gulp-uglify');

function isJavaScript(file) {
  // 判斷文件的擴(kuò)展名是否是 '.js'
  return file.extname === '.js';
}

exports.default = function() {
  // 在同一個(gè)管道（pipeline）上處理 JavaScript 和 CSS 文件
  return src(['src/*.js', 'src/*.css'])
    // 只對(duì) JavaScript 文件應(yīng)用 gulp-uglify 插件
    .pipe(gulpif(isJavaScript, uglify()))
    .pipe(dest('output/'));
} 

gulp內(nèi)聯(lián)插件（Inline plugins）

內(nèi)聯(lián)插件是一次性的轉(zhuǎn)換流（Transform Streams），你可以通過在 gulpfile 文件直接書寫需要的功能。

在兩種情況下，創(chuàng)建內(nèi)聯(lián)插件很有用：

• 避免自己創(chuàng)建并維護(hù)插件。
• 避免 fork 一個(gè)已經(jīng)存在的插件并添加自己所需的功能。

const { src, dest } = require('gulp');
const uglify = require('uglify-js');
const through2 = require('through2');

exports.default = function() {
  return src('src/*.js')
    // 創(chuàng)建一個(gè)內(nèi)聯(lián)插件，從而避免使用 gulp-uglify 插件
    .pipe(through2.obj(function(file, _, cb) {
      if (file.isBuffer()) {
        const code = uglify.minify(file.contents.toString())
        file.contents = Buffer.from(code)
      }
      cb(null, file);
    }))
    .pipe(dest('output/'));
}