logo标签列表

让Grunt为不同的设置生成index.html

javascriptbuildbuild-automationgruntjs
209

我想使用Grunt作为我的webapp的构建工具。

我至少想要有两种设置：

I. 开发环境 - 从单独的文件中加载脚本，而不是将它们合并在一起，

这样我的index.html看起来会像这样：

<!DOCTYPE html>
<html>
    <head>
        <script src="js/module1.js" />
        <script src="js/module2.js" />
        <script src="js/module3.js" />
        ...
    </head>
    <body></body>
</html>

二、生产环境设置 - 将我的脚本压缩和合并成一个文件加载，

使index.html相应更改：

<!DOCTYPE html>
<html>
    <head>
        <script src="js/MyApp-all.min.js" />
    </head>
    <body></body>
</html>
问题是，当我运行grunt dev或grunt prod时，我该如何让grunt根据配置生成这些index.html呢？
或者说，也许我方向错了，总是生成MyApp-all.min.js可能更容易，但是在其中放入所有脚本（已连接）或异步从单独的文件加载这些脚本的加载器脚本？
你们怎么做的？
3
试试使用Yeoman工具，其中包括一个名为"usemin"的任务可以实现你想要的功能。此外，Yeoman生成器包含了许多易于学习的“最佳实践”，这些实践在使用新工具时很难学会。 - acanimal
12个回答
2

这篇回答不适合初学者！

使用Jade模板引擎...向Jade模板传递变量是一个非常普遍的用例。

我正在使用grunt（grunt-contrib-jade），但你不必使用grunt。只需使用标准的npm jade模块即可。

如果使用grunt，则gruntfile应该像这样...

jade: {
    options: {
      // TODO - Define options here
    },
    dev: {
      options: {
        data: {
          pageTitle: '<%= grunt.file.name %>',
          homePage: '/app',
          liveReloadServer: liveReloadServer,
          cssGruntClassesForHtmlHead: 'grunt-' + '<%= grunt.task.current.target %>'
        },
        pretty: true
      },
      files: [
        {
          expand: true,
          cwd: "src/app",
          src: ["index.jade", "404.jade"],
          dest: "lib/app",
          ext: ".html"
        },
        {
          expand: true,
          flatten: true,
          cwd: "src/app",
          src: ["directives/partials/*.jade"],
          dest: "lib/app/directives/partials",
          ext: ".html"
        }
      ]
    }
  },

我们现在可以轻松地在Jade模板中访问grunt传递的数据。
与Modernizr使用的方法类似，我根据传递的变量值在HTML标记上设置了一个CSS类，并且可以根据CSS类是否存在使用JavaScript逻辑。
如果使用Angular，这很棒，因为您可以根据类是否存在来包含页面中的元素。
例如，如果存在该类，我可能会包含一个脚本...
（例如，在开发中我可能会包含实时重新加载脚本，但在生产中不会）
<script ng-if="controller.isClassPresent()" src="//localhost:35729/livereload.js"></script>
2
考虑 processhtml。它允许为构建定义多个“目标”。注释用于有条件地包含或排除 HTML 材料：
<!-- build:js:production js/app.js -->
...
<!-- /build -->

成为
<script src="js/app.js"></script>

它甚至声称可以做像这样的很棒的事情（请参见README）：
<!-- build:[class]:dist production -->
<html class="debug_mode">
<!-- /build -->

<!-- class is changed to 'production' only when the 'dist' build is executed -->
<html class="production">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接