grunt serve works fine but grunt serve:dist giving strange behaviour - javascript

My app works fine with grunt serve but when I test it with grunt serve:dist and try to load modal which I triggered with button click it shows 'templateUrl' which is attached to $mdDialog.show but never shows controller..
here I'm giving files for reference, Ask me if you require any other files as well.
Gruntfile.js
// Generated on 2016-10-17 using generator-angular-material-fullstack 0.1.2
'use strict';
module.exports = function (grunt) {
var localConfig;
try {
localConfig = require('./server/config/local.env');
} catch(e) {
localConfig = {};
}
// Load grunt tasks automatically, when needed
require('jit-grunt')(grunt, {
express: 'grunt-express-server',
useminPrepare: 'grunt-usemin',
ngtemplates: 'grunt-angular-templates',
cdnify: 'grunt-google-cdn',
protractor: 'grunt-protractor-runner',
buildcontrol: 'grunt-build-control'
});
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
pkg: grunt.file.readJSON('package.json'),
yeoman: {
// configurable paths
client: require('./bower.json').appPath || 'client',
dist: 'dist'
},
express: {
options: {
port: process.env.PORT || 9000
},
dev: {
options: {
script: 'server/app.js',
debug: true
}
},
prod: {
options: {
script: 'dist/server/app.js'
}
}
},
open: {
server: {
url: 'http://localhost:'
}
},
watch: {
injectJS: {
files: [
'/{app,components}/**/*.js',
'!/{app,components}/**/*.spec.js',
'!/{app,components}/**/*.mock.js',
'!/app/app.js'],
tasks: ['injector:scripts']
},
injectCss: {
files: [
'/{app,components}/**/*.css'
],
tasks: ['injector:css']
},
mochaTest: {
files: ['server/**/*.spec.js'],
tasks: ['env:test', 'mochaTest']
},
jsTest: {
files: [
'/{app,components}/**/*.spec.js',
'/{app,components}/**/*.mock.js'
],
tasks: ['newer:jshint:all', 'karma']
},
injectSass: {
files: [
'/{app,components}/**/*.{scss,sass}'],
tasks: ['injector:sass']
},
sass: {
files: [
'/{app,components}/**/*.{scss,sass}'],
tasks: ['sass', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
files: [
'{.tmp,}/{app,components}/**/*.css',
'{.tmp,}/{app,components}/**/*.html',
'{.tmp,}/{app,components}/**/*.js',
'!{.tmp,}{app,components}/**/*.spec.js',
'!{.tmp,}/{app,components}/**/*.mock.js',
'/assets/images/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}',
'/assets/icons/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}',
'/assets/iconsets/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}'
],
options: {
livereload: true
}
},
express: {
files: [
'server/**/*.{js,json}'
],
tasks: ['express:dev', 'wait'],
options: {
livereload: true,
nospawn: true //Without this option specified express won't be reloaded
}
}
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '/.jshintrc',
reporter: require('jshint-stylish')
},
server: {
options: {
jshintrc: 'server/.jshintrc'
},
src: [
'server/**/*.js',
'!server/**/*.spec.js'
]
},
serverTest: {
options: {
jshintrc: 'server/.jshintrc-spec'
},
src: ['server/**/*.spec.js']
},
all: [
'/{app,components}/**/*.js',
'!/{app,components}/**/*.spec.js',
'!/{app,components}/**/*.mock.js'
],
test: {
src: [
'/{app,components}/**/*.spec.js',
'/{app,components}/**/*.mock.js'
]
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'/*',
'!/.git*',
'!/.openshift',
'!/Procfile'
]
}]
},
server: '.tmp'
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/',
src: '{,*/}*.css',
dest: '.tmp/'
}]
}
},
// Debugging with node inspector
'node-inspector': {
custom: {
options: {
'web-host': 'localhost'
}
}
},
// Use nodemon to run server in debug mode with an initial breakpoint
nodemon: {
debug: {
script: 'server/app.js',
options: {
nodeArgs: ['--debug-brk'],
env: {
PORT: process.env.PORT || 9000
},
callback: function (nodemon) {
nodemon.on('log', function (event) {
console.log(event.colour);
});
// opens browser on initial server start
nodemon.on('config:update', function () {
setTimeout(function () {
require('open')('http://localhost:8080/debug?port=5858');
}, 500);
});
}
}
}
},
// Automatically inject Bower components into the app
wiredep: {
target: {
src: '/index.html',
ignorePath: '/',
exclude: ['/json3/', '/es5-shim/']
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'/public/{,*/}*.js',
'/public/{,*/}*.css',
'/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'/public/assets/icons/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'/public/assets/iconsets/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'/public/assets/fonts/*'
]
}
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
html: ['/index.html'],
options: {
dest: '/public'
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['/public/{,*/}*.html'],
css: ['/public/{,*/}*.css'],
js: ['/public/{,*/}*.js'],
options: {
assetsDirs: [
'/public',
'/public/assets/images',
'/public/assets/icons',
'/public/assets/iconsets'
],
// This is so we update image references in our ng-templates
patterns: {
js: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images'],
[/(assets\/icons\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved icons'],
[/(assets\/iconsets\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved iconsets']
]
}
}
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '/assets/images',
src: '{,*/}*.{png,jpg,jpeg,gif}',
dest: '/public/assets/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '/assets/images',
src: '{,*/}*.svg',
dest: '/public/assets/images'
}]
}
},
// Allow the use of non-minsafe AngularJS files. Automatically makes it
// minsafe compatible so Uglify does not destroy the ng references
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat',
src: '**/*.js',
dest: '.tmp/concat'
}]
}
},
// Package all the html partials into a single javascript payload
ngtemplates: {
options: {
// This should be the name of your apps angular module
module: 'testfullstackApp',
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
},
usemin: 'app/app.js'
},
main: {
cwd: '',
src: ['{app,components}/**/*.html'],
dest: '.tmp/templates.js'
},
tmp: {
cwd: '.tmp',
src: ['{app,components}/**/*.html'],
dest: '.tmp/tmp-templates.js'
}
},
// Replace Google CDN references
cdnify: {
dist: {
html: ['/public/*.html']
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [
{
expand: true,
dot: true,
cwd: '',
dest: '/public',
src: [
'*.{ico,png,txt}',
'.htaccess',
'assets/images/{,*/}*.{webp}',
'assets/fonts/**/*',
'assets/icons/**/*',
'assets/iconsets/**/*',
'index.html'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '/public/assets/images',
src: ['generated/*']
},{
expand: true,
dot: true,
cwd: '/bower_components/components-font-awesome/',
src: ['fonts/*.*'],
dest: '/public'
}, {
expand: true,
dest: '',
src: [
'package.json',
'server/**/*'
]
}]
},
styles: {
expand: true,
cwd: '',
dest: '.tmp/',
src: ['{app,components}/**/*.css']
}
},
buildcontrol: {
options: {
dir: 'dist',
commit: true,
push: true,
connectCommits: false,
message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
},
heroku: {
options: {
remote: 'heroku',
branch: 'master'
}
},
openshift: {
options: {
remote: 'openshift',
branch: 'master'
}
}
},
// Run some tasks in parallel to speed up the build process
concurrent: {
server: [
'sass'
],
test: [
'sass',
],
debug: {
tasks: [
'nodemon',
'node-inspector'
],
options: {
logConcurrentOutput: true
}
},
dist: [
'sass',
'imagemin',
'svgmin'
]
},
// Test settings
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
},
mochaTest: {
options: {
reporter: 'spec'
},
src: ['server/**/*.spec.js']
},
protractor: {
options: {
configFile: 'protractor.conf.js'
},
chrome: {
options: {
args: {
browser: 'chrome'
}
}
}
},
env: {
test: {
NODE_ENV: 'test'
},
prod: {
NODE_ENV: 'production'
},
all: localConfig
},
// Compiles Sass to CSS
sass: {
server: {
options: {
loadPath: [
'/bower_components',
'/app',
'/components'
],
compass: false
},
files: {
'.tmp/app/app.css' : '/app/app.scss'
}
}
},
injector: {
options: {
},
// Inject application script files into index.html (doesn't include bower)
scripts: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/', '');
filePath = filePath.replace('/.tmp/', '');
return '';
},
starttag: '',
endtag: ''
},
files: {
'/index.html': [
[
'{.tmp,}/{app,components}/**/*.js',
'!{.tmp,}/app/app.js',
'!{.tmp,}/{app,components}/**/*.spec.js',
'!{.tmp,}/{app,components}/**/*.mock.js'
]
]
}
},
// Inject component scss into app.scss
sass: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/app/', '');
filePath = filePath.replace('/client/components/', '');
return '#import \'' + filePath + '\';';
},
starttag: '// injector',
endtag: '// endinjector'
},
files: {
'/app/app.scss': [
'/{app,components}/**/*.{scss,sass}',
'!/app/app.{scss,sass}'
]
}
},
// Inject component css into index.html
css: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/', '');
filePath = filePath.replace('/.tmp/', '');
return '';
},
starttag: '',
endtag: ''
},
files: {
'/index.html': [
'/{app,components}/**/*.css'
]
}
}
}
});
// Used for delaying livereload until after server has restarted
grunt.registerTask('wait', function () {
grunt.log.ok('Waiting for server reload...');
var done = this.async();
setTimeout(function () {
grunt.log.writeln('Done waiting!');
done();
}, 1500);
});
grunt.registerTask('express-keepalive', 'Keep grunt running', function() {
this.async();
});
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'env:all', 'env:prod', 'express:prod', 'wait', 'open', 'express-keepalive']);
}
if (target === 'debug') {
return grunt.task.run([
'clean:server',
'env:all',
'injector:sass',
'concurrent:server',
'injector',
'wiredep',
'autoprefixer',
'concurrent:debug'
]);
}
grunt.task.run([
'clean:server',
'env:all',
'injector:sass',
'concurrent:server',
'injector',
'wiredep',
'autoprefixer',
'express:dev',
'wait',
'open',
'watch'
]);
});
grunt.registerTask('server', function () {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run(['serve']);
});
grunt.registerTask('test', function(target) {
if (target === 'server') {
return grunt.task.run([
'env:all',
'env:test',
'mochaTest'
]);
}
else if (target === 'client') {
return grunt.task.run([
'clean:server',
'env:all',
'injector:sass',
'concurrent:test',
'injector',
'autoprefixer',
'karma'
]);
}
else if (target === 'e2e') {
return grunt.task.run([
'clean:server',
'env:all',
'env:test',
'injector:sass',
'concurrent:test',
'injector',
'wiredep',
'autoprefixer',
'express:dev',
'protractor'
]);
}
else grunt.task.run([
'test:server',
'test:client'
]);
});
grunt.registerTask('build', [
'clean:dist',
'injector:sass',
'concurrent:dist',
'injector',
'wiredep',
'useminPrepare',
'autoprefixer',
'ngtemplates',
'concat',
'ngAnnotate',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};
the code which triggers the modal show:
$mdDialog.show({
templateUrl: 'app/contacts/contact/contact.html',
controller: 'ContactCtrl',
controllerAs: 'cont',
locals: {user: vm.currentUser, contact: angular.copy(contact)}
})
again it works fine with grunt serve. So what could be the issue with grunt serve:dist. Any issue in code or configuration of grunt ?
Note:
--it does not give any error on console when modal is opened on grunt serve:dist but any console messages doesn't prints out and no function of controller works..

Related

Grunt compass dev and prod

I have an issue with GruntJS + SASS Compass. I've setup dev and prod configs.
For dev css has outputStyle: 'expanded', for prod has outputStyle: 'compressed'. When I'm doing prod - it works like a charm. In console I see
Running "compass:dist" (compass) task
overwrite css/screen.css (0.392s)
Compilation took 0.4s
css compressed like it should be.
But when I'm doing devit shows in console nothing
Running "compass:dev" (compass) task
Running "autoprefixer:dist" (autoprefixer) task
And css still compressed.
There is my Gruntfile.js config:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dev: {
options: {
sassDir: 'sass',
cssDir: 'css',
imagesDir: 'images',
fontsDir: 'fonts',
relativeAssets: true,
boring: true,
outputStyle: 'expanded',
environment: 'development',
raw: 'preferred_syntax = :sass\n'
}
},
dist: {
options: {
sassDir: 'sass',
cssDir: 'css',
imagesDir: 'images',
fontsDir: 'fonts',
relativeAssets: true,
boring: true,
force: true,
bundleExec: true,
outputStyle: 'compressed',
environment: 'production',
raw: 'preferred_syntax = :sass\n'
}
}
},
autoprefixer: {
dist:{
files:{
'css/screen.css':'css/screen.css'
}
}
},
concat: {
dist: {
src: [
'js/vendors/filename.js',
'js/companyname/filename.js'
],
dest: 'js/companyname/main.js'
}
},
jshint: {
all: ['Gruntfile.js'],
beforeconcat: [
'js/src/companyname/app.js',
'js/src/companyname/bar.js'
]
},
uglify: {
options: {
mangle: false
},
prod: {
files: [{
expand: true,
cwd: 'js',
src: [
'vendors/**/*.js',
'companyname/**/*.js'
],
dest: 'js'
}]
}
},
copy: {
main: {
expand: true,
cwd: 'js/src',
src: [
'companyname/**/*.js',
'vendors/**/*.js'
],
dest: 'js/'
}
},
imagemin: {
jpg: {
options: {
optimizationLevel: 8
},
files: [
{
expand: true,
cwd: 'images-src/',
src: ['**/*.jpg'],
dest: 'images/',
ext: '.jpg'
}
]
},
png: {
options: {
optimizationLevel: 8
},
files: [
{
expand: true,
cwd: 'images-src/',
src: ['**/*.png'],
dest: 'images/',
ext: '.png'
}
]
}
},
clean: {
images: {
src: ['images']
}
},
watch: {
compass: {
files: [
'sass/{,*/}*.sass',
'images-src/{,*/}*.{png,jpg,gif}'
],
tasks: [
'compass:dev',
'autoprefixer',
'clean:images',
'imagemin'
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'compass:dev',
'autoprefixer',
'copy',
'concat',
'jshint',
'uglify'
]);
grunt.registerTask('prod', [
'compass:dist',
'autoprefixer',
'copy',
'concat',
'jshint',
'uglify',
'clean:images',
'imagemin'
]);
};
What I'm doing wrong?

