generator-webapp.md

Optimizing Webapp Generator

1. Install dependencies

Install the LibSass, node-bourbon and jit-grunt grunt plugin:

npm install --save-dev node-bourbon
npm install --save-dev jit-grunt
npm uninstall --save-dev load-grunt-tasks

2. Replace load-grunt-tasks width jit-grunt task loader

- require('load-grunt-tasks')(grunt);
+ require('jit-grunt')(grunt, { useminPrepare: 'grunt-usemin' });

• Your compilation process will be lot faster, because grunt will only load the plugins that are necessary for the specific task. Thanks to JIT(Just In Time) grunt.

3. Update other tasks

sass

sass: {
      options: {
        sourceMap: true,
-           includePaths: ['bower_components']
+           includePaths: require('node-bourbon').with('bower_components')
        },
      dist: { ... },
      server: { ... }
    },

• You can use Bourbon sass mixin library

autoprefixer

autoprefixer: {
      options: {
        browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1']
+       , map: true
      },
      dist: {
        files: [{
          expand: true,
          cwd: '.tmp/styles/',
          src: '{,*/}*.css',
          dest: '.tmp/styles/'
        }]
      }
    },

main.scss

$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
+ @import "bourbon";