我正在使用标准minify/uglify用于css/js文件,并将多个文件组合到main.min.css或app.min.js ...但是我的.html文件需要修改为指向这些新文件名或者
有没有办法实现自动化?或者如何自动修改.html文件以重命名那里的文件名gruntjs
?
使用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-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导入不再被注释掉.