Created
June 10, 2016 17:49
-
-
Save atuttle/e366eef4a17efd4e2677c4cffb680909 to your computer and use it in GitHub Desktop.
My Browserify & Grunt config for React.js with LESSCSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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']); | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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