gruntjs minify / uglify后,在html中更改链接或脚本文件名
我正在使用标准的minify / uglify for css / js文件,并将多个文件合并到main.min.css或app.min.js中…但是我的.html文件需要修改以指向这些新的文件名, <link>
或<script>
有没有办法让这个自动化? 或者如何自动修改.html文件,以使用gruntjs
重命名文件名?
你可以用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>
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?