0

我正在努力解决这个问题；

我想根据开发环境或生产更改我的 html 文件。我在 Stackoverflow 上关注了一个主题，但不知何故，预处理上下文参数始终是文件中的最后一个。好的，我将包括一些片段。

一块 Grunt.js

    //Grunt task to automate environment configuration for future tasks.
    env : {
        //USER : 'raymond',
        //PATH : '/bin:/usr/bin',

        options : {
            /* Shared Options Hash */
            //globalOption : 'foo'
        },
        dev: {
            NODE_ENV : 'DEVELOPMENT'
        },
        prod : {
            NODE_ENV : 'PRODUCTION'
        }
    },
    //Grunt task around preprocess npm module.
    preprocess : {
        options: {
            context : {
                DEBUG       : true,
                now         : '<%= grunt.template.today() %>',//@TODO .toISOString()
                ver         : '<%= pkg.version %>'
            }
        },
        dev : {
            options : {
                context : {
                    url         : 'http://www.<%= pkg.name %><%= pkg.tld.dev %>',
                    concat      : '<%= pkg.name %><%= pkg.tld.dev %>.concat.js',
                    uglify      : '<%= pkg.name %><%= pkg.tld.dev %>.concat.min.js',
                    css         : '<%= pkg.name %><%= pkg.tld.dev %>.css',
                    cssMin      : '<%= pkg.name %><%= pkg.tld.dev %>.min.css'
                }
            },
            src : 'index.html',
            dest : 'dist/dev/index.html'
            // @TODO write to dist/dev-directory fails cause probably permissions checked it;
            // I have to 777 on www-data to run Nginx properly. Strange cause raymond is part of group www-data

        },
        prod : {
            options : {
                context : {
                    url         : 'http://www.<%= pkg.name %><%= pkg.tld.prod %>',
                    concat      : '<%= pkg.name %><%= pkg.tld.prod %>.concat.js',
                    uglify      : '<%= pkg.name %><%= pkg.tld.prod %>.concat.min.js',
                    css         : '<%= pkg.name %><%= pkg.tld.prod %>.css',
                    cssMin      : '<%= pkg.name %><%= pkg.tld.prod %>.min.css'
                }
            },
            src : '<%= preprocess.dev.src %>',
            dest : 'dist/prod/index.html'
        }
    },

源 index.html

    <!-- @if NODE_ENV == 'DEVELOPMENT' -->
    <script type="text/javascript" src="/js/vendor/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="/js/vendor/jquery.hammer-1.0.6.js"></script>
    <script type="text/javascript" src="/js//vendor/snap.svg-0.2.0.js"></script>
    <script type="text/javascript" src="/js/vendor/helper.js"></script>
    <script type="text/javascript" src="/js/plugins.js"></script>
    <script type="text/javascript" src="/js/myradon.js"></script>
    <script type="text/javascript" src="/js/myradon-snap.js"></script>
    <!--
    <script src="<!-- @echo url -->/js/<!-- @echo concat -->"></script>
    <script src="<!-- @echo url -->/js/<!-- @echo uglify -->"></script>
    -->
    <!-- @endif -->
    <!-- @if NODE_ENV == 'PRODUCTION' -->
    <!-- <script src="<!-- @echo url -->/js/<!-- @echo concat -->"></script> -->
    <script src="<!-- @echo url -->/js/<!-- @echo uglify -->"></script>
    <script>
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-5427260-3']); //www.myradon.net = UA-5427260-2, www.myradon.nl = UA-5427260-3, www2.myradon.net = UA-5427260-4
        _gaq.push(['_trackPageview']);
        (function () {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>
    <!-- @endif -->
</body>

这是由 preprocess:dev 渲染的 index.html 的输出；

    <!-- <script src="http://www.myradon.net/js/myradon.net.concat.js"></script> -->
    <script src="http://www.myradon.net/js/myradon.net.concat.min.js"></script>
    <script>
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-5427260-3']); //www.myradon.net = UA-5427260-2, www.myradon.nl = UA-5427260-3, www2.myradon.net = UA-5427260-4
        _gaq.push(['_trackPageview']);
        (function () {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>
</body>

如您所见，@if NODE_ENV == 'DEVELOPMENT' 被忽略，但 preprocess:dev 的上下文参数被传递给 @if NODE_ENV == 'PRODUCTION' 这对我来说真的没有意义。你有线索吗？！

4

2 回答 2

1

好吧，伙计们，我正在使用 Grunt-processhtml。它完全符合我的想法。您可以在上下文中设置变量。删除 html 块，根据环境设置 url 或元标记 innerHTML 真的很好。唯一的缺点，也许它有一个设置，它留下 html-comment-markup 来处理 html 代码。

于 2014-01-31T12:35:52.607 回答
0

我不知道这是否重要，但我使用单个 '=' 就像每个示例一样： npm 上的 grunt-preprocess

<!-- @if NODE_ENV='production' -->
<script src="some/production/lib/like/analytics.js"></script>
<!-- @endif -->
于 2014-11-07T12:36:25.407 回答