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
}
}
}
});
There is no simple solution to getting sourcemaps to work with the usemin flow. Its a known problem that hasnt been addressed in a year it seems:
https://github.com/yeoman/grunt-usemin/issues/30
https://github.com/yeoman/grunt-usemin/issues/220
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With