我上传了一个我在这里遇到的问题的例子:
https://github.com/ianjamieson/grunt-usemin-issue
运行grunt构建时,您会看到它生成dist文件夹并在正确的revved文件中,但是我无法使用正确的文件路径更新page.html!
我在这里留下了剩下的问题以供参考,但是,您可以忽略它,只使用GitHub repo作为示例。
我正在尝试使用带有usemin的filerev模块,但我认为可能存在一些问题,因为我也在使用load-grunt-config。
有关usemin的文档说我应该添加一个revmap并将值设置为:
<%= grunt.filerev.summary %>
然而,这是未定义的。
GruntFile.js
module.exports = function(grunt) {
var config = {
buildTasks: [
'newer:copy', // copies the src directory to dist (htdocs)
'requirejs', // do an r.js build to concat modular dependencies
'fetchpages', // if there are any remote resources, fetch them here
'concat:head', // concats js in the head
'concat:foot', // concats js in the head
'uglify:head', // compresses js in the head
'uglify:foot', // compresses js in the foot
'cssmin', // minifies and concats css
'filerev', // changes the file name to include md5 hash and force cache refresh
'usemin', // runs through html and inputs minified js and css
'newer:htmlclean', // removes whitespace from html files where required
'newer:imagemin', // minify newer images
'clean:afterBuild' // deletes files that are not required for build
]
};
require('time-grunt')(grunt);
require('load-grunt-config')(grunt, {
jitGrunt: {
staticMappings: {
fetchpages: 'grunt-fetch-pages'
}
}
});
grunt.registerTask('build', config.buildTasks);
};
usemin.js
module.exports = function (grunt, options) {
return {
revmap: '<%= grunt.filerev.summary %>',
html: [
'path/to/page'
]
};
};
filerev.js
module.exports = function(grunt, options) {
return {
options: {
algorithm: 'md5',
length: 10
},
js: {
src: [
'path/to/js.js'
]
},
};
};
我收到错误:
Running "usemin:revmap" (usemin) task
Verifying property usemin.revmap exists in config...OK
Files: [no src] -> revmap
Options: type="revmap"
Replaced 0 references to assets
答案 0 :(得分:1)
我设法解决了这个问题,您可以在主分支中看到一个有效的示例:
https://github.com/ianjamieson/grunt-usemin-issue
帮助的主要因素是assetsDirs
任务中的usemin
选项。起初我也有一个错字称为assetDir
,所以请确保包含s!以下是此工作项目中Gruntfile的示例:
module.exports = function(grunt) {
grunt.initConfig({
copy: {
main: {
cwd: 'src/',
src: '**',
dest: 'dist/',
expand: true,
flatten: false
},
},
useminPrepare: {
html: 'dist/templates/page/page.html',
options: {
dest: './dist',
root: './dist'
}
},
filerev: {
options: {
algorithm: 'md5',
length: 16
},
js: {
src: 'dist/resources/js/app.min.js'
}
},
usemin: {
html: 'dist/templates/page/page.html',
options: {
assetsDirs: ['dist']
}
}
});
grunt.loadNpmTasks('grunt-usemin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-debug-task');
grunt.loadNpmTasks('grunt-filerev');
grunt.registerTask('build', [
'copy',
'useminPrepare',
'concat:generated',
'uglify:generated',
'filerev',
'usemin'
]);
};
revved文件是从assetsDirs文件夹中搜索相对的,所以在这种情况下它是dist
。 HTML中的文件路径为resources/js/app.js
。因此,结合这两者,它正在考虑dist/resources/js/app.js
答案 1 :(得分:0)
我回答了类似的问题here
我没有使用usemin,因为我使用requirejs加载模块,因此我不希望使用新文件名更新我的html文件。 Requirejs&#39; map config功能是我用于将原始模块名称映射到新模块名称的原因。