You could make two different compass dev's.
compass: {
dev: {
...
force: true
...
},
devWatch: {
... ur original ...
}
}
watch(compass: {tasks: ['compass:devWatch', ...]})
grunt.registerTask('watch', [
'compass:dev',
'watch'
]);
grunt.registerTask('dev', [
'compass:dev'
]);

Working with Grunt and Webpack produces error

I have a gruntfile.js which initialises the webpack.config.js that in turn transpiles my ES6 code. The files are copied correctly, however the transpiling fails and emits the following error in the console:
ERROR in Loader /Users/dejimeji/Documents/Sites/incentive/incentive_web/node_modules/babel/index.js?{"
presets":["es2015"]} didn't return a function
# multi main
gruntfile.js
module.exports = function(grunt) {
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
webpack: {
options: webpackConfig,
"build-dev": {
devtool: "sourcemap",
debug: true,
}
},
uglify: {
dist: {
src: "assets/js/transpiled/app.es6.js",
dest: "dist/assets/js/app.min.js"
}
},
cssmin: {
dist: {
src: ["assets/css/custom/main.css"],
dest: "dist/assets/css/main.min.css"
}
},
sass: {
options: {
sourceMap: false,
outputStyle: 'compressed'
},
dist: {
files: {
'assets/css/custom/main.css': 'assets/sass/modules.scss'
}
}
},
watch: {
js: {
files: ['assets/**/*.js'],
tasks: ['babel', 'uglify', 'clean'],
options: {
livereload: true,
}
},
css: {
files: ['assets/css/**/*.scss', 'assets/css/**/*.css'],
tasks: ['sass', 'cssmin'],
options: {
livereload: true,
}
}
},
copy: {
jquery: {
files: [{
cwd: 'assets/frameworks/jquery/dist/',
src: ['jquery.min.js'],
dest: 'dist/assets/js/',
expand: true,
filter: 'isFile'
}]
},
jqueryui: {
files: [{
cwd: 'assets/frameworks/jqueryui/',
src: ['jquery-ui.min.js', 'images/'],
dest: 'dist/assets/js/',
expand: true,
filter: 'isFile'
}]
},
bootstrapjs: {
files: [{
cwd: 'assets/frameworks/bootstrap-4.0.0-alpha.4/dist/js/',
src: ['bootstrap.min.js'],
dest: 'dist/assets/js/',
expand: true,
filter: 'isFile'
}]
},
bootstrapcss: {
files: [{
cwd: 'assets/frameworks/bootstrap-4.0.0-alpha.4/dist/css/',
src: ['bootstrap.min.css', 'responsive.css'],
dest: 'dist/assets/css/',
expand: true,
filter: 'isFile'
}]
}
},
clean: {
dist: {
src: ['assets/js/transpiled']
}
}
});
grunt.loadNpmTasks("grunt-webpack");
grunt.loadNpmTasks("grunt-babel");
grunt.loadNpmTasks("grunt-sass");
grunt.loadNpmTasks("grunt-contrib-concat");
grunt.loadNpmTasks("grunt-contrib-connect");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask("default", ["babel", "uglify", "sass", "cssmin", "copy", "clean", "watch"]);
grunt.registerTask("dist", ["babel", "uglify", "sass", "cssmin", "copy", "clean", "watch"]);
grunt.registerTask("babes", ["babel"]);
grunt.registerTask("tupac", ["webpack"]);
}
webpack.config.js
var path = require("path"),
watchBabel = require("watch-babel"),
srcJsDir = "./assets/js/custom/",
srcDestJsDir = "./dist/assets/js/",
options = { glob: "src/*.js" },
watcher = watchBabel(srcJsDir, srcDestJsDir, options);
watcher.on("ready", function() {
console.log("ready");
}).on("success", function(filepath) {
console.log("Transpiled ", filepath);
}).on("failure", function(filepath, e) {
console.log("Failed to transpile", filepath, "(Error: ", e);
}).on("delete", function(filepath) {
console.log("Deleted file", filepath);
});
module.exports = {
entry: [srcJsDir + "app.js"],
output: {
path: srcDestJsDir,
filename: "app.tr.js"
},
watch: true,
devServer: {
inline: true,
port: 8000
},
module: {
loaders: [{
test: /\.js$/,
exclude: "/node_modules/",
loader: ['babel'],
query: {
presets: ['es2015']
}
}]
},
resolveLoader: {
root: path.join(__dirname, 'node_modules/')
}
};
I suspect its the setting "presets: ['es2015']", however dont know where im going wrong. Any help is appreciated.

