有Grunt生成index.html不同的设置

我试图使用Grunt作为我的网络应用程序的构建工具。

我想至少有两个设置:

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>

2生产设置-加载我的脚本缩小和连接在一个文件，

根据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，但把它里面要么我所有的脚本(连接)或加载器脚本异步加载这些脚本从单独的文件?

你们是怎么做到的，伙计们?

当前回答

grunt-dom-munger使用CSS选择器读取和操作HTML。例如，从html中读取标签。删除节点、添加节点等等。

你可以使用grunt-dom-munger读取所有由index.html链接的JS文件，丑化它们，然后再次使用grunt-dom-munger修改index.html，只链接最小化的JS文件

2013-12-21 15:54:55

其他回答

这个名为scriptlinker的任务看起来是在开发模式中添加脚本的简单方法。您可以先运行连接任务，然后以prod模式将其指向连接的文件。

2013-08-19 17:43:34

考虑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">

2017-02-20 19:39:02

grunt-bake是一个很棒的grunt脚本，可以在这里工作。我在JQM自动构建脚本中使用了它。

https://github.com/imaginethepoet/autojqmphonegap

看看我的呼噜声。咖啡文件:

bake:
    resources: 
      files: "index.html":"resources/custom/components/base.html"

这将查看base.html中的所有文件，并将它们吸收到创建index.html中，这对于多页面应用(phonegap)非常有用。这让开发变得更容易，因为所有的开发者都不需要开发一个很长的单页应用(防止大量冲突)。相反，您可以将页面拆分，处理较小的代码块，并使用watch命令编译成整个页面。

Bake从base.html中读取模板，并在watch中注入组件html页面。

<!DOCTYPE html>

jQuery移动演示

app.initialize ();

<body>
    <!--(bake /resources/custom/components/page1.html)-->
    <!--(bake /resources/custom/components/page2.html)-->
    <!--(bake /resources/custom/components/page3.html)-->
</body>

你可以更进一步，在页面中为“菜单”、“弹出窗口”等添加注入，这样你就可以真正地将页面分解成更小的可管理组件。

2013-12-13 21:12:12

这个答案不适合新手!

使用玉石模板…将变量传递给Jade模板是一个标准的用例

我用的是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>

2015-06-30 10:27:43

我发现了一个叫咕哝-dev-prod-switch的插件。它所做的只是根据您传递给grunt的——env选项注释掉它所寻找的某些块(尽管它将您限制为dev、prod和test)。

一旦你设置好它，你可以运行，例如:

Grunt serve——env=dev，它所做的就是注释掉被

    <!-- env:test/prod -->
    your code here
    <!-- env:test/prod:end -->

它会取消注释那些被

    <!-- env:dev -->
    your code here
    <!-- env:dev:end -->

它也适用于javascript，我用它来设置正确的IP地址连接到我的后端API。方块变成

    /* env:dev */
    your code here
    /* env:dev:end */

在你的情况下，它会像这样简单:

<!DOCTYPE html>
<html>
    <head>
        <!-- env:dev -->
        <script src="js/module1.js" />
        <script src="js/module2.js" />
        <script src="js/module3.js" />
        ...
        <!-- env:dev:end -->
        <!-- env:prod -->
        <script src="js/MyApp-all.min.js" />
        ...
        <!-- env:prod:end -->
    </head>
    <body></body>
</html>

2015-04-07 18:50:34

有Grunt生成index.html不同的设置

推荐文章

最新文章

标签