gruntjs minify / uglify后,在html中更改链接或脚本文件名

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

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

       

网上收集的解决方案 "gruntjs minify / uglify后,在html中更改链接或脚本文件名"

你可以用grunt-string-replace来做到这一点。 这里有一个关于如何使用它的例子。

在我的index.html中,您可以find以下导入标签:

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

这很容易与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

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

它可以将开发中的一些HTML部分replace为生产版本。 看到那里的例子,很容易设置。

现在,使用为grunt-html-build提供的标准configuration,如果在构build过程中缩小的文件是dynamic命名的,如:

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

你可以使用下面的命令来configurationgrunt-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在评论中所要求的。

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

基本上,你需要build立一个模板并进行预处理来replace相关的部分。

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' } } 

},

我正在使用中间人的应用程序做区分开发vsbuild立在我的HTML或哈姆文件:

- if development?

- if build?