templateUrl is not working after minification

I have a website that i built with yeoman angular-fullstack. I am trying to minify the project and for the most part it works. The only issue I have is I have a popup dialog that isnt working. I have narrowed the problem down to the templateUrl command when calling on the material dialog.
controller:
function openLoginDialog(ev) {
$mdDialog.show({
controller: 'loginCtrl',
templateUrl: '../../Dialogs/loginDialog/loginDialog.html',
targetEvent: ev,
locals: {
createAccount: false,
charterID: null
},
clickOutsideToClose: true
});
}
The application is also using grunt. I belive the problem is the templateUrl's path no longer exists due to the minification. I can not however, figure out how to get around this issue and have been banging my head on a wall. I have attempted to use templateCache, but there is no way to inject all the html into the cache. I would have to copy and paste it into a javascript file and that is not maintainable. I attempted to use the script tags like so:
<script type="text/ng-template" id="loginDialogId.tpl">
<!---- HTML CONTENT ---->
</script>
and then call the file byt templateCahce.get('loginDialogId'); but that did not work. I have a feeling I have to do something in the grunt file with ngTemplate but I have no idea how to do it and I cannot find any documentation that makes sense. Any help would be greatly appreciated!
Here is the grunt file:
// Generated on 2016-06-17 using generator-angular-fullstack 3.7.5
'use strict';
module.exports = function(grunt) {
var localConfig;
try {
localConfig = require('./server/config/local.env');
} catch(e) {
localConfig = {};
}
// Load grunt tasks automatically, when needed
require('jit-grunt')(grunt, {
express: 'grunt-express-server',
useminPrepare: 'grunt-usemin',
ngtemplates: 'grunt-angular-templates',
cdnify: 'grunt-google-cdn',
protractor: 'grunt-protractor-runner',
buildcontrol: 'grunt-build-control',
istanbul_check_coverage: 'grunt-mocha-istanbul',
ngconstant: 'grunt-ng-constant'
});
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
pkg: grunt.file.readJSON('package.json'),
yeoman: {
// configurable paths
client: require('./bower.json').appPath || 'client',
server: 'server',
dist: 'dist'
},
express: {
options: {
port: process.env.PORT || 9000
},
dev: {
options: {
script: '<%= yeoman.server %>',
debug: true
}
},
prod: {
options: {
script: '<%= yeoman.dist %>/<%= yeoman.server %>'
}
}
},
open: {
server: {
url: 'http://localhost:<%= express.options.port %>'
}
},
watch: {
babel: {
files: ['<%= yeoman.client %>/{app,components,Dialogs,services}/**/!(*.spec|*.mock).js'],
tasks: ['newer:babel:client']
},
ngconstant: {
files: ['<%= yeoman.server %>/config/environment/shared.js'],
tasks: ['ngconstant']
},
injectJS: {
files: [
'<%= yeoman.client %>/{app,components,Dialogs,services}/**/!(*.spec|*.mock).js',
'!<%= yeoman.client %>/app/app.js'
],
tasks: ['injector:scripts']
},
injectCss: {
files: ['<%= yeoman.client %>/{app,components,Dialogs,services}/**/*.css'],
tasks: ['injector:css']
},
mochaTest: {
files: ['<%= yeoman.server %>/**/*.{spec,integration}.js'],
tasks: ['env:test', 'mochaTest']
},
jsTest: {
files: ['<%= yeoman.client %>/{app,components,Dialogs,services}/**/*.{spec,mock}.js'],
tasks: ['newer:jshint:all', 'wiredep:test', 'karma']
},
gruntfile: {
files: ['Gruntfile.js']
},
livereload: {
files: [
'{.tmp,<%= yeoman.client %>}/{app,components,Dialogs,services}/**/*.{css,html}',
'{.tmp,<%= yeoman.client %>}/{app,components,Dialogs,services}/**/!(*.spec|*.mock).js',
'<%= yeoman.client %>/assets/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}'
],
options: {
livereload: true
}
},
express: {
files: ['<%= yeoman.server %>/**/*.{js,json}'],
tasks: ['express:dev', 'wait'],
options: {
livereload: true,
spawn: false //Without this option specified express won't be reloaded
}
},
bower: {
files: ['bower.json'],
tasks: ['wiredep']
}
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '<%= yeoman.client %>/.jshintrc',
reporter: require('jshint-stylish')
},
server: {
options: {
jshintrc: '<%= yeoman.server %>/.jshintrc'
},
src: ['<%= yeoman.server %>/**/!(*.spec|*.integration).js']
},
serverTest: {
options: {
jshintrc: '<%= yeoman.server %>/.jshintrc-spec'
},
src: ['<%= yeoman.server %>/**/*.{spec,integration}.js']
},
all: ['<%= yeoman.client %>/{app,components,Dialogs,services}/**/!(*.spec|*.mock|app.constant).js'],
test: {
src: ['<%= yeoman.client %>/{app,components,Dialogs,services}/**/*.{spec,mock}.js']
}
},
jscs: {
options: {
config: ".jscsrc"
},
main: {
files: {
src: [
'<%= yeoman.client %>/app/**/*.js',
'<%= yeoman.server %>/**/*.js'
]
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/!(.git*|.openshift|Procfile)**'
]
}]
},
server: '.tmp'
},
// Add vendor prefixed styles
postcss: {
options: {
map: true,
processors: [
require('autoprefixer')({browsers: ['last 2 version']})
]
},
dist: {
files: [{
expand: true,
cwd: '.tmp/',
src: '{,*/}*.css',
dest: '.tmp/'
}]
}
},
// Debugging with node inspector
'node-inspector': {
custom: {
options: {
'web-host': 'localhost'
}
}
},
// Use nodemon to run server in debug mode with an initial breakpoint
nodemon: {
debug: {
script: '<%= yeoman.server %>',
options: {
nodeArgs: ['--debug-brk'],
env: {
PORT: process.env.PORT || 9000
},
callback: function(nodemon) {
nodemon.on('log', function(event) {
console.log(event.colour);
});
// opens browser on initial server start
nodemon.on('config:update', function() {
setTimeout(function() {
require('open')('http://localhost:8080/debug?port=5858');
}, 500);
});
}
}
}
},
// Automatically inject Bower components into the app and karma.conf.js
wiredep: {
options: {
exclude: [
/bootstrap.js/,
'/json3/',
'/es5-shim/'
]
},
client: {
src: '<%= yeoman.client %>/index.html',
ignorePath: '<%= yeoman.client %>/'
},
test: {
src: './karma.conf.js',
devDependencies: true
}
},
// Renames files for browser caching purposes
filerev: {
dist: {
src: [
'<%= yeoman.dist %>/<%= yeoman.client %>/!(bower_components){,*/}*.{js,css}',
'<%= yeoman.dist %>/<%= yeoman.client %>/assets/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
html: ['<%= yeoman.client %>/index.html'],
options: {
dest: '<%= yeoman.dist %>/<%= yeoman.client %>'
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/<%= yeoman.client %>/{,!(bower_components)/**/}*.html'],
css: ['<%= yeoman.dist %>/<%= yeoman.client %>/!(bower_components){,*/}*.css'],
js: ['<%= yeoman.dist %>/<%= yeoman.client %>/!(bower_components){,*/}*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>/<%= yeoman.client %>',
'<%= yeoman.dist %>/<%= yeoman.client %>/assets'
],
// This is so we update image references in our ng-templates
patterns: {
css: [
[/(assets\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the CSS to reference our revved images']
],
js: [
[/(assets\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
]
}
}
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.client %>/assets',
src: '{,*/}*.{png,jpg,jpeg,gif,svg}',
dest: '<%= yeoman.dist %>/<%= yeoman.client %>/assets'
}]
}
},
// Allow the use of non-minsafe AngularJS files. Automatically makes it
// minsafe compatible so Uglify does not destroy the ng references
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat',
src: '**/*.js',
dest: '.tmp/concat'
}]
}
},
// Dynamically generate angular constant `appConfig` from
// `server/config/environment/shared.js`
ngconstant: {
options: {
name: 'fndParyBoatsApp.constants',
dest: '<%= yeoman.client %>/app/app.constant.js',
deps: [],
wrap: true,
configPath: '<%= yeoman.server %>/config/environment/shared'
},
app: {
constants: function() {
return {
appConfig: require('./' + grunt.config.get('ngconstant.options.configPath'))
};
}
}
},
// Package all the html partials into a single javascript payload
ngtemplates: {
options: {
// This should be the name of your apps angular module
module: 'fndParyBoatsApp',
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
},
usemin: 'app/app.js'
},
main: {
cwd: '<%= yeoman.client %>',
src: ['{app,components,Dialogs,services}/**/*.html'],
dest: '.tmp/templates.js'
},
tmp: {
cwd: '.tmp',
src: ['{app,components,Dialogs,services}/**/*.html'],
dest: '.tmp/tmp-templates.js'
}
},
// Replace Google CDN references
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/<%= yeoman.client %>/*.html']
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.client %>',
dest: '<%= yeoman.dist %>/<%= yeoman.client %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'bower_components/**/*',
'assets/images/{,*/}*.{webp}',
'assets/icons/**/*',
'index.html'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/<%= yeoman.client %>/assets',
src: ['generated/*']
}, {
expand: true,
dest: '<%= yeoman.dist %>',
src: [
'package.json',
'<%= yeoman.server %>/**/*',
'!<%= yeoman.server %>/config/local.env.sample.js'
]
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.client %>',
dest: '.tmp/',
src: ['{app,components,Dialogs,services}/**/*.css']
}
},
buildcontrol: {
options: {
dir: '<%= yeoman.dist %>',
commit: true,
push: true,
connectCommits: false,
message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
},
heroku: {
options: {
remote: 'heroku',
branch: 'master'
}
},
openshift: {
options: {
remote: 'openshift',
branch: 'master'
}
}
},
// Run some tasks in parallel to speed up the build process
concurrent: {
pre: [
'ngconstant'
],
server: [
'newer:babel:client'
],
test: [
'newer:babel:client'
],
debug: {
tasks: [
'nodemon',
'node-inspector'
],
options: {
logConcurrentOutput: true
}
},
dist: [
'newer:babel:client',
'imagemin'
]
},
// Test settings
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
},
mochaTest: {
options: {
reporter: 'spec',
require: 'mocha.conf.js',
timeout: 5000 // set default mocha spec timeout
},
unit: {
src: ['<%= yeoman.server %>/**/*.spec.js']
},
integration: {
src: ['<%= yeoman.server %>/**/*.integration.js']
}
},
mocha_istanbul: {
unit: {
options: {
excludes: ['**/*.{spec,mock,integration}.js'],
reporter: 'spec',
require: ['mocha.conf.js'],
mask: '**/*.spec.js',
coverageFolder: 'coverage/server/unit'
},
src: '<%= yeoman.server %>'
},
integration: {
options: {
excludes: ['**/*.{spec,mock,integration}.js'],
reporter: 'spec',
require: ['mocha.conf.js'],
mask: '**/*.integration.js',
coverageFolder: 'coverage/server/integration'
},
src: '<%= yeoman.server %>'
}
},
istanbul_check_coverage: {
default: {
options: {
coverageFolder: 'coverage/**',
check: {
lines: 80,
statements: 80,
branches: 80,
functions: 80
}
}
}
},
protractor: {
options: {
configFile: 'protractor.conf.js'
},
chrome: {
options: {
args: {
browser: 'chrome'
}
}
}
},
env: {
test: {
NODE_ENV: 'test'
},
prod: {
NODE_ENV: 'production'
},
all: localConfig
},
// Compiles ES6 to JavaScript using Babel
babel: {
options: {
sourceMap: true
},
client: {
files: [{
expand: true,
cwd: '<%= yeoman.client %>',
src: ['{app,components,Dialogs,services}/**/!(*.spec).js'],
dest: '.tmp'
}]
},
server: {
options: {
plugins: [
'transform-class-properties',
'transform-runtime'
]
},
files: [{
expand: true,
cwd: '<%= yeoman.server %>',
src: [
'**/*.js',
'!config/local.env.sample.js'
],
dest: '<%= yeoman.dist %>/<%= yeoman.server %>'
}]
}
},
injector: {
options: {},
// Inject application script files into index.html (doesn't include bower)
scripts: {
options: {
transform: function(filePath) {
var yoClient = grunt.config.get('yeoman.client');
filePath = filePath.replace('/' + yoClient + '/', '');
filePath = filePath.replace('/.tmp/', '');
return '<script src="' + filePath + '"></script>';
},
sort: function(a, b) {
var module = /\.module\.(js|ts)$/;
var aMod = module.test(a);
var bMod = module.test(b);
// inject *.module.js first
return (aMod === bMod) ? 0 : (aMod ? -1 : 1);
},
starttag: '<!-- injector:js -->',
endtag: '<!-- endinjector -->'
},
files: {
'<%= yeoman.client %>/index.html': [
[
'<%= yeoman.client %>/{services,app,components,Dialogs}/**/!(*.spec|*.mock).js',
'!{.tmp,<%= yeoman.client %>}/app/app.{js,ts}'
]
]
}
},
// Inject component css into index.html
css: {
options: {
transform: function(filePath) {
var yoClient = grunt.config.get('yeoman.client');
filePath = filePath.replace('/' + yoClient + '/', '');
filePath = filePath.replace('/.tmp/', '');
return '<link rel="stylesheet" href="' + filePath + '">';
},
starttag: '<!-- injector:css -->',
endtag: '<!-- endinjector -->'
},
files: {
'<%= yeoman.client %>/index.html': [
'<%= yeoman.client %>/{app,components,Dialogs,services}/**/*.css'
]
}
}
}
});
// Used for delaying livereload until after server has restarted
grunt.registerTask('wait', function() {
grunt.log.ok('Waiting for server reload...');
var done = this.async();
setTimeout(function() {
grunt.log.writeln('Done waiting!');
done();
}, 1500);
});
grunt.registerTask('express-keepalive', 'Keep grunt running', function() {
this.async();
});
grunt.registerTask('serve', function(target) {
if(target === 'dist') {
return grunt.task.run(['build', 'env:all', 'env:prod', 'express:prod', 'wait', 'open', 'express-keepalive']);
}
if(target === 'debug') {
return grunt.task.run([
'clean:server',
'env:all',
'concurrent:pre',
'concurrent:server',
'injector',
'wiredep:client',
'postcss',
'concurrent:debug'
]);
}
grunt.task.run([
'clean:server',
'env:all',
'concurrent:pre',
'concurrent:server',
'injector',
'wiredep:client',
'postcss',
'express:dev',
'wait',
'open',
'watch'
]);
});
grunt.registerTask('server', function() {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
grunt.task.run(['serve']);
});
grunt.registerTask('test', function(target, option) {
if(target === 'server') {
return grunt.task.run([
'env:all',
'env:test',
'mochaTest:unit',
'mochaTest:integration'
]);
} else if(target === 'client') {
return grunt.task.run([
'clean:server',
'env:all',
'concurrent:pre',
'concurrent:test',
'injector',
'postcss',
'wiredep:test',
'karma'
]);
} else if(target === 'e2e') {
if(option === 'prod') {
return grunt.task.run([
'build',
'env:all',
'env:prod',
'express:prod',
'protractor'
]);
} else {
return grunt.task.run([
'clean:server',
'env:all',
'env:test',
'concurrent:pre',
'concurrent:test',
'injector',
'wiredep:client',
'postcss',
'express:dev',
'protractor'
]);
}
} else if(target === 'coverage') {
if(option === 'unit') {
return grunt.task.run([
'env:all',
'env:test',
'mocha_istanbul:unit'
]);
} else if(option === 'integration') {
return grunt.task.run([
'env:all',
'env:test',
'mocha_istanbul:integration'
]);
} else if(option === 'check') {
return grunt.task.run([
'istanbul_check_coverage'
]);
} else {
return grunt.task.run([
'env:all',
'env:test',
'mocha_istanbul',
'istanbul_check_coverage'
]);
}
} else {
grunt.task.run([
'test:server',
'test:client'
]);
}
});
grunt.registerTask('build', [
'clean:dist',
'concurrent:pre',
'concurrent:dist',
'injector',
'wiredep:client',
'useminPrepare',
'postcss',
'ngtemplates',
'concat',
'ngAnnotate',
'copy:dist',
'babel:server',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};

Have you tried openLoginDialog.$inject = ['ev', '$mdDialog']?
More info here: https://github.com/angular/material/issues/5888
Also, in general you'll want to follow best practices: Angularjs minify best practice

I was able to solve the problem. When the application got minified, all html and js files were pushed into one file. So all directories are now at the same level. So my path was ../../Dialogs/loginDialog/loginDialog.html when it should have been just ../../Dialogs/loginDialog/loginDialog.html

How combine tasks with Grunt

I need to combine the default task with the build.
Where the build needs to be completed so the rest of task can continue.
// Default task(s).
grunt.registerTask('default', ['lint','sass:dev', 'concurrent:default']);
// Lint task(s).
grunt.registerTask('lint', ['jshint', 'csslint']);
// Build task(s).
grunt.registerTask('build', ['lint', 'loadConfig', 'ngAnnotate', 'uglify', 'cssmin']);
I'm noob with grunt and already tried few things, didn't work.
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
serverViews: {
files: watchFiles.serverViews,
options: {
livereload: true
}
},
serverJS: {
files: watchFiles.serverJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientViews: {
files: watchFiles.clientViews,
options: {
livereload: true,
}
},
clientJS: {
files: watchFiles.clientJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientCSS: {
files: watchFiles.clientCSS,
tasks: ['csslint'],
options: {
livereload: true
}
},
sass: {
files: watchFiles.sass,
tasks: ['sass:dev'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: watchFiles.clientJS.concat(watchFiles.serverJS),
options: {
jshintrc: true
}
}
},
csslint: {
options: {
csslintrc: '.csslintrc',
},
all: {
src: watchFiles.clientCSS
}
},
uglify: {
production: {
options: {
mangle: false
},
files: {
'public/dist/application.min.js': 'public/dist/application.js'
}
}
},
cssmin: {
combine: {
files: {
'public/dist/application.min.css': '<%= applicationCSSFiles %>'
}
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
nodeArgs: ['--debug'],
ext: 'js,html',
watch: watchFiles.serverViews.concat(watchFiles.serverJS)
}
}
},
/**
* Sass
*/
sass: {
dev: {
options: {
style: 'expanded',
compass: true
},
files: {
'public/css/app.css': 'public/sass/{,*/}*.{scss,sass}'
// 'public/css/bootstrap.css': 'public/lib/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss'
}
},
dist: {
//you could use this as part of the build job (instead of using cssmin)
options: {
style: 'compressed',
compass: true
},
files: {
'public/dist/style.min.css': 'style/{,*/}*.{scss,sass}'
}
}
},
'node-inspector': {
custom: {
options: {
'web-port': 1337,
'web-host': 'localhost',
'debug-port': 5858,
'save-live-edit': true,
'no-preload': true,
'stack-trace-limit': 50,
'hidden': []
}
}
},
ngAnnotate: {
production: {
files: {
'public/dist/application.js': '<%= applicationJavaScriptFiles %>'
}
}
},
concurrent: {
default: ['nodemon', 'watch'],
debug: ['nodemon', 'watch', 'node-inspector'],
options: {
logConcurrentOutput: true,
limit: 10
}
},
env: {
test: {
NODE_ENV: 'test'
},
secure: {
NODE_ENV: 'secure'
}
},
mochaTest: {
src: watchFiles.mochaTests,
options: {
reporter: 'spec',
require: 'server.js'
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
});
// Load NPM tasks
require('load-grunt-tasks')(grunt);
// Making grunt default to force in order not to break the project.
grunt.option('force', true);
// A Task for loading the configuration object
grunt.task.registerTask('loadConfig', 'Task that loads the config into a grunt option.', function() {
var init = require('./config/init')();
var config = require('./config/config');
grunt.config.set('applicationJavaScriptFiles', config.assets.js);
grunt.config.set('applicationCSSFiles', config.assets.css);
});
// Default task(s).
grunt.registerTask('default', ['lint','sass:dev', 'concurrent:default']);
// Lint task(s).
grunt.registerTask('lint', ['jshint', 'csslint']);
// Build task(s).
grunt.registerTask('build', ['lint', 'loadConfig', 'ngAnnotate', 'uglify', 'cssmin']);

You need to register combine task as following:
grunt.registerTask('combine', ['default', 'build']);
See registerTask documentation.

Can't get livereload to work in gruntfile.js

This is my first time build a Gruntfile.js and everything is working but live reload, I keep getting a task...Error when I add livereload: true, to the watch options, am I missing something out or have I done something wrong?
I looked here https://github.com/gruntjs/grunt-contrib-watch#optionslivereload and followed guide which states just adding livereload to the options and setting it to true.
module.exports = function(grunt) {
// configure the tasks
grunt.initConfig({
//Build task
copy: {
build: {
cwd: 'source',
src: [ '**', '!**/*.less', '!**/*.coffee', '!**/*.jade' ],
dest: 'build',
expand: true
},
},
// Clean task
clean: {
build: {
src: [ 'build' ]
},
stylesheets: {
src: [ 'build/**/*.css', '!build/application.css' ]
},
scripts: {
src: [ 'build/**/*.js', '!build/application.js' ]
},
},
// Less task
less: {
build: {
options: {
linenos: true,
compress: false
},
files: [{
expand: true,
cwd: 'source',
src: [ '**/*.less' ],
dest: 'build',
ext: '.css'
}]
}
},
// Autoprefixer task
autoprefixer: {
build: {
expand: true,
cwd: 'build',
src: [ '**/*.css' ],
dest: 'build'
}
},
// CSS Minify task
cssmin: {
build: {
files: {
'build/application.css': [ 'build/**/*.css' ]
}
}
},
// Coffee task
coffee: {
build: {
expand: true,
cwd: 'source',
src: [ '**/*.coffee' ],
dest: 'build',
ext: '.js'
}
},
// Uglify
uglify: {
build: {
options: {
mangle: false
},
files: {
'build/application.js': [ 'build/**/*.js' ]
}
}
},
// Html task
jade: {
compile: {
options: {
data: {}
},
files: [{
expand: true,
cwd: 'source',
src: [ '**/*.jade' ],
dest: 'build',
ext: '.html'
}]
}
},
// Watch task
watch: {
stylesheets: {
files: 'source/**/*.less',
tasks: [ 'stylesheets' ]
},
scripts: {
files: 'source/**/*.coffee',
tasks: [ 'scripts' ]
},
jade: {
files: 'source/**/*.jade',
tasks: [ 'jade' ]
},
copy: {
files: [ 'source/**', '!source/**/*.less', '!source/**/*.coffee', '!source/**/*.jade' ],
tasks: [ 'copy' ]
}
},
// Connect to server task
connect: {
server: {
options: {
port: 4000,
base: 'build',
hostname: '*'
livereload: true,
}
}
}
});
// load the tasks
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
// builds and cleans the task
grunt.registerTask(
'build',
'Compiles all of the assets and copies the files to the build directory.',
[ 'clean:build', 'copy', 'stylesheets', 'scripts', 'jade' ]
);
// Adds stylesheet to the task
grunt.registerTask(
'stylesheets',
'Compiles the stylesheets.',
[ 'less', 'autoprefixer', 'cssmin', 'clean:stylesheets' ]
);
// Adds javascript to the task
grunt.registerTask(
'scripts',
'Compiles the JavaScript files.',
[ 'coffee', 'uglify', 'clean:scripts' ]
);
//watches and connects to the server
grunt.registerTask(
'default',
'Watches the project for changes, automatically builds them and runs a server.',
[ 'build', 'connect', 'watch']
);
};

You need to add the option to the config for the watch task. Currently you have the setting in the connect task rather than the watch one. Try something like this:
watch: {
options: {
livereload:true,
},
stylesheets: {
files: 'source/**/*.less',
tasks: [ 'stylesheets' ]
},
scripts: {
files: 'source/**/*.coffee',
tasks: [ 'scripts' ]
},
jade: {
files: 'source/**/*.jade',
tasks: [ 'jade' ]
},
copy: {
files: [ 'source/**', '!source/**/*.less', '!source/**/*.coffee', '!source/**/*.jade' ],
tasks: [ 'copy' ]
}
},
You will also need to remove it from the connect task

Categories

Resources