让Grunt在开发和生产中包含不同的Javascript文件 [英] Have Grunt include different Javascript files in development and production

问题描述

我尝试了 Grunt ，并且有关于在开发阶段和后期阶段中包含JavaScript文件的问题。澄清：minify，concatenation等不是问题在这里 - 只是输出/替换。

在开发阶段，我想包括JavaScript库和文件个人 - 对于调试，也许只是因为我所有的时间都这样做了，不知怎的，我不喜欢它们在开发中连接在一起。因此，在开发时，我想在HTML文件中输出以下内容：

 < script src =js / lib-1。 JS>< /脚本> 
< script src =js / lib-2.js>< / script> 
< script src =js / lib-3.js>< / script> 
 ... 
  

然后对于制作或分期我想要有grunt输出：

 < script src =js / all-files-in-one.js>< / script> 
  

如何实现这个最简单的方法？

https://github.com/yeoman/grunt-usemin ）。 下面是一个简单的例子。

基本上，如果我想将一些JavaScript文件连接成单个文件（或者我想要连接成单个文件集的JavaScript文件集），那么我可以将引用这些文件的脚本标记放在建立块。

 <！ -  build：js assets / js / foobar.js  - > 
< script src =./ assets / js / foo.js>< / script> 
< script src =./ assets / js / bar.js>< / script> 
<！ -  endbuild  - > 
 
 <！ -  build：js assets / js / bazbuz.js  - > 
< script src =./ assets / js / baz.js>< / script> 
< script src =./ assets / js / buz.js>< / script> 
<！ -  endbuild  - > 
  

现在当我运行一个包含'useminPrepare'和'usemin'任务的grunt构建时，这些脚本

 < script src =assets / js / foobar.js我的index.html中的标签将被替换为： >< /脚本> 
< script src =assets / js / bazbuz.js>< / script> 
  

这个例子和文档解释了如何配置它并将其用于其他资产，如css。 / p>

I'm trying out Grunt and have a question about including javascript files in dev and later stages. For clarification: the minify, concatenation, etc is not the problem here - just the output/replacement.

In the dev stage I want to include javascript libraries and files individual - for debugging, maybe just because I did so all time and somehow I don't like them to be concatenated in dev. So in I want the following output in my HTML file when developing:

<script src="js/lib-1.js"></script>
<script src="js/lib-2.js"></script>
<script src="js/lib-3.js"></script>
...

And then for production or staging I would like to have grunt output:

<script src="js/all-files-in-one.js"></script>

How to achieve this the simplest way?

解决方案

You might want to take a look at the grunt-usemin plugin (https://github.com/yeoman/grunt-usemin). Here's a simple example.

Basically, if I have some javascript files I want concatenated into a single file (or sets of javascript files that I want concatenated into single files per set), I can put the script tags that reference those files inside "build" blocks.

<!-- build:js assets/js/foobar.js -->
<script src="./assets/js/foo.js"></script>
<script src="./assets/js/bar.js"></script>
<!-- endbuild -->

<!-- build:js assets/js/bazbuz.js -->
<script src="./assets/js/baz.js"></script>
<script src="./assets/js/buz.js"></script>
<!-- endbuild -->

Now when I run a grunt build that includes the 'useminPrepare' and 'usemin' tasks, those script tags in my index.html will be replaced with this:

<script src="assets/js/foobar.js"></script>
<script src="assets/js/bazbuz.js"></script>

The example and docs explain how you can configure this and use it for other assets, like css.

这篇关于让Grunt在开发和生产中包含不同的Javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！