grunt-preprocess不处理代码块

时间:2014-03-01 19:43:35

标签: javascript gruntjs

我已经阅读了所有关于grunt-preprocess的文档和所有SO帖子,但仍然无法使其工作。它似乎是一个非常有用的选项,非常感谢帮助实现这一点。

我的Gruntfile.js中有以下内容

    env: {
        dev: {
            NODE_ENV: 'DEVELOPMENT',
        },
        dist: {
            NODE_ENV: 'PRODUCTION',
        },
    },

    preprocess: {
        dev: {
            options: {
                context: {
                    NODE_ENV: 'DEVELOPMENT'
                },
            },
            files: {
                'app/wp-content/themes/nuvo/footer.php' : 'app/wp-content/themes/nuvo/footer-template.php'
            },
        },
        dist: {
            options: {
                context: {
                    NODE_ENV: 'PRODUCTION'
                },
            },
            files: {
                'dist/wp-content/themes/nuvo/footer.php' : 'app/wp-content/themes/nuvo/footer-template.php'
            },
        },
    },

其次是:

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

我的footer-template.php文件包含以下内容:

<!-- @if NODE_ENV == 'DEVELOPMENT' --><!-- @endif -->
<!-- @if NODE_ENV == 'PRODUCTION' -->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-*******-*']);
_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 -->

当我运行默认的grunt任务时,会生成footer.php文件,但没有任何预处理,它看起来与footer-template.php文件完全相同。对此有任何帮助非常感谢!

这是我在运行grunt时得到的--verbose:

Running "env:dev" (env) task
Verifying property env.dev exists in config...OK
File: [no files]
Options: (none)

Running "preprocess:dev" (preprocess) task
Verifying property preprocess.dev exists in config...OK
Files: app/wp-content/themes/nuvo/footer-template.php -> app/wp-content/themes/nuvo/footer.php
Verifying property preprocess exists in config...OK
Options: context={"NODE_ENV":"DEVELOPMENT"}
Reading app/wp-content/themes/nuvo/footer-template.php...OK
Writing app/wp-content/themes/nuvo/footer.php...OK

1 个答案:

答案 0 :(得分:1)

好的,所以作为一个冰雹玛丽解决方案我将页脚模板文件从.php文件更改为.html文件(仍然输出到.php文件)并且它有效。我猜grunt-preprocess只解析.html文件。

这是我的预处理grunt任务:

        preprocess: {
        dev: {
            options: {
                context: {
                    NODE_ENV: 'DEVELOPMENT'
                },
            },
            files: {
                'app/wp-content/themes/nuvo/footer.php' : 'app/wp-content/themes/nuvo/footer-template.html'
            },
        },
        dist: {
            options: {
                context: {
                    NODE_ENV: 'PRODUCTION'
                },
            },
            files: {
                'dist/wp-content/themes/nuvo/footer.php' : 'app/wp-content/themes/nuvo/footer-template.php'
            },
        },
    },

这是.html模板文件中的代码块:

<!-- @if NODE_ENV == 'DEVELOPMENT' --><!-- @endif -->
<!-- @if NODE_ENV == 'PRODUCTION' -->
<script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-*******-*']);
    _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 -->

我不再需要grunt-env模块,它只与grunt-preprocess模块​​一起使用。希望这能为将来节省一些时间!