通过 grunt 将不同的 javascript 依赖项插入索引？

Question

在我的 gruntfile 中，我定义了一个 javascript 文件数组，我需要插入到索引中，它们包括依赖项（jquery 等）以及构成我的 angular 应用程序（控制器、服务等）。

我在一项任务中使用了这个数组，该任务组合了它们并缩小了它们，这样我就有了一个最终的 js 文件，这对生产很有用，但对于开发工作我更喜欢单独插入文件以便于调试.

是否有允许我执行以下操作的 grunt 插件：

将数组中的每个脚本分别插入到索引中
将缩小的脚本插入索引
在两者之间轻松切换，这样我就不需要手动删除每个脚本然后添加缩小的脚本，这样我就可以在为开发构建的任务中插入完整的脚本并插入prod 任务构建中的串联脚本。

我找到了一些插件（fileblocks 和 injector），它们似乎可以做我想做的事，但我无法让它们工作，所以如果你也可以提供一个如何配置插件的例子构建开发和构建生产任务。

Answer 1

我终于找到了一个可以满足我需求的 grunt 插件 grunt-file-blocks, while initially it didn't seem to work for me I had misread the documentation and the author was so kind as to help me。

基本上我所做的就是在 index.html 中标记我想插入 js 依赖关系的地方

<!-- fileblock:js blockName1 -->
<!-- endfileblock -->

<!-- fileblock:js blockName2 -->
<!-- endfileblock -->

然后在我的 Gruntfile.js 中设置任务：

fileblocks: {
  dev: {
    files: [{
      src: 'index.html',
      options: {removeFiles: true},
      blocks: {
        'blockName1': { src: arrayOfDevDepenices },
        'blockName2': { src: arrayOfDevDepenices }
      }
    }]
  },

dist: {
    files: [{
      src: 'index.html',
      options: {removeFiles: true},
      blocks: {
        'blockName1': { src: arrayOfDistDepenices },
        'blockName2': { src: arrayOfDistDepenices }
      }
    }]
  }
}

现在，通过简单的 grunt fileblocks:dev，我可以在索引中为开发工作设置依赖关系，而使用 grunt fileblocks:dist，我可以为投入生产准备索引。

通过 grunt 将不同的 javascript 依赖项插入索引？

Insert differing javascript dependencies into index via grunt?

javascript

gruntjs