grunt插件：grunt-plug-insert

劉明發布于2019-08-23 14:56 / 2483人閱讀

摘要：也就是我們會把目標文件中的這段字符串替換成一系列碎片文件，并最終保存在打包目標文件。

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

GPU云服務器云服務器 grunt插件開發 Grunt grunt serve grunt 服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101389.html

Grunt快速入門

摘要：介紹中文主頁是一套前端自動化構建工具，一個基于的命令行工具它是一個任務運行器配合其豐富強大的插件常用功能合并文件壓縮文件語法檢查預編譯處理其它安裝查看版本創建一個簡單的應用構建生成的文件所在的文件夾 Grunt介紹中文主頁 : http://www.gruntjs.net/ 是一套前端自動化構建工具，一個基于nodeJs的命令行工具它是一個任務運行器, 配合其豐富強大的插件 ...

Coding01 2019-08-20 18:13 評論0 收藏0
Grunt快速入門

摘要：介紹中文主頁是一套前端自動化構建工具，一個基于的命令行工具它是一個任務運行器配合其豐富強大的插件常用功能合并文件壓縮文件語法檢查預編譯處理其它安裝查看版本創建一個簡單的應用構建生成的文件所在的文件夾 Grunt介紹中文主頁 : http://www.gruntjs.net/ 是一套前端自動化構建工具，一個基于nodeJs的命令行工具它是一個任務運行器, 配合其豐富強大的插件 ...

lookSomeone 2019-08-29 12:58 評論0 收藏0
Grunt快速入門

摘要：介紹中文主頁是一套前端自動化構建工具，一個基于的命令行工具它是一個任務運行器配合其豐富強大的插件常用功能合并文件壓縮文件語法檢查預編譯處理其它安裝查看版本創建一個簡單的應用構建生成的文件所在的文件夾 Grunt介紹中文主頁 : http://www.gruntjs.net/ 是一套前端自動化構建工具，一個基于nodeJs的命令行工具它是一個任務運行器, 配合其豐富強大的插件 ...

atinosun 2019-08-01 17:12 評論0 收藏0
用grunt搭建自動化的web前端開發環境-完整教程

摘要：世界的構建工具為何要用構建工具一句話自動化。由于擁有數量龐大的插件可供選擇，因此，你可以利用自動完成任何事，并且花費最少的代價。要想使用，首先必須將安裝到全局環境中，使用的進行安裝。你沒有理由不學、不用！ jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt， grunt是一套前端自動化工具，一個基于nodeJs的命令行工具，一般用于：...

wanghui 2019-08-20 17:02 評論0 收藏0