Grunt を使用して、AngularJS アプリケーションを本番用に最適化しています。useminPrepare と usemin を使用して、index.html ページから concat/minify するファイルを読み取ります。エラーが発生している場所を表示できるように、ソースマップを機能させようとしています。package.json の関連バージョンは次のとおりです。
"grunt": "0.4.5",
"grunt-autoprefixer": "2.2.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-cssmin": "~0.11.0",
"grunt-contrib-uglify": "~0.9.1",
"grunt-rev": "~0.1.0",
"grunt-usemin": "~2.0.2",
Gruntfile.js
これは、関連するタスクだけに削減されたバージョンです。
'use strict';
// usemin custom step
var useminAutoprefixer = {
name: 'autoprefixer',
createConfig: require('grunt-usemin/lib/config/cssmin').createConfig // Reuse cssmins createConfig
};
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: ["dist", '.tmp'],
copy: {
main: {
files: [
{
expand: true,
src: ['**', '!css/**', '!*.js', '!node_modules/**', '!*.log', '!tests/**'],
dest: 'dist/'
}
]
}
},
cssmin: {
options: {
root: './' // Replace relative paths for static resources with absolute path
}
},
rev: {
files: {
src: ['dist/assets/**/*.{js,css}']
}
},
useminPrepare: {
html: 'index.html',
options: {
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin', useminAutoprefixer] // Let cssmin concat files so it corrects relative paths to fonts and images
},
post: {
js: [{
name: 'concat',
createConfig: function (context, block) {
context.options.generated.options = {
sourceMap: true
};
}
}, {
name: 'uglifyjs',
createConfig: function (context, block) {
context.options.generated.options = {
sourceMapIn: '.tmp/concat/' + block.dest.replace('.js', '.js.map'),
mangle: false,
beautify: {
beautify: true
}
};
}
}]
}
}
}
}
},
usemin: {
html: ['dist/index.html']
},
uglify: {
options: {
report: 'min',
mangle: false
},
generated: {
options: {
sourceMap: true
}
}
}
});
grunt.registerTask('build', [
'clean', 'useminPrepare', 'concat', 'copy', 'cssmin', 'autoprefixer', 'uglify', 'rev', 'usemin'
]);
};
*.js.map
ファイルは で生成されていますdist/assets/js
。そして、改訂されたJSファイルはそれらをうまく参照しているようです:
//# sourceMappingURL=app.js.map
ただし、ソースマップを見ると、ディレクトリ パスとファイル名が間違っている可能性があります。
{"version":3,"file":"app.js","sources":["../../../.tmp/concat/assets/js/app.js"] ...
ソースマップを Grunt、usemin、uglify、rev で動作させる方法はありますか?