在使用grunt usemin和rev时使用SourceMaps丑化 [英] Uglify with SourceMaps while using grunt usemin and rev
问题描述
我想将JavaScript错误记录到服务器，但堆栈跟踪对缩小的JS代码没有用处。所以我正在考虑使用 Getsentry 或滚动条显示在 sourcemaps 的帮助下正确的堆栈跟踪。但我一直在努力创建源代码。
我得到这个错误
Destination（_build / js / app.js）not written because src文件是空的。
一旦它正确地创建源映射，将会有另一个问题，即 rev 将重命名文件。我还需要离开未分级的连接文件。
下面是我的gruntfile.js（我已经删除了它的一小部分内容。）
module.exports = function（grunt）{
grunt.initConfig（{
pkg：grunt.file.readJSON（'package.json'），
clean：{
jsFolders：{
src：[
'_build / js / ui'，
'_build / js / vendor'，
'_build / js / app'，
'_build / js / * templates.js'
]
}，
build：{
src：['_build / ** / *']
}
}，
复制：{
build：{
files：[{
expand：true，
src：[
'index.html'，
'img / ** / *'，// include web.cofig also。
'img / ** / *。svg' ，
'！img / ** / *。psd'，
'js / ** / *'，//也包含web.cofig。
'css / ** / *'，//也包含web.cofig。
'* .png'，
'favicon.ico'
]，
dest：'_build /'
}]
}，
$，
$ b $ rev：{
选项：{
算法：'sha1'，
长度：4
}，
全部： {
files：{
src：[
'_build / ** / *。{js，css，eot，ttf，woff}'
]
}
}
}，
useminPrepare：{
html：['_build / index.html']
}，
usemin：{
html：[
'_build / index.html'
]，
css：[
'_build / css / ** / *。css'
]
}，
uglify：{
选项：{
sourceMap：'_build / js / app.js.map'，
}，
js：{
文件：{
'_build / js / app.js'：['' _build / js / app.js']
}
}
}，
cssmin：{
minify：{
expand：true ，
cwd：'_build / css /'，
src：'* .css'，
dest：'_build / css /'
}
}，
}）;
grunt.registerTask（'build'，[
'clean：build'，
'handlebars'，
'compass'，
'autoprefixer' ，
'copy：build'，
'useminPrepare'，
'concat'，
'uglify'，
'cssmin'，
'clean： jsFolders'，
'rev'，
'usemin'，
]）;
};
更新
<尝试@ Andy的解决方案，它仍然显示相同的错误Destination（_build / js / app.js）not因为src文件是空的。并且在建立时下面也会说：
uglify：
{options：
{sourceMap：true，
sourceMapName：'_build / js / app.js.map'}，
js：{files：{'_build / js / app。 js'：['_build / js / app.js']}}，
generated：
{files：
[{dest：'dist\\js\\\app .js'，
src：['.tmp\\concat\\js\\app.js']}]
不知道它从哪里得到 dest 。我的输出文件夹是 _build 。
UPDATE2：
请参阅下面的链接以获得更好的解决方案
https://stackoverflow.com/a/20574196/148271
https://github.com / gruntjs / grunt-contrib-uglify / issues / 39＃issuecomment-14856100
useminPrepare正在合并现有使用它自己的uglify配置，但嵌套在
生成的下。因此，uglify的这个配置适用于我 grunt.initConfig（{
uglify：{
generated： {
options：{
sourceMap：true
}
}
}
}）;
I want to log javascript errors to server but the stacktrace is not useful with minified JS code. So I was thinking of using either Getsentry or Rollbar which shows proper stack trace with the help of sourcemaps. But I'm struggling to create sourcemap in first place.
I'm getting this error
"Destination (_build/js/app.js) not written because src files were empty."
Once it creates source map properly, there will be another problem i.e. rev will rename the file. I also need to leave the unminified concatenated file.
Below is my gruntfile.js (I've removed few bits out of it.)
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
jsFolders: {
src: [
'_build/js/ui',
'_build/js/vendor',
'_build/js/app',
'_build/js/*templates.js'
]
},
build: {
src: ['_build/**/*']
}
},
copy: {
build: {
files: [{
expand: true,
src: [
'index.html',
'img/**/*', //includes web.cofig also.
'img/**/*.svg',
'!img/**/*.psd',
'js/**/*', //includes web.cofig also.
'css/**/*', //includes web.cofig also.
'*.png',
'favicon.ico'
],
dest: '_build/'
}]
},
},
rev: {
option: {
algorithm: 'sha1',
length: 4
},
all: {
files: {
src: [
'_build/**/*.{js,css,eot,ttf,woff}'
]
}
}
},
useminPrepare: {
html: ['_build/index.html']
},
usemin: {
html: [
'_build/index.html'
],
css: [
'_build/css/**/*.css'
]
},
uglify: {
options: {
sourceMap: '_build/js/app.js.map',
},
js: {
files: {
'_build/js/app.js': ['_build/js/app.js']
}
}
},
cssmin: {
minify: {
expand: true,
cwd: '_build/css/',
src: '*.css',
dest: '_build/css/'
}
},
});
grunt.registerTask('build', [
'clean:build',
'handlebars',
'compass',
'autoprefixer',
'copy:build',
'useminPrepare',
'concat',
'uglify',
'cssmin',
'clean:jsFolders',
'rev',
'usemin',
]);
};
UPDATE
Tried @Andy's solution, it still shows the same error "Destination (_build/js/app.js) not written because src files were empty." and it also says below while building
uglify:
{ options:
{ sourceMap: true,
sourceMapName: '_build/js/app.js.map' },
js: { files: { '_build/js/app.js': [ '_build/js/app.js' ] } },
generated:
{ files:
[ { dest: 'dist\\js\\app.js',
src: [ '.tmp\\concat\\js\\app.js' ] } ] } }
Don't know where it got dest name from. My output folder is _build.
UPDATE2:
Refer to below links for better solution
https://stackoverflow.com/a/20574196/148271
https://github.com/gruntjs/grunt-contrib-uglify/issues/39#issuecomment-14856100
useminPrepare is merging the existing uglify config with its own, but nested under generated. Therefore this configuration for uglify works for me
grunt.initConfig({
uglify: {
generated: {
options: {
sourceMap: true
}
}
}
});
这篇关于在使用grunt usemin和rev时使用SourceMaps丑化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
