Skip to content

Instantly share code, notes, and snippets.

@atuttle
Created June 10, 2016 17:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save atuttle/e366eef4a17efd4e2677c4cffb680909 to your computer and use it in GitHub Desktop.
Save atuttle/e366eef4a17efd4e2677c4cffb680909 to your computer and use it in GitHub Desktop.
My Browserify & Grunt config for React.js with LESSCSS
module.exports = function(grunt){
'use strict';
grunt.initConfig({
less: {
bundle: {
options: {
compress: true
,report: 'min'
,paths: ['less']
}
,files: {
'css/app.min.css': 'less/app.less' //create app.min.css from app.less
}
}
}
,browserify: {
js: {
files: {
'main.js': ['app/index.js'] //create main.js from app/index.js
}
,options: {
browserifyOptions: {
debug: true //generates sourcemaps
,transform: [ 'reactify' ] //support for JSX, etc
}
}
}
}
,extract_sourcemap: {
js: {
options: {
'removeSourcesContent': false
}
,files: {
'./': ['main.js'] //extract sourcemap from browserify'd result
}
}
}
,uglify: {
js: {
options: {
sourceMap: true
,sourceMapRoot: 'build'
,sourceMapIncludeSources: true
,sourceMapIn: 'main.js.map' //use sourcemap from extract_sourcemap
,mangle: false
}
,files: {
'main.min.js': ['main.js'] //compress main.js to main.min.js
}
}
}
,clean: {
js: ["main.js","main.js.map"] //delete main.js and main.js.map intermediate files after we no longer need them
}
,watch: {
js: {
files: ['app/**/*.js','lib/**/*.js']
,tasks: ['js_prod'] //when a JS file changes, run the task js_prod
,options: {
interrupt: true
,livereload: true
}
}
,less: {
files: ['less/*.less']
,tasks: ['less']
,options: {
interrupt: true
,livereload: true
}
}
,grunt: {
files: ['Gruntfile.js']
,options: {
interrupt: true
}
}
}
});
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-extract-sourcemap');
//define js_prod for watcher task to use
grunt.registerTask('js_prod', ['browserify','extract_sourcemap','uglify','clean']);
grunt.registerTask('default', ['watch']);
};
{
"devDependencies": {
"browserify": "^12.0.1",
"cssify": "^1.0.2",
"grunt": "^0.4.5",
"grunt-browserify": "^4.0.1",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-less": "^1.1.0",
"grunt-contrib-uglify": "^0.10.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-extract-sourcemap": "^0.1.16",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-redux": "^4.4.2",
"reactify": "^1.1.1",
"redux": "^3.4.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment