Remove console and debugger statements for production with gulp/grunt

While writing JavaScript you will most likely use either console (console.log, console.error…), debugger; or even alert() (I hope you don’t anymore) at some point to debug your code. Showing these messages on your development server is not a problem as…


This content originally appeared on justmarkup and was authored by justmarkup

While writing JavaScript you will most likely use either console (console.log, console.error…), debugger; or even alert() (I hope you don’t anymore) at some point to debug your code. Showing these messages on your development server is not a problem as only »you« will see them, but if they show up on your production server everybody will see them.

Whereas console messages and debugger are only visible if DevTools are open alert() will always show up and even prompt a modal dialog. So, you most probably (*always*) want to remove these statements before pushing new code to production.

Dialog showing the message 'Oops, I forgot to remove debug messages.'

Let’s make use of our preferred build tool and remove all debug statements before deploying code to production.

Gulp

For Gulp we can use gulp-strip-debug by Sindre Sorhus.

Here is what the task will look like if you have all your JavaScript files in src/js and want to save the cleaned up versions in dist/js.

var gulp = require('gulp');
var stripDebug = require('gulp-strip-debug');

gulp.task('strip-debug', function () {
return gulp.src('src/js/*')
.pipe(stripDebug())
.pipe(gulp.dest('dist/js/'));
});

Grunt

Sindre Sorhus also made a Grunt Plugin we can use.

Once again, Here is what the task will look like if you have all your JavaScript files in src/js and want to save the cleaned up versions in dist/js.

module.exports = function(grunt){

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
stripDebug: {
dist: {
files: grunt.file.expandMapping(['src/js/*.js'], 'dist/js/', {
flatten: true,
rename: function(destBase, destPath) {
return destBase+destPath;
}
})
}
}
});

grunt.registerTask('default', ['stripDebug']);

};

Last but not least, there is also a Broccoli Plugin if this is your preferred tool.

Conclusion

Removing console messages before deploying code to production is nothing we should do manually – that’s a task for a build tool.


This content originally appeared on justmarkup and was authored by justmarkup


Print Share Comment Cite Upload Translate Updates
APA

justmarkup | Sciencx (2015-03-26T11:05:25+00:00) Remove console and debugger statements for production with gulp/grunt. Retrieved from https://www.scien.cx/2015/03/26/remove-console-and-debugger-statements-for-production-with-gulp-grunt/

MLA
" » Remove console and debugger statements for production with gulp/grunt." justmarkup | Sciencx - Thursday March 26, 2015, https://www.scien.cx/2015/03/26/remove-console-and-debugger-statements-for-production-with-gulp-grunt/
HARVARD
justmarkup | Sciencx Thursday March 26, 2015 » Remove console and debugger statements for production with gulp/grunt., viewed ,<https://www.scien.cx/2015/03/26/remove-console-and-debugger-statements-for-production-with-gulp-grunt/>
VANCOUVER
justmarkup | Sciencx - » Remove console and debugger statements for production with gulp/grunt. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2015/03/26/remove-console-and-debugger-statements-for-production-with-gulp-grunt/
CHICAGO
" » Remove console and debugger statements for production with gulp/grunt." justmarkup | Sciencx - Accessed . https://www.scien.cx/2015/03/26/remove-console-and-debugger-statements-for-production-with-gulp-grunt/
IEEE
" » Remove console and debugger statements for production with gulp/grunt." justmarkup | Sciencx [Online]. Available: https://www.scien.cx/2015/03/26/remove-console-and-debugger-statements-for-production-with-gulp-grunt/. [Accessed: ]
rf:citation
» Remove console and debugger statements for production with gulp/grunt | justmarkup | Sciencx | https://www.scien.cx/2015/03/26/remove-console-and-debugger-statements-for-production-with-gulp-grunt/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.