Example gruntfile using ngmin for pre-minification of angular apps
module.exports = (grunt)-> | |
# Run `grunt server` for live-reloading development environment | |
#grunt.registerTask('server', [ 'build', 'livereload-start', 'karma:background', 'express', 'regarde' ]) | |
grunt.registerTask('server', [ 'build', 'express', 'watch' ]) | |
# Run `grunt test` (used by `npm test`) for continuous integration (e.g. Travis) | |
grunt.registerTask('test', [ 'build', 'karma:unit' ]) | |
# Run `grunt test:browsers` for real-world browser testing | |
grunt.registerTask('test:browsers', [ 'karma:browsers', 'server' ]) | |
# Clean, validate & compile web-accessible resources | |
grunt.registerTask('build', [ 'clean', 'copy', 'ngtemplates', 'compass:prod' ]) | |
# Optimize pre-built, web-accessible resources for production, primarily `usemin` | |
grunt.registerTask('optimize', [ 'useminPrepare', 'concat', 'ngmin', 'uglify', 'cssmin', 'rev', 'usemin' ]) | |
# Deploy shortcut | |
grunt.registerTask('make', ['build', 'optimize']); | |
# Configuration | |
grunt.config.init | |
# Directory CONSTANTS (see what I did there?) | |
BUILD_DIR: 'build/' | |
CLIENT_DIR: 'app/' | |
COMPONENTS_DIR: 'components/' | |
SERVER_DIR: '../' | |
# Glob CONSTANTS | |
ALL_FILES: '**/*' | |
CSS_FILES: '**/*.css' | |
HTML_FILES: '{scripts,views}/**/*.html' | |
IMG_FILES: '**/*.{png,gif,jpg,jpeg}' | |
JS_FILES: 'scripts/**/*.js' | |
SASS_FILES: 'styles/main.scss' | |
LESS_FILES: '**/*.less' | |
# Wipe the `build` directory | |
clean: | |
build: '<%= BUILD_DIR %>' | |
copy: | |
# App images from Bower `components` & `client` | |
# images: | |
# files: [ | |
# expand: true | |
# cwd: '<%= CLIENT_DIR %>' | |
# src: '<%= IMG_FILES %>' | |
# dest: '<%= BUILD_DIR %>' | |
# ] | |
# Copy `client` -> `build`, as resources are served from `build` | |
client: | |
files: [ | |
expand: true | |
cwd: '<%= CLIENT_DIR %>' | |
src: '<%= ALL_FILES %>' | |
dest: '<%= BUILD_DIR %>' | |
] | |
# Make components HTTP-accessible | |
# components: | |
# files: | |
# '<%= BUILD_DIR %>': '<%= COMPONENTS_DIR + ALL_FILES %>' | |
# app (non-Bower) JS in `client` | |
js: | |
files: [ | |
expand: true | |
cwd: '<%= CLIENT_DIR %>' | |
src: '<%= JS_FILES %>' | |
dest: '<%= BUILD_DIR %>' | |
] | |
index: | |
files: | |
'<%= BUILD_DIR %>/index.html': '<%= CLIENT_DIR %>/index.html' | |
# app (non-Bower) HTML in `client` | |
# templates: | |
# files: [ | |
# expand: true | |
# cwd: '<%= CLIENT_DIR %>' | |
# src: '<%= HTML_FILES %>' | |
# dest: '<%= BUILD_DIR %>' | |
# ] | |
# Validate app `client` and `server` JS | |
jshint: | |
# files: [ '<%= SERVER_DIR + JS_FILES %>' | |
# '<%= CLIENT_DIR + JS_FILES %>' ] | |
files: [] | |
options: | |
es5: true | |
laxcomma: true # Common in Express-derived libraries | |
# Browser-based testing | |
karma: | |
options: | |
configFile: 'karma.conf.js' | |
# Used for running tests while the server is running | |
background: | |
background: true | |
singleRun: false | |
# Used for testing site across several browser profiles | |
browsers: | |
browsers: [ 'PhantomJS' ] # 'Chrome', 'ChromeCanary', 'Firefox', 'Opera', 'Safari', 'IE', 'bin/browsers.sh' | |
background: true | |
singleRun: false | |
# Used for one-time validation (e.g. `grunt test`, `npm test`) | |
unit: | |
singleRun: true | |
less: | |
prod: | |
files: | |
"<%= BUILD_DIR %>app/styles/app.css": "<%= CLIENT_DIR %>app/styles/flat-ui.less" | |
# Compile `app.less` -> `app.css` | |
# less: | |
# '<%= BUILD_DIR %>/app/styles/app.css': '<%= CLIENT_DIR %>/app/styles/app.less' | |
# Support live-reloading of all non-Bower resources | |
livereload: | |
options: | |
base: '<%= BUILD_DIR %>' | |
files: '<%= BUILD_DIR + ALL_FILES %>' | |
# Minify app `.css` resources -> `.min.css` | |
# cssmin: | |
# app: | |
# files: | |
# '<%= BUILD_DIR %>/app/styles/app.min.css': ['<%= BUILD_DIR %>/app/styles/app.css'] | |
# Convert Angular `.html` templates to `.js` in the `app` module | |
ngtemplates: | |
ngMaleApp: | |
src: '<%= CLIENT_DIR %>/<%= HTML_FILES %>' | |
dest: '<%= BUILD_DIR %>/scripts/app.templates.js' | |
options: | |
base: '<%= CLIENT_DIR %>' | |
# Ability to run `jshint` without errors terminating the development server | |
parallel: | |
less: [ grunt: true, args: [ 'less' ] ] | |
compass: [ grunt: true, args: [ 'compass' ] ] | |
jshint: [ grunt: true, args: [ 'jshint' ] ] | |
# "watch" distinct types of files and re-prepare accordingly | |
watch: | |
# Any public-facing changes should reload the browser & re-run tests (which may depend on those resources) | |
# build: | |
# files: '<%= BUILD_DIR + ALL_FILES %>' | |
# # tasks: [ 'livereload', 'karma:background:run' ] | |
# tasks: [ 'livereload' ] | |
# Changes to app code should be validated and re-copied to the `build`, triggering `regarde:build` | |
js: | |
files: '<%= CLIENT_DIR + JS_FILES %>' | |
tasks: [ 'copy:js' ] | |
options: | |
livereload:true | |
compass: | |
files: '<%= CLIENT_DIR + SASS_FILES %>' | |
tasks: [ 'parallel:compass' ] | |
options: | |
livereload:true | |
# Changes to server-side code should validate, restart the server, & refresh the browser | |
# server: | |
# files: '<%= SERVER_DIR + ALL_FILES %>' | |
# tasks: [ 'parallel:jshint', 'express', 'livereload' ] | |
# Changes to app templates should re-copy & re-compile them, triggering `regarde:build` | |
templates: | |
files: '<%= CLIENT_DIR + HTML_FILES %>' | |
tasks: [ 'ngtemplates'] | |
options: | |
livereload:true | |
index: | |
files: '<%= CLIENT_DIR %>/index.html' | |
tasks: ['copy:index'] | |
options: | |
livereload:true | |
# Express requires `server.script` to reload from changes | |
express: | |
server: | |
options: | |
script: '<%= SERVER_DIR %>/app.js' | |
# Output for optimized app index | |
usemin: | |
html: '<%= BUILD_DIR %>/index.html' | |
# Input for optimized app index | |
useminPrepare: | |
html: '<%= BUILD_DIR %>/index.html' | |
# Google CDN | |
cdnify: | |
dist: | |
html: [ '<%= BUILD_DIR %>/index.html' ] | |
# replace: | |
# dist: | |
# src: ['<%= BUILD_DIR %>/scripts/male.js'] | |
# dest: '<%= BUILD_DIR %>/scripts/male.js' | |
# replacements: [ | |
# from:'A_DEV_API_KEY' | |
# to:'A_PROD_API_KEY' | |
# ] | |
ngmin: | |
build: | |
src: ['<%= BUILD_DIR %>/scripts/male.js'] | |
dest: '<%= BUILD_DIR %>/scripts/male.js' | |
rev: | |
assets: | |
files: { | |
src: ['<%= BUILD_DIR %>/styles/main.min.css','<%= BUILD_DIR %>/scripts/male.js'] | |
} | |
compass: | |
prod: | |
options: | |
sassDir: '<%= CLIENT_DIR %>/styles', | |
cssDir: '<%= BUILD_DIR %>/styles' | |
# Dependencies | |
grunt.loadNpmTasks('grunt-angular-templates') | |
grunt.loadNpmTasks('grunt-contrib-clean') | |
grunt.loadNpmTasks('grunt-contrib-concat') | |
grunt.loadNpmTasks('grunt-contrib-copy') | |
grunt.loadNpmTasks('grunt-contrib-jshint') | |
grunt.loadNpmTasks('grunt-contrib-less') | |
grunt.loadNpmTasks('grunt-contrib-compass') | |
grunt.loadNpmTasks('grunt-contrib-livereload') | |
grunt.loadNpmTasks('grunt-contrib-cssmin') | |
grunt.loadNpmTasks('grunt-contrib-uglify') | |
grunt.loadNpmTasks('grunt-express-server') | |
grunt.loadNpmTasks('grunt-karma') | |
grunt.loadNpmTasks('grunt-contrib-watch') | |
grunt.loadNpmTasks('grunt-parallel') | |
grunt.loadNpmTasks('grunt-usemin') | |
grunt.loadNpmTasks('grunt-google-cdn') | |
grunt.loadNpmTasks('grunt-text-replace') | |
grunt.loadNpmTasks('grunt-contrib-less') | |
grunt.loadNpmTasks('grunt-ngmin') | |
grunt.loadNpmTasks('grunt-rev') |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment