Skip to content

Instantly share code, notes, and snippets.

@joshdcomp
Created March 9, 2016 16:38
Show Gist options
  • Save joshdcomp/35e0ce9b0a2bde7bc569 to your computer and use it in GitHub Desktop.
Save joshdcomp/35e0ce9b0a2bde7bc569 to your computer and use it in GitHub Desktop.
Gruntfile.js and corresponding package.json for setting up a browerify react dev environment through babel
// This was set up using the help of this tut:
//http://merrickchristensen.com/articles/gruntjs-workflow.html
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
autoprefixer: {
app: {
options: {
browsers: ['last 2 versions', 'ie 8', 'ie 9'],
cascade: true,
safe: false,//safe, while well-intentioned, is…just not a good idea
},
src: 'assets/out/css/app.css',
dest: 'assets/out/css/app.css',
},
},
sass: {
app_dev: {
files:{
'assets/out/css/app.css' : 'assets/in/sass/index.scss'
}
},
app_prod: {
options:{
style: 'compressed'
},
files: {
'assets/out/css/app.css' : 'assets/in/sass/index.scss'
}
}
},
//watch for stuff when we save
watch: {
app_js: {
// files: ['assets/in/js/**/*', 'web_modules/**/*'],
// tasks: ['browserify']
},
app_css: {
files: ['assets/in/sass/**/*.scss', 'assets/in/sass/*.scss'],
tasks: ['sass:app_dev', 'autoprefixer:app']
},
app_svg: {
files: ['assets/in/svg/*.svg'],
tasks: ['svgstore'],
},
},
svgstore: {
options: {
prefix : '_icon-',
svg: {
display: 'none',
xmlns: 'http://www.w3.org/2000/svg',
},
includedemo: true,
},
default : {
files: {
'assets/out/svg/sprite.svg' : ['assets/in/svg/*.svg'],
}
}
},
browserify: {
'dev' : {
'options' :{
'debug': true,
'transform': [['babelify', {presets: ['es2015', 'react']}]]
},
'files': {
'assets/out/js/app.js': ['assets/in/js/index.jsx']
},
},
'dev_watch': {
'options' :{
'debug': true,
'watch' : true,
'keepAlive' : true,
'transform': [['babelify', {presets: ['es2015', 'react']}]]
},
'files': {
'assets/out/js/app.js': ['assets/in/js/index.jsx']
},
},
'prod' : {
'options' :{
'debug': false,
'transform': [['babelify', {presets: ['es2015', 'react']}]]
},
'files': {
'assets/out/js/app.js': ['assets/in/js/index.jsx']
},
},
},
'concurrent': {
'watch' : {
'tasks': ['browserify:dev_watch', 'watch:app_css', 'watch:app_svg'],
'options': {
'logConcurrentOutput': true
}
},
'prod' : ['browserify:prod', ['sass:app_prod', 'autoprefixer:app'], 'svgstore'],
}
});//initConfig
//-----------------------------------------------------------------------------
//CUSTOM CLI COMMANDS
// All tasks we have going in the initconfig should be registered here. Else
// the cli won't know what we're asking
grunt.registerTask('default', 'Compiles sass, concats js, builds SVG sprite.', function(n) {
var tasklist = ['browserify:dev', 'sass:app_dev', 'autoprefixer:app', 'svgstore'];
//watch should always be last
if(grunt.option('watch')) {
tasklist.push('concurrent:watch')
}
grunt.task.run(tasklist);
});
grunt.registerTask('js', 'Concats javascript files, pass --watch to concat as you go', function(n){
var tasklist = ['browserify:dev'];
//watch should always be last
if(grunt.option('watch')) {
tasklist[0] = 'browserify:dev_watch';
}
grunt.task.run(tasklist);
});
grunt.registerTask('css', 'Compiles sass to css. Pass --watch to compile as you go. Pass --ie to build the IE-specific styles', function(n){
var tasklist = ['sass:app_dev', 'autoprefixer:app'];
//Watch should always be last
if(grunt.option('watch')) {
tasklist.push('watch:app_css');
}
grunt.task.run(tasklist);
});
grunt.registerTask('svg', 'Combines svg files into a new SVG sprite, pass --watch to combine as you go', function(n){
var tasklist = ['svgstore'];
//Watch should always be last
if(grunt.option('watch')) {
tasklist.push('watch:app_svg');
}
grunt.task.run(tasklist);
});
grunt.registerTask('prod', 'Compiles sass to compressed css, uglifies javascript, creates SVG sprite', function(n){
//runs things at the same time, way faster
var tasklist = ['concurrent:prod'];
grunt.task.run(tasklist);
});
};
{
"name": "Gaggle",
"version": "1.0.0",
"description": "u wot m8",
"main": "index.js",
"repository": "https://github.com/joshdcomp/gaggle",
"dependencies": {
"6to5ify": "^3.1.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babelify": "^7.2.0",
"browserify": "^8.0.3",
"event-emitter": "*",
"fluxify": "*",
"grunt": "^0.4.5",
"grunt-autoprefixer": "*",
"grunt-contrib-sass": "*",
"grunt-contrib-watch": "*",
"grunt-svgstore": "^1.0.0",
"install": "^0.5.4",
"load-grunt-tasks": "^3.4.0",
"npm": "^3.7.5",
"react": "^0.14.7",
"react-dom": "*",
"react-router": "^2.0.0",
"watchify": "^2.2.1"
},
"devDependencies": {
"grunt-browserify": "^4.0.1",
"grunt-concurrent": "^2.2.1",
"load-grunt-tasks": "^3.4.1"
},
"scripts": {
"watch": "watchify -t 6to5ify ./assets/in/js/index.jsx -o ./assets/out/js/app.js -v"
},
"author": "",
"license": "ISC"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment