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中。

阅读 499

推荐阅读