javascript - 在 gruntjs minify/uglify 之后更改 html 中的链接或脚本文件名

Question

我对 css/js 文件使用标准的 minify/uglify 并将多个文件合并到 main.min.css 或 app.min.js ......但是我的 .html 文件需要修改以指向这些新文件<link>名<script>

有没有办法自动化这个？或者如何自动修改 .html 文件以重命名其中的文件名gruntjs？

Answer 1

你可以用grunt-string-replace做到这一点。这是一个关于如何使用它的示例。

在我的 index.html 中，您可以找到以下导入标签：

<!--start PROD imports
<script src="assets/dist/traffic.min.js"></script>
end PROD imports-->

<!--start DEV imports-->
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script> 
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
<!--end DEV imports-->

注意“开始导入”和“结束导入”注释。默认情况下（在 DEV 中），我们注释掉 PROD 导入。

然后在我的 grunt 文件中添加以下任务：

    'string-replace': {
        inline: {
            files: {
                'index.html': 'index.html'
            },
            options: {
                replacements: [
                    {
                        pattern: '<!--start PROD imports',
                        replacement: '<!--start PROD imports-->'
                    },
                    {
                        pattern: 'end PROD imports-->',
                        replacement: '<!--end PROD imports-->'
                    },
                    {
                        pattern: '<!--start DEV imports-->',
                        replacement: '<!--start DEV imports'
                    },
                    {
                        pattern: '<!--end DEV imports-->',
                        replacement: 'end DEV imports-->'
                    }
                ]
            }
        }
    }

运行任务（grunt string-replace）给了我：

<!--start PROD imports-->
<script src="assets/dist/traffic.min.js"></script>
<!--end PROD imports-->

<!--start DEV imports
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
end DEV imports-->

现在 DEV 导入已被注释掉，而 PROD 导入不再被注释掉。

Answer 2

这很容易通过 grunt-processhtml 实现自动化。这是文档中的一个示例：

<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed to -->
<script src="app.min.js"></script>

在https://www.npmjs.org/package/grunt-processhtml阅读更多内容

Answer 3

一个非常合适的 grunt 任务是grunt-html-build

它可以将 HTML 的某些部分从开发版本替换为生产版本。见那里的例子，很容易设置。

现在，使用为grunt-html-build提供的标准配置，如果缩小文件在构建过程中动态命名，例如：

some-file.js->another-name.min.js

可以使用以下命令配置grunt-html-build：

[...]
scripts: {
   bundle: [
            '<%= fixturesPath %>/scripts/*.min.js'
   ]
},
[...]

一个 HTML 部分，如：

<!-- build:script bundle -->
<script type="text/javascript" src="/path/to/js/libs/jquery.js"></script>
<script type="text/javascript" src="/path/to/js/libs/knockout.js"></script>
<script type="text/javascript" src="/path/to/js/libs/underscore.js"></script>
<script type="text/javascript" src="/path/to/js/app/module1.js"></script>
<script type="text/javascript" src="/path/to/js/app/module2.js"></script>
<!-- /build -->

会屈服于：

<script type="text/javascript" src="scripts/other-name.min.js"></script>
<script type="text/javascript" src="scripts/another-other-name.min.js"></script>

这就是@hyprstack 在评论中所要求的。

Answer 4

您可以使用 grunt 预处理来执行此操作：https ://github.com/jsoverson/grunt-preprocess

基本上，您需要设置一个模板并让预处理替换相关部分。

Gruntfile 部分看起来像这样：

preprocess: {
    dev: {
            options: {
                    context: {
                            DEBUG: true,
                            HOST: '<%= env.dev.HOST %>'
                    }
            },
            files: {
                    'index.html': 'tpl/index.tpl'
            }
    },
    production: {
            options: {
                    context: {
                            DEBUG: false,
                            HOST: '<%= env.production.HOST %>
                    }
            },
            files: {
                    'index.html': 'tpl/index.tpl'
            }
    }

},

Answer 5

我正在使用 Middleman App 在我的 html 或 haml 文件中区分 dev 与 build：

- if development?

和

- if build?