grunt插件：grunt-plug-insert

刘明发布于2019-08-23 14:56 / 2494人阅读

摘要：也就是我们会把目标文件中的这段字符串替换成一系列碎片文件，并最终保存在打包目标文件。

作者：心叶
时间：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中。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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