grunt插件：grunt-plug-insert

作者：心葉
時間：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: {
      // 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中。