我正在使用标准的css/js文件最小化和混淆,并将多个文件合并为main.min.css或app.min.js... 但是我的.html文件也需要修改,以指向这些新的文件名,包括在<link>或<script>中
是否有自动化的方法? 或如何使用gruntjs自动修改.html文件以重新命名其中的文件名?
我正在使用标准的css/js文件最小化和混淆,并将多个文件合并为main.min.css或app.min.js... 但是我的.html文件也需要修改,以指向这些新的文件名,包括在<link>或<script>中
是否有自动化的方法? 或如何使用gruntjs自动修改.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-->
注意 'start imports' 和 'end 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>
min.js
文件名是在代码混淆时动态创建的,那么如何在不将其硬编码到 <!-- build:js app.min.js -->
标签下的 HTML 文件中的情况下使用它呢? - hyprstack*.min.js
或另一个目录用于缩小文件) - JrBenito一个非常适合的grunt任务是grunt-html-build
它可以将HTML的某些部分从开发版本替换为生产版本。在那里看到示例,很容易设置。
现在,使用grunt-html-build的标准配置,如果在构建过程中动态命名缩小文件,例如:
some-file.js
-> another-name.min.js
可以配置grunt-html-build:
[...]
scripts: {
bundle: [
'<%= fixturesPath %>/scripts/*.min.js'
]
},
[...]
:
<!-- 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>
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'
}
}
},
main.min.css
吗?为什么需要改变它呢?当你更新源文件时,它应该会覆盖已编译的文件。 - Brian Glazif
块来检查你当前是在开发环境还是生产环境。 - Brian Glaz