小编典典

让 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,但将我的所有脚本(连接)或从单独文件异步加载这些脚本的加载器脚本放入其中?

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


阅读 57

收藏
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-preprocessgrunt-env所提供的简单性功能。:)


2014 年 1 月更新:

受到反对票的推动…

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

2014 年 2 月更新:

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

2022-06-27