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

小编典典

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

all

我正在尝试使用 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 使这些 index.html 取决于我运行时的grunt dev配置grunt prod？

或者，也许我正在朝错误的方向挖掘，并且总是更容易生成MyApp-all.min.js，但将我的所有脚本（连接）或从单独文件异步加载这些脚本的加载器脚本放入其中？

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

阅读 61

2022-06-27

共1个答案

小编典典

以下是我的片段Gruntfile.js。

环境设置：

env : {

    options : {

        /* Shared Options Hash */
        //globalOption : 'foo'

    },

    dev: {

        NODE_ENV : 'DEVELOPMENT'

    },

    prod : {

        NODE_ENV : 'PRODUCTION'

    }

},

预处理：

preprocess : {

    dev : {

        src : './src/tmpl/index.html',
        dest : './dev/index.html'

    },

    prod : {

        src : './src/tmpl/index.html',
        dest : '../<%= pkg.version %>/<%= now %>/<%= ver %>/index.html',
        options : {

            context : {
                name : '<%= pkg.name %>',
                version : '<%= pkg.version %>',
                now : '<%= now %>',
                ver : '<%= ver %>'
            }

        }

    }

}

任务：

grunt.registerTask('default', ['jshint']);

grunt.registerTask('dev', ['jshint', 'env:dev', 'clean:dev', 'preprocess:dev']);

grunt.registerTask('prod', ['jshint', 'env:prod', 'clean:prod', 'uglify:prod', 'cssmin:prod', 'copy:prod', 'preprocess:prod']);

并在/src/tmpl/index.html模板文件中（例如）：

<!-- @if NODE_ENV == 'DEVELOPMENT' -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="../src/js/foo1.js"></script>
    <script src="../src/js/foo2.js"></script>
    <script src="../src/js/jquery.blah.js"></script>
    <script src="../src/js/jquery.billy.js"></script>
    <script src="../src/js/jquery.jenkins.js"></script>

<!-- @endif -->

<!-- @if NODE_ENV == 'PRODUCTION' -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="http://cdn.foo.com/<!-- @echo name -->/<!-- @echo version -->/<!-- @echo now -->/<!-- @echo ver -->/js/<!-- @echo name -->.min.js"></script>

<!-- @endif -->

我确定我的设置与大多数人不同，上述设置的有用性将取决于您的情况。对我来说，虽然它是一段很棒的代码，但 Yeoman grunt-usemin比我个人需要的更强大。

注意：我今天刚刚发现了上面列出的任务，所以我可能缺少一个功能和/或我的过程可能会改变。目前，我喜欢grunt-preprocess和grunt-env所提供的简单性和功能。:)

2014 年 1 月更新：

受到反对票的推动…

当我发布这个答案时，Grunt 没有多少选择0.4.x可以提供满足我需求的解决方案。现在，几个月后，我想有更多的选择可能比我在这里发布的更好。虽然我个人仍然在我的构建中使用并喜欢使用这种技术，但我要求未来的读者花时间阅读给出的其他答案并研究所有选项。如果您找到更好的解决方案，请在此处发布您的答案。

2014 年 2 月更新：

我不确定它是否会对任何人有任何帮助，但我已经在 GitHub 上创建了这个演示存储库，它使用我上面概述的技术显示了一个完整的（和更复杂的设置）。

2022-06-27