grunt外掛：grunt-plug-insert

心葉發表於2019-01-24

作者：心葉
時間：2019年01月24日 20:08

需求說明

在我們開發程式碼的時候，不會把全部程式碼寫在一個檔案，只有最後打包的時候會合並在一起，而有時候，我們除了要合併程式碼，還可能需要更靈活的合併方案。

這個外掛就是在一個程式碼檔案中的指定位置插入一些了碎片檔案。

如何使用

首先，需要安裝node包：

npm install grunt-plug-insert --save-dev

一旦安裝好了，你就可以在Gruntfile.js中加入下面程式碼，使用這個外掛：

grunt.loadNpmTasks(`grunt-plug-insert`);

以上和別的grunt外掛都一樣，我們主要說明一下如何配置任務。

grunt.initConfig({
  insert: {
    options: {
      banner: "",
      link: "
",
      // Place of segmentation
      separator: `@CODE inserts compiled test here`,
      // Insert the target file
      target: `test/fixtures/test`
    },
    files: {
      // Target and fragmentation files
      `tmp/test`: [`test/fixtures/insert1`, `test/fixtures/insert2`]
    },
  },
});

上面是配置的一個例子，和別的外掛一樣，也可以配置任務名稱等，這裡不再贅述了，我們來說一下幾個配置選項的意思。

  • options.separator：配置插槽。也就是我們會把『目標檔案』中的這段字串替換成一系列『碎片檔案』，並最終儲存在『打包目標檔案』。
  • options.target：『目標檔案』
  • files：我們可以在這裡配置多個鍵值對，鍵是一個字串，也就是『打包目標檔案』，值是一個陣列，也就是『碎片檔案』。

從上面的配置可以看出來，我們可以一次配置多個合併任務，上面只配置了一個。

對例子說明

為了幫助更好的理解，我們對上面的例子進行說明：

把檔案test/fixtures/test中的字串”@CODE inserts compiled test here”替換成檔案test/fixtures/insert1和檔案test/fixtures/insert2，並把合併後的結果儲存在檔案
tmp/test中。

相關文章