Gruntfile.js

/* global process */

module.exports = function (grunt) {

    'use strict';

    var buildConfig,
        taskConfig,
        environment,
        configEnvironment,
        appConstants,
        appTranslations;

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-bump');
    grunt.loadNpmTasks('grunt-connect-proxy');
    grunt.loadNpmTasks('grunt-html2js');
    grunt.loadNpmTasks('grunt-ng-annotate');
    grunt.loadNpmTasks('grunt-ng-constant');
    grunt.loadNpmTasks('grunt-hub');
    grunt.loadNpmTasks('grunt-run-grunt');
    grunt.loadNpmTasks('grunt-ngdocs');

    buildConfig = require('./build.config.js');

    environment = process.env.NODE_ENV || 'dev';
    configEnvironment = process.env.NODE_CONFIG_ENV || environment;

    appConstants = (function () {
        var baseConfig = buildConfig.config_dir + 'config.json',
            envConfig = buildConfig.config_dir + 'config.' + configEnvironment + '.json';

        console.log('Read environment config:', envConfig);
        return grunt.util._.extend(grunt.file.readJSON(baseConfig), grunt.file.readJSON(envConfig));
    })();

    appTranslations = (function () {
        var translations = {};
        grunt.file.recurse('config/translations', function (abspath, rootdir, subdir, filename) {
            if (filename.indexOf('.json') > 0) {
                translations[filename.split('.')[0]] = grunt.file.readJSON(abspath);
            }
        });
        return translations;
    })();

    /**
     * This is the configuration object Grunt uses to give each plugin its
     * instructions.
     */
    taskConfig = {

        /**
         * This allows project to have different configuration settings for angular
         * depending on the currently set NODE_ENV. To change NODE_ENV issue this command,
         * $ export NODE_ENV=local
         */
        ngconstant: {
            options: {
                dest: '<%= build_dir %>/src/app/constant.js',
                name: '<%= ng_appname %>.constant',
                wrap: '<%= __ngModule %>',
                constants: {
                    settings: appConstants
                }
            },
            translation: {
                dest: '<%= build_dir %>/src/app/translations.js',
                name: '<%= ng_appname %>.translations',
                wrap: '<%= __ngModule %>',
                constants: {
                    translations: appTranslations
                }
            }
        },

        /**
         * We read in our `package.json` file so we can access the package name and
         * version. It's already there, so we don't repeat ourselves here.
         */
        pkg: grunt.file.readJSON('package.json'),

        /**
         * The banner is the comment that is placed at the top of our compiled
         * source files. It is first processed as a Grunt template, where the `<%=`
         * pairs are evaluated based on this very configuration object.
         */
        meta: {
            banner: '/**\n' +
            ' * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' +
            ' * <%= pkg.homepage %>\n' +
            ' *\n' +
            ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
            ' */\n'
        },

        /**
         * The directories to delete when `grunt clean` is executed.
         */
        clean: [
            '<%= build_dir %>',
            '<%= compile_dir %>',
            '<%= doc_dir %>',
            '<%= coverage_dir %>'
        ],

        /**
         * The `copy` task just copies files from A to B. We use it here to copy
         * our project assets (images, fonts, etc.) and javascripts into
         * `build_dir`, and then to copy the assets to `compile_dir`.
         */
        copy: {

            // copies all files from /src/assets into /build/assets
            build_app_assets: {
                files: [
                    {
                        src: ['**'],
                        dest: '<%= build_dir %>/assets/',
                        cwd: 'src/assets',
                        expand: true
                    }
                ]
            },
            // copies vendor assets defined in build.config.js
            build_vendor_assets: {
                files: [
                    {
                        src: ['<%= vendor_files.assets %>'],
                        dest: '<%= build_dir %>/assets/',
                        cwd: '.',
                        expand: true,
                        flatten: true
                    }
                ]
            },
            // copies all application js files to build folder
            build_appjs: {
                files: [
                    {
                        src: ['<%= app_files.js %>'],
                        dest: '<%= build_dir %>/',
                        cwd: '.',
                        expand: true
                    }
                ]
            },
            // copies all application translation files to build folder
            build_translationsjson: {
                files: [
                    {
                        src: ['<%= translations_files.json %>'],
                        dest: '<%= build_dir %>/translations',
                        cwd: '.',
                        expand: true,
                        flatten: true
                    }
                ]
            },
            // copies all vendor js files to build folder
            build_vendorjs: {
                files: [
                    {
                        src: ['<%= vendor_files.js %>'],
                        dest: '<%= build_dir %>/',
                        cwd: '.',
                        expand: true
                    }
                ]
            },
            // copies all vendor css files to build folder
            build_vendorcss: {
                files: [
                    {
                        src: ['<%= vendor_files.css %>'],
                        dest: '<%= build_dir %>',
                        cwd: '.',
                        expand: true
                    }
                ]
            },
            // copies all assets from build dir to compile dir
            compile_assets: {
                files: [
                    {
                        src: ['**'],
                        dest: '<%= compile_dir %>/assets',
                        cwd: '<%= build_dir %>/assets',
                        expand: true
                    },
                    {
                        src: ['**'],
                        dest: '<%= compile_dir %>/translations',
                        cwd: '<%= build_dir %>/translations',
                        expand: true
                    }
                ]
            }

        },

        /**
         * `grunt concat` concatenates multiple source files into a single file.
         */
        concat: {
            /**
             * The `build_css` target concatenates compiled CSS and vendor CSS
             * together.
             */
            build_css: {
                src: [
                    '<%= vendor_files.css %>',
                    '<%= sass.build.dest %>'
                ],
                dest: '<%= sass.build.dest %>'
            },
            /**
             * The `compile_js` target is the concatenation of our application source
             * code and all specified vendor source code into a single file.
             */
            compile_js: {
                options: {
                    banner: '<%= meta.banner %>'
                },
                src: [
                    '<%= vendor_files.js %>',
                    'module.prefix',
                    '<%= build_dir %>/src/**/*.js',
                    '<%= html2js.app.dest %>',
                    'module.suffix'
                ],
                dest: '<%= compile_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.js'
            },
            compile_css: {
                options: {
                    banner: '<%= meta.banner %>'
                },
                src: [
                    '<%= vendor_files.css %>'
                ],
                dest: '<%= compile_dir %>/assets/<%= pkg.name %>-vendor-<%= pkg.version %>.css'
            }
        },

        /**
         * Increments the version number, etc.
         */
        bump: {
            options: {
                files: [
                    'package.json',
                    'bower.json'
                ],
                commit: true,
                commitMessage: 'chore(release): v%VERSION%',
                commitFiles: [
                    'package.json',
                    'bower.json'
                ],
                createTag: true,
                tagName: 'v%VERSION%',
                tagMessage: 'Version %VERSION%',
                push: true,
                pushTo: 'origin'
            }
        },
        /**
         * `ngAnnotate` annotates the sources before minifying. That is, it allows us
         * to code without the array syntax.
         */
        ngAnnotate: {
            compile: {
                files: [
                    {
                        src: ['<%= app_files.js %>'],
                        cwd: '<%= build_dir %>',
                        dest: '<%= build_dir %>',
                        expand: true
                    }
                ]
            }
        },

        /**
         * `connect` is modular web server that allow us to serve static files (helps with testing/development)
         */
        connect: {
            server: {
                proxies: [
                    {
                        context: '/api',
                        host: 'localhost',
                        port: 3000,
                        changeOrigin: true
                    }
                    // And more servers here
                ],
                options: {
                    port: process.env.JAF_SERVER_PORT || 9000,
                    hostname: '0.0.0.0',
                    base: '<%= build_dir %>',
                    open: false,
                    middleware: function (connect, options) {
                        var proxy = require('grunt-connect-proxy/lib/utils').proxyRequest;
                        return [
                            // Include the proxy first
                            proxy,
                            // Serve static files.
                            connect.static(options.base[0]),
                            // Make empty directories browsable.
                            connect.directory(options.base[0])
                        ];
                    }
                }
            }
        },

        /**
         * HTML2JS is a Grunt plugin that takes all of your template files and
         * places them into JavaScript files as strings that are added to
         * AngularJS's template cache. This means that the templates too become
         * part of the initial payload as one JavaScript file. Neat!
         */
        html2js: {
            /**
             * These are the templates from `src/app`.
             */
            app: {
                options: {
                    base: 'src/app'
                },
                src: ['<%= app_files.atpl %>'],
                dest: '<%= build_dir %>/templates-app.js'
            }
        },

        /**
         * `jshint` defines the rules of our linter as well as which files we
         * should check. This file, all javascript sources, and all our unit tests
         * are linted based on the policies listed in `options`. But we can also
         * specify exclusionary patterns by prefixing them with an exclamation
         * point (!); this is useful when code comes from a third party but is
         * nonetheless inside `src/`.
         */
        jshint: {
            src: [
                '<%= app_files.js %>'
            ],
            gruntfile: [
                'Gruntfile.js'
            ],
            options: {
                'jshintrc': '.jshintrc'
            }
        },

        /**
         * `sass` handles our SASS compilation and uglification automatically.
         * Only our `screen.scss` file is included in compilation; all other files
         * must be imported from this file.
         */
        sass: {
            build: {
                files: {
                    '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css': '<%= app_files.sass %>'
                }
            },
            compile: {
                src: ['<%= sass.build.dest %>'],
                dest: '<%= sass.build.dest %>',
                options: {
                    cleancss: true
                }
            }
        },

        /**
         * The `index` task compiles the `old_index.html` file as a Grunt template. CSS
         * and JS files co-exist here but they get split apart later.
         */
        index: {

            /**
             * During development, we don't want to have wait for compilation,
             * concatenation, minification, etc. So to avoid these steps, we simply
             * add all script files directly to the `<head>` of `old_index.html`. The
             * `src` property contains the list of included files.
             */
            build: {
                dir: '<%= build_dir %>',
                src: [
                    '<%= vendor_files.js %>',
                    '<%= build_dir %>/src/**/*.js',
                    '<%= html2js.app.dest %>',
                    '<%= vendor_files.css %>',
                    '<%= build_dir %>/assets/*.css'
                ]
            },

            /**
             * When it is time to have a completely compiled application, we can
             * alter the above to include only a single JavaScript and a single CSS
             * file. Now we're back!
             */
            compile: {
                dir: '<%= compile_dir %>',
                src: [
                    '<%= concat.compile_js.dest %>',
                    '<%= concat.compile_css.dest %>',
                    '<%= compile_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css'

                ]
            }
        },

        /**
         * And for rapid development, we have a watch set up that checks to see if
         * any of the files listed below change, and then to execute the listed
         * tasks when they do. This just saves us from having to type "grunt" into
         * the command-line every time we want to see what we're working on; we can
         * instead just leave "grunt watch" running in a background terminal. Set it
         * and forget it, as Ron Popeil used to tell us.
         *
         * But we don't need the same thing to happen for all the files.
         */
        delta: {
            /**
             * By default, we want the Live Reload to work for all tasks; this is
             * overridden in some tasks (like this file) where browser resources are
             * unaffected. It runs by default on port 35729, which your browser
             * plugin should auto-detect.
             */
            options: {
                livereload: true
            },

            /**
             * When the Gruntfile changes, we just want to lint it. In fact, when
             * your Gruntfile changes, it will automatically be reloaded!
             */
            gruntfile: {
                files: 'Gruntfile.js',
                tasks: ['jshint:gruntfile'],
                options: {
                    livereload: false
                }
            },

            /**
             * When our JavaScript source files change, we want to run lint them and
             * run our unit tests.
             */
            jssrc: {
                files: [
                    '<%= app_files.js %>'
                ],
                tasks: ['jshint:src', 'copy:build_appjs']
            },

            /**
             * When html files changes, we need to recompile it into js files. We do index:build just for good measure (just in case you change it)
             */
            html: {
                files: [
                    'src/**/*.html'
                ],
                tasks: ['html2js', 'index:build']
            },

            /**
             * When our JavaScript JSON config files change, we want to rebuild the angular constants and copy output
             */
            jsonconfig: {
                files: [
                    '<%= config_files.json %>'
                ],
                tasks: ['ngconstant', 'copy:build_appjs']
            },

            /**
             * When assets are changed, copy them. Note that this will *not* copy new
             * files, so this is probably not very useful.
             */
            assets: {
                files: [
                    'src/assets/**/*'
                ],
                tasks: ['copy:build_app_assets']
            },

            /**
             * When the CSS files change, we need to compile and minify them.
             */
            sass: {
                files: ['src/**/*.scss'],
                tasks: ['sass:build']
            },

            /**
             * When the build.config.js change, we need to build from scratch.
             */
            build_config: {
                files: ['./build.config.js'],
                tasks: ['build']
            },

            /**
             * When the translation files change, rebuild constants.
             */
            translations: {
                files: ['config/translations/*.json'],
                tasks: ['copy:build_translationsjson']
            }

        },

        /**
         * Minify the sources!
         */
        uglify: {
            compile: {
                options: {
                    banner: '<%= meta.banner %>'
                },
                files: {
                    '<%= concat.compile_js.dest %>': '<%= concat.compile_js.dest %>'
                }
            }
        },

        hub: {
            all: {
                options: {
                    allowSelf: true
                },
                src: ['Gruntfile.js'],
                tasks: ['watch']
            }
        },
        ngdocs: {
            options: {
                dest: '<%= doc_dir %>',
                scripts: ['angular.js'],
                html5Mode: false,
                startPage: '/index.html',
                title: "Just Arrived Frontend Docs",
                image: "src/assets/images/ui/logo.png",
                inlinePartials: true,
                bestMatch: true
            },
            all: ['src/**/*.js']
        }
    };

    grunt.initConfig(grunt.util._.extend(taskConfig, buildConfig));


    /**
     * The default task is to build and compile.
     */
    grunt.registerTask('default', ['build', 'compile']);

    /**
     * In order to make it safe to just compile or copy *only* what was changed,
     * we need to ensure we are starting from a clean, fresh build. So we rename
     * the `watch` task to `delta` (that's why the configuration var above is
     * `delta`) and then add a new task called `watch` that does a clean build
     * before watching for changes.
     */

    grunt.renameTask('watch', 'delta');
    grunt.registerTask('watch', [
        'configureProxies:server', 'connect', 'build', 'delta'
    ]);

    /**
     * The `build` task gets your app ready to run for development and testing.
     */
    grunt.registerTask('build', [
        'clean', 'jshint', 'sass:build', 'html2js', 'ngconstant',
        'copy:build_app_assets', 'copy:build_vendor_assets',
        'copy:build_appjs', 'copy:build_translationsjson', 'copy:build_vendorcss', 'copy:build_vendorjs', 'index:build',
        'ngdocs'

    ]);

    /**
     * The `compile` task gets your app ready for deployment by concatenating and
     * minifying your code.
     */
    grunt.registerTask('compile', [
        'copy:compile_assets', 'ngAnnotate', 'concat:compile_js', 'concat:compile_css', 'index:compile'
    ]);

    /**
     * A utility function to get all app JavaScript sources.
     */
    function filterForJS(files) {
        return files.filter(function (file) {
            return file.match(/\.js$/);
        });
    }

    /**
     * A utility function to get all app CSS sources.
     */
    function filterForCSS(files) {
        return files.filter(function (file) {
            return file.match(/\.css$/);
        });
    }

    /**
     * The index.html template includes the stylesheet and javascript sources
     * based on dynamic names calculated in this Gruntfile. This task assembles
     * the list into variables for the template to use and then runs the
     * compilation.
     */
    grunt.registerMultiTask('index', 'Process index.html template', function () {
        var dirRE, jsFiles, cssFiles, appjs;

        dirRE = new RegExp('^(' + grunt.config('build_dir') + '|' + grunt.config('compile_dir') + ')\/', 'g');

        jsFiles = filterForJS(this.filesSrc).map(function (file) {
            return file.replace(dirRE, '');
        });

        cssFiles = filterForCSS(this.filesSrc).map(function (file) {
            return file.replace(dirRE, '');
        });

        grunt.file.copy('src/index.html', this.data.dir + '/index.html', {
            process: function (contents) {
                return grunt.template.process(contents, {
                    data: {
                        scripts: jsFiles,
                        styles: cssFiles,
                        version: grunt.config('pkg.version')
                    }
                });
            }
        });
    });

};