var lrSnippet = require('connect-livereload')(); var mountFolder = function (connect, dir) { return connect.static(require('path').resolve(dir)); }; /*global module:false*/ module.exports = function (grunt) { require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); /** * Load in our build configuration file. */ var userConfig = require( './build.config.js' ); // Project configuration. var taskConfig = { // Metadata. pkg: grunt.file.readJSON('package.json'), meta: { banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n', }, clean: [ '<%= build_dir %>', '<%= compile_dir %>' ], copy: { build_app_assets: { files: [ { src: [ '**' ], dest: '<%= build_dir %>/assets/', cwd: 'src/assets', expand: true } ] }, build_vendor_assets: { files: [ { src: [ '<%= vendor_files.assets %>' ], dest: '<%= build_dir %>/assets/', cwd: '.', expand: true, flatten: true } ] }, build_appjs: { files: [ { src: [ '<%= app_files.js %>' ], dest: '<%= build_dir %>/', cwd: '.', expand: true } ] }, build_vendorjs: { files: [ { src: [ '<%= vendor_files.js %>' ], dest: '<%= build_dir %>/', cwd: '.', expand: true } ] }, build_vendorcss: { files: [ { src: [ '<%= vendor_files.css %>' ], dest: '<%= build_dir %>', cwd: '.', expand: true } ] }, build_vendorassets: { files: [ { src: [ '<%= vendor_files.assets %>' ], dest: '<%= build_dir %>', cwd: '.', expand: true } ] }, compile_assets: { files: [ { src: [ '**' ], dest: '<%= compile_dir %>/assets', cwd: '<%= build_dir %>/assets', expand: true } ] } }, // JS Tasks concat: { /** * The `build_css` target concatenates compiled CSS and vendor CSS * together. */ build_css: { src: [ '<%= vendor_files.css %>', '<%= recess.build.dest %>' ], dest: '<%= recess.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 %>', '<%= html2js.common.dest %>', 'module.suffix' ], dest: '<%= compile_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.js' } }, /** * Compile Coffee scripts */ coffee: { source: { options: { bare: true }, expand: true, cwd: '.', src: [ '<%= app_files.coffee %>' ], dest: '<%= build_dir %>', ext: '.js' } }, /** * `ng-min` annotates the sources before minifying. That is, it allows us * to code without the array syntax. */ ngmin: { compile: { files: [ { src: [ '<%= app_files.js %>' ], cwd: '<%= build_dir %>', dest: '<%= build_dir %>', expand: true } ] } }, /** * Minify the sources! */ uglify: { compile: { options: { banner: '<%= meta.banner %>' }, files: { '<%= concat.compile_js.dest %>': '<%= concat.compile_js.dest %>' } } }, // Style tasks /** * Minify CSS */ cssmin: { combine: { files: { 'target/<%= pkg.name %>-combined.css': ['src/css/*.css'] } } }, /** * Compile LESS templates to css */ recess: { build: { src: [ '<%= app_files.less %>' ], dest: '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css', options: { compile: true, compress: false, noUnderscores: false, noIDs: false, zeroUnits: false } }, compile: { src: [ '<%= recess.build.dest %>' ], dest: '<%= recess.build.dest %>', options: { compile: true, compress: true, noUnderscores: false, noIDs: false, zeroUnits: false } } }, /** * `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 %>' ], test: [ '<%= app_files.jsunit %>' ], gruntfile: [ 'Gruntfile.js' ], options: { curly: true, immed: true, newcap: true, noarg: true, sub: true, boss: true, eqnull: true, globals: { "angular": true, "document": true, "dlux": true, "_": true, "require": true, "define": true, "requirejs": true, "describe": true, "expect": true, "it": true } } }, // Coffe linting coffeelint: { src: { files: { src: [ '<%= app_files.coffee %>' ] } }, test: { files: { src: [ '<%= app_files.coffeeunit %>' ] } } }, /** * 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' }, /** * These are the templates from `src/common`. */ common: { options: { base: 'src/common' }, src: [ '<%= app_files.ctpl %>' ], dest: '<%= build_dir %>/templates-common.js' } }, /** * The Karma configurations. */ karma: { options: { configFile: '<%= build_dir %>/karma-unit.js' }, unit: { runnerPort: 9101, background: true }, continuous: { singleRun: true } }, /** * The `index` task compiles the `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 `` of `index.html`. The * `src` property contains the list of included files. */ build: { dir: '<%= build_dir %>', src: [ '<%= vendor_files.js %>', '<%= build_dir %>/src/**/*.js', '<%= html2js.common.dest %>', '<%= html2js.app.dest %>', '<%= vendor_files.css %>', '<%= recess.build.dest %>' ] }, /** * 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 %>', '<%= vendor_files.css %>', '<%= recess.compile.dest %>' ] } }, /** * This task compiles the karma template so that changes to its file array * don't have to be managed manually. */ karmaconfig: { unit: { dir: '<%= build_dir %>', src: [ '<%= vendor_files.js %>', '<%= html2js.app.dest %>', '<%= html2js.common.dest %>', '<%= test_files.js %>' ] } }, connect: { livereload: { options: { port: 9000, hostname: '0.0.0.0', middleware: function (connect) { return [ mountFolder(connect, 'build'), lrSnippet ]; } } }, dev: { options: { hostname: '0.0.0.0', port: 9000, base: 'build' } }, prod: { options: { port: 9001, base: 'bin', keepalive: true } } }, open: { dev: { path: 'http://127.0.0.1:9000/' }, prod: { path: 'http://127.0.0.1:9001/' } }, 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 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_assets' ] }, /** * When index.html changes, we need to compile it. */ html: { files: [ '<%= app_files.html %>' ], tasks: [ 'index:build' ] }, /** * When our templates change, we only rewrite the template cache. */ tpls: { files: [ '<%= app_files.atpl %>', '<%= app_files.ctpl %>' ], tasks: [ 'html2js' ] }, /** * When the CSS files change, we need to compile and minify them. */ less: { files: [ 'src/**/*.less' ], tasks: [ 'build_styles' ] }, /** * When a JavaScript unit test file changes, we only want to lint it and * run the unit tests. We don't want to do any live reloading. */ jsunit: { files: [ '<%= app_files.jsunit %>' ], tasks: [ 'jshint:test', ], options: { livereload: false } }, /** * When a CoffeeScript unit test file changes, we only want to lint it and * run the unit tests. We don't want to do any live reloading. */ coffeeunit: { files: [ '<%= app_files.coffeeunit %>' ], tasks: [ 'coffeelint:test' ], options: { livereload: false } } } }; grunt.initConfig( grunt.util._.extend( taskConfig, userConfig ) ); /** * 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', [ 'build', 'delta' ] ); // task to do both vendor less compile and css concat. grunt.registerTask('build_styles', ['recess:build', 'concat:build_css']); grunt.registerTask('live', ['build', 'connect:dev', 'open:dev', 'delta']); /** * The default task is to build and compile. */ grunt.registerTask( 'default', [ 'build', 'compile' ] ); /** * The `build` task gets your app ready to run for development and testing. */ grunt.registerTask( 'build', [ 'clean', 'html2js', 'coffeelint', 'coffee', 'build_styles', 'copy:build_app_assets', 'copy:build_vendor_assets', 'copy:build_appjs', 'copy:build_vendorjs', 'index:build' ]); // 'copy:build_assets', 'copy:build_appjs', 'copy:build_vendorjs', 'copy:build_vendorcss', 'copy:build_vendorassets', /** * The `compile` task gets your app ready for deployment by concatenating and * minifying your code. */ grunt.registerTask( 'compile', [ 'recess:compile', 'copy:compile_assets', 'ngmin', 'concat:compile_js', 'uglify', '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 = new RegExp( '^('+grunt.config('build_dir')+'|'+grunt.config('compile_dir')+')\/', 'g' ); var jsFiles = filterForJS( this.filesSrc ).map( function ( file ) { return file.replace( dirRE, '' ); }); var 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, path ) { return grunt.template.process( contents, { data: { scripts: jsFiles, styles: cssFiles, version: grunt.config( 'pkg.version' ) } }); } }); }); /** * In order to avoid having to specify manually the files needed for karma to * run, we use grunt to manage the list for us. The `karma/*` files are * compiled as grunt templates for use by Karma. Yay! */ grunt.registerMultiTask( 'karmaconfig', 'Process karma config templates', function () { var jsFiles = filterForJS( this.filesSrc ); grunt.file.copy( 'karma/karma-unit.tpl.js', grunt.config( 'build_dir' ) + '/karma-unit.js', { process: function ( contents, path ) { return grunt.template.process( contents, { data: { scripts: jsFiles } }); } }); }); };