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: {
      banner: "",
      link: "\n",
      // 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中。