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

Question

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

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

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 导入不再被注释掉。