Grunt usemin和绝对(不存在)文件路径



我的目录结构如下,我有一个映射到public dir的绝对路径/static

+public/
+--app/
+--dist/
|--Gruntfile.js
|..
|..

目前,一切都很好,我最终在dist中使用了缩小/修订的文件,但index.html文件包含相对路径,如:

<script src="some-file.56a75bad.js"></script>

当我需要它们时:

<script src="/static/dist/some-file.56a75bad.js"></script>

似乎不知道如何实现这一点,我所尝试的一切最终都给了我正确的文件路径,但没有提供修订文件,即:

<script src="/static/dist/some-file.js"></script>

我的解决方案:copy任务将所有脚本移动到.tmp文件夹中。uglify任务然后运行并输出到.tmp中的文件夹层次结构,该文件夹层次结构是要解析的绝对路径。在这两个任务运行后,我有一个文件夹结构,如下所示(构建中期):

public/
+--.tmp/
+--static/
+--dist/
|--application.min.js
|--dependencies.min.js
+--app/
+--bower_components/
+--dist/
|--Gruntfile.js
|--index.html

一小块我的index.html

<!-- build:js /static/dist/dependencies.min.js -->
<script src="/static/dist/dependencies.min.js"></script>
<!-- endbuild -->
<!-- build:js /static/dist/application.min.js -->
<script src="/static/dist/application.min.js"></script>
<!-- endbuild -->

现在一切如常,运行useminPreparefilerevusemin任务。

还有我的垃圾文件:

module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.config.init({
useminPrepare: {
html: 'dist/index.html',
options: {
dest: './dist'
}
},
usemin:{
html:['dist/index.html'],
options: {
assetsDirs: ['.tmp']
}
},
copy:{
html: {
src: './index.html',
dest: 'dist/index.html'
},
javascripts: {
cwd: '',
src: 'app/scripts/**',
dest: '.tmp',
expand: true
}
},
uglify: {
build: {
options: {
mangle: true
},
files: {
'.tmp/static/dist/application.min.js': ['.tmp/app/**/*.js'],
'.tmp/static/dist/dependencies.min.js': [
'bower_components/jquery/dist/jquery.js',
'bower_components/angular/angular.js'
// All my other 3rd party libs, I realized this can be done in index.html but there's environmental constraints making that not possible
]
}
}
},
filerev: {
dist: {
src: ['.tmp/static/dist/application.min.js', '.tmp/static/dist/dependencies.min.js'],
dest: 'dist'
}
}
});
grunt.registerTask('build',[
'copy:javascripts',
'copy:html',
'uglify',
'useminPrepare',
'filerev',
'usemin'
]);
};

相关内容

  • 没有找到相关文章

最新更新