Toolchain

Gruntfile.js

var webpack = require('webpack');

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        lib: './node_modules',
        src: './assets',
        out: './app/static/coso',

        sass: {
            options: {
                includePaths: [
                    '<%= lib%>/bootstrap-sass/assets/stylesheets',
                    '<%= lib%>/font-awesome/scss/'
                ]
            },
            dist: {
                options: {
                    outputStyle: 'compact'
                },
                files: {
                    '<%= out%>/css/all.css': '<%= src%>/scss/all.scss'
                }
            }
        },
        copy: {
            main: {
                files: [
                    {
                        flatten: true,
                        cwd: '<%= lib%>/font-awesome/fonts/',
                        src: ['*.ttf', '*.eot', '*.svg', '*.woff', '*.woff2'],
                        dest: '<%= out%>/fonts/',
                        expand: true
                    },
                    {
                        flatten: true,
                        cwd: '<%= src%>/img/',
                        src: ['*.png', '*.jpg', '*.gif'],
                        dest: '<%= out%>/img/',
                        expand: true
                    }
                ]
            }
        },
        webpack: {
            main: {
                entry: {
                    main: "<%= src%>/main.js"
                },
                output: {
                    path: "<%= out%>/js",
                    filename: "main.js",
                    sourceMapFilename: "main.js.map",
                },
                devtool: 'source-map',
                watch: true,
                module: {
                    loaders: [ 
                        {
                            test: /\.js$/,
                            exclude: /node_modules/,
                            loader: 'babel' 
                        },
                        {
                            test: /\.jsx$/,
                            exclude: /node_modules/,
                            loader: 'babel' 
                        }

                    ]
                },
            },
            prod: {
                entry: {
                    main: "<%= src%>/main.js"
                },
                output: {
                    path: "<%= out%>/js",
                    filename: "main.js",
                },
                module: {
                    loaders: [ 
                        {
                            test: /\.js$/,
                            exclude: /node_modules/,
                            loader: 'babel' 
                        },
                        {
                            test: /\.jsx$/,
                            exclude: /node_modules/,
                            loader: 'babel' 
                        }

                    ]
                },
                plugins: [
                    new webpack.optimize.UglifyJsPlugin(),
                ]
            }
        },
        watch: {
            scss: {
                files: [
                    '<%= src%>/scss/*.scss'
                ],
                tasks: ['sass']
            },
            config: {
                files: [
                    'Gruntfile.js',
                    'bower.json',
                    'package.json'
                ],
                tasks: ['build']
            }
        }
    });
    // Plugin loading
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-webpack');
    // Task definition
    grunt.registerTask('build', ['webpack', 'copy', 'sass']);
    grunt.registerTask('default', ['build', 'watch']);
};

package.json

{
  "name": "coso",
  "version": "0.0.1",
  "license": "GPL-3.0+",
  "main": "static/main.js",
  "scripts": {
    "test": ""
  },
  "dependencies": {
    "jquery": "*",
    "underscore": "*",
    "bootstrap": "*",
    "backbone": "*",
    "react": "*",
    "bootstrap-sass": "*"
  },
  "devDependencies": {
    "grunt": "*",
    "node-sass": "*",
    "webpack": "*",
    "babel-loader": "*",
    "grunt-contrib-watch": "*",
    "grunt-sass": "*",
    "grunt-contrib-copy": "*",
    "grunt-webpack": "*",
    "grunt-contrib-concat": "*"
  }
}