Related
watch: {
css: {
files: 'source/styles/**/*.scss',
tasks: ['sass', 'autoprefixer', 'cssmin', 'clean:css'],
options: {
spawn: false,
},
},
images: {
files: 'source/assets/images/**/*.{png,jpg,gif}',
tasks: ['clean:image', 'imagemin'],
options: {
spawn: false,
},
}
}
grunt.registerTask('css', [
'sass',
'cssmin',
'clean:css'
]);
sass: {
dist: {
files: [{
expand: true,
src: ['source/styles/**/*.scss'],
dest: 'build/styles/',
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('default', [
'sass',
'cssmin',
'clean:css',
'requirejs',
'clean:js',
]);
I want to create a new gurnt task. Currenly, In my project, grunt css is working fine to build the complate packae SCSS.
I need to create a new task like grunt home, which will build a specific folder SCSS.
How can I create grunt home?
I think this should work, but i didn't test it (it will compile SCSS files from source/styles/SCSS to css in build/styles/css):
homeSass: {
dist: {
files: [{
expand: true,
src: ['source/styles/SCSS/**/*.scss'],
dest: 'build/styles/css/',
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('homebuild', [
'homeSass'
]);
Is it your are looking for? Or I misunderstand you?
so something like this you can create multiple tasks
sass2: {
dist: {
files: [{
expand: true,
src: ['source/styles/**/*.scss'],//path to different source file
dest: 'build/styles/',//path to different destination for home
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('home', [
'sass2'
]);
Now to run this you have 2 ways
1) simply say grunt home
this will only run sass compilation specific to sass2
2) now if you wants to run both the tasks grunt css and grunt home in 1 go then do this
sass: {
dist: {
files: [{
expand: true,
src: ['source/styles/**/src1.scss', 'source/styles/**/src2.scss'],
dest: 'build/styles/',
ext: '.css',
flatten: true
}]
},
options: {
compass: true,
sourcemap: false
}
}
grunt.registerTask('home', [
'sass'
]);
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..
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
I am new to Grunt and got a web template that uses coffee script. I have merged the Gruntfile.js to include the coffee scripts but I get the following error when running grunt:
Running "concurrent:server" (concurrent) task
Running "copy:styles" (copy) task
Done, without errors.
Warning: Warning: Task "coffee:server" not found. Use --force to continue.
I have installed grunt-coffee-server. But don't know how to fix this problem.
This is the concurrent definition:
concurrent: {
ionic: {
tasks: [],
options: {
logConcurrentOutput: true
}
},
lessServer: ["coffee:server", "less:server", "copy:styles"],
lessDist: ["coffee:dist", "less:dist", "copy:styles", "htmlmin"],
server: [
'coffee:server',
'compass:server',
'copy:styles',
'copy:vendor',
'copy:fonts'
],
test: [
'coffee',
'compass',
'copy:styles',
'copy:vendor',
'copy:fonts'
],
dist: [
"coffee:dist",
'compass:dist',
'copy:styles',
'copy:vendor',
'copy:fonts'
]
},
And if you are interested in the whole Gruntfile.js
// Generated on 2014-11-05 using generator-ionic 0.6.1
'use strict';
var _ = require('lodash');
var path = require('path');
var cordovaCli = require('cordova');
var spawn = require('child_process').spawn;
module.exports = function (grunt) {
// Load grunt tasks automatically
require('load-grunt-tasks')(grunt);
// 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
yeoman: {
// configurable paths
app: 'app',
scripts: 'scripts',
styles: 'styles',
images: 'images',
dist: 'www'
},
// Environment Variables for Angular App
// This creates an Angular Module that can be injected via ENV
// Add any desired constants to the ENV objects below.
// https://github.com/diegonetto/generator-ionic#environment-specific-configuration
ngconstant: {
options: {
space: ' ',
wrap: '"use strict";\n\n {%= __ngModule %}',
name: 'config',
dest: '<%= yeoman.app %>/scripts/config.js'
},
development: {
constants: {
ENV: {
name: 'development',
apiEndpoint: 'http://dev.yoursite.com:10000/'
}
}
},
production: {
constants: {
ENV: {
name: 'production',
apiEndpoint: 'http://api.yoursite.com/'
}
}
}
},
// Watches files for changes and runs tasks based on the changed files
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep', 'newer:copy:app']
},
html: {
files: ['<%= yeoman.app %>/**/*.html'],
tasks: ['newer:copy:app']
},
coffee: {
files: ["<%= yeoman.app %>/<%= yeoman.scripts %>/**/*.coffee"],
tasks: ["coffee:dist"]
},
js: {
files: ['<%= yeoman.app %>/<%= yeoman.scripts %>/**/*.js'],
tasks: ['newer:copy:app', 'newer:jshint:all']
},
compass: {
files: ['<%= yeoman.app %>/<%= yeoman.styles %>/**/*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer', 'newer:copy:tmp']
},
gruntfile: {
files: ['Gruntfile.js'],
tasks: ['ngconstant:development', 'newer:copy:app']
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost'
},
dist: {
options: {
base: 'www'
}
},
coverage: {
options: {
port: 9002,
open: true,
base: ['coverage']
}
}
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/<%= yeoman.scripts %>/**/*.js'
],
test: {
options: {
jshintrc: 'test/.jshintrc'
},
src: ['test/unit/**/*.js']
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'www/*',
'!www/.git*'
]
}]
},
server: '.tmp'
},
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/<%= yeoman.styles %>/',
src: '{,*/}*.css',
dest: '.tmp/<%= yeoman.styles %>/'
}]
}
},
// Automatically inject Bower components into the app
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//
},
sass: {
src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
ignorePath: /(\.\.\/){1,2}lib\//
}
},
coffee: {
server: {
options: {
sourceMap: true,
sourceRoot: ""
},
files: [
{
expand: true,
cwd: "<%= yeoman.app %>/scripts",
src: "**/*.coffee",
dest: ".tmp/scripts",
ext: ".js"
}
]
},
dist: {
options: {
sourceMap: false,
sourceRoot: ""
},
files: [
{
expand: true,
cwd: "<%= yeoman.app %>/scripts",
src: "**/*.coffee",
dest: ".tmp/scripts",
ext: ".js"
}
]
}
},
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sassDir: '<%= yeoman.app %>/<%= yeoman.styles %>',
cssDir: '.tmp/<%= yeoman.styles %>',
generatedImagesDir: '.tmp/<%= yeoman.styles %>/ui/images',
imagesDir: '<%= yeoman.app %>/<%= yeoman.styles %>/ui/images',
javascriptsDir: '<%= yeoman.app %>/<%= yeoman.scripts %>',
fontsDir: '<%= yeoman.app %>/fonts',
importPath: '<%= yeoman.app %>/lib',
httpImagesPath: '<%= yeoman.styles %>/ui/images',
httpGeneratedImagesPath: '<%= yeoman.styles %>/ui/images',
httpFontsPath: 'fonts',
relativeAssets: true,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
dist: {
options: {
generatedImagesDir: 'www/<%= yeoman.images %>/generated'
}
},
server: {
options: {
debugInfo: true
}
}
},
// 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.app %>/index.html',
options: {
dest: 'www',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
// Performs rewrites based on the useminPrepare configuration
usemin: {
html: ['www/**/*.html', "www/lib/**"],
css: ['www/<%= yeoman.styles %>/**/*.css'],
options: {
assetsDirs: ['www']
}
},
// The following *-min tasks produce minified files in the dist folder
cssmin: {
options: {
root: '<%= yeoman.app %>',
noRebase: true
}
},
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true,
removeOptionalTags: true
},
files: [{
expand: true,
cwd: 'www',
src: ['*.html', 'templates/**/*.html'],
dest: 'www'
}]
}
},
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: 'www',
src: [
'<%= yeoman.images %>/**/*.{png,jpg,jpeg,gif,webp,svg}',
'*.html',
'templates/**/*.html',
'fonts/*',
'lib/font-awesome/css/*',
'lib/font-awesome/fonts/*',
"lib/weather-icons/css/*",
"lib/weather-icons/font/*",
"i18n/**/*",
"styles/fonts/**/*",
"styles/img/**/*",
"styles/ui/images/*"
]
}, {
expand: true,
cwd: '.tmp/<%= yeoman.images %>',
dest: 'www/<%= yeoman.images %>',
src: ['generated/*']
}, {
expand: true,
cwd: ".tmp",
dest: "<%= yeoman.dist %>",
src: ["styles/**", "assets/**"]
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/<%= yeoman.styles %>',
dest: '.tmp/<%= yeoman.styles %>/',
src: '{,*/}*.css'
},
fonts: {
expand: true,
cwd: 'app/lib/ionic/release/fonts/',
dest: '<%= yeoman.app %>/fonts/',
src: '*'
},
vendor: {
expand: true,
cwd: '<%= yeoman.app %>/vendor',
dest: '.tmp/<%= yeoman.styles %>/',
src: '{,*/}*.css'
},
app: {
expand: true,
cwd: '<%= yeoman.app %>',
dest: 'www/',
src: [
'**/*',
'!**/*.(scss,sass,css)'
]
},
tmp: {
expand: true,
cwd: '.tmp',
dest: 'www/',
src: '**/*'
}
},
concurrent: {
ionic: {
tasks: [],
options: {
logConcurrentOutput: true
}
},
lessServer: ["coffee:server", "less:server", "copy:styles"],
lessDist: ["coffee:dist", "less:dist", "copy:styles", "htmlmin"],
server: [
'coffee:server',
'compass:server',
'copy:styles',
'copy:vendor',
'copy:fonts'
],
test: [
'coffee',
'compass',
'copy:styles',
'copy:vendor',
'copy:fonts'
],
dist: [
"coffee:dist",
'compass:dist',
'copy:styles',
'copy:vendor',
'copy:fonts'
]
},
less: {
server: {
options: {
strictMath: true,
dumpLineNumbers: true,
sourceMap: true,
sourceMapRootpath: "",
outputSourceFiles: true
},
files: [
{
expand: true,
cwd: "<%= yeoman.app %>/styles-less",
src: "main.less",
dest: ".tmp/styles",
ext: ".css"
}
]
},
dist: {
options: {
cleancss: true,
report: 'min'
},
files: [
{
expand: true,
cwd: "<%= yeoman.app %>/styles-less",
src: "main.less",
dest: ".tmp/styles",
ext: ".css"
}
]
}
},
// By default, your `index.html`'s <!-- Usemin block --> will take care of
// minification. These next options are pre-configured if you do not wish
// to use the Usemin blocks.
// cssmin: {
// dist: {
// files: {
// 'www/<%= yeoman.styles %>/main.css': [
// '.tmp/<%= yeoman.styles %>/**/*.css',
// '<%= yeoman.app %>/<%= yeoman.styles %>/**/*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// 'www/<%= yeoman.scripts %>/scripts.js': [
// 'www/<%= yeoman.scripts %>/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
// Test settings
// These will override any config options in karma.conf.js if you create it.
karma: {
options: {
basePath: '',
frameworks: ['mocha', 'chai'],
files: [
'<%= yeoman.app %>/lib/angular/angular.js',
'<%= yeoman.app %>/lib/angular-animate/angular-animate.js',
'<%= yeoman.app %>/lib/angular-sanitize/angular-sanitize.js',
'<%= yeoman.app %>/lib/angular-ui-router/release/angular-ui-router.js',
'<%= yeoman.app %>/lib/ionic/release/js/ionic.js',
'<%= yeoman.app %>/lib/ionic/release/js/ionic-angular.js',
'<%= yeoman.app %>/lib/angular-mocks/angular-mocks.js',
'<%= yeoman.app %>/<%= yeoman.scripts %>/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
],
autoWatch: false,
reporters: ['dots', 'coverage'],
port: 8080,
singleRun: false,
preprocessors: {
// Update this if you change the yeoman config path
'app/scripts/**/*.js': ['coverage']
},
coverageReporter: {
reporters: [
{ type: 'html', dir: 'coverage/' },
{ type: 'text-summary' }
]
}
},
unit: {
// Change this to 'Chrome', 'Firefox', etc. Note that you will need
// to install a karma launcher plugin for browsers other than Chrome.
browsers: ['PhantomJS'],
background: true
},
continuous: {
browsers: ['PhantomJS'],
singleRun: true
}
},
// ngAnnotate tries to make the code safe for minification automatically by
// using the Angular long form for dependency injection.
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat/<%= yeoman.scripts %>',
src: '*.js',
dest: '.tmp/concat/<%= yeoman.scripts %>'
}]
}
}
});
// Register tasks for all Cordova commands
_.functions(cordovaCli).forEach(function (name) {
grunt.registerTask(name, function () {
this.args.unshift(name.replace('cordova:', ''));
// Handle URL's being split up by Grunt because of `:` characters
if (_.contains(this.args, 'http') || _.contains(this.args, 'https')) {
this.args = this.args.slice(0, -2).concat(_.last(this.args, 2).join(':'));
}
var done = this.async();
var exec = process.platform === 'win32' ? 'cordova.cmd' : 'cordova';
var cmd = path.resolve('./node_modules/cordova/bin', exec);
var flags = process.argv.splice(3);
var child = spawn(cmd, this.args.concat(flags));
child.stdout.on('data', function (data) {
grunt.log.writeln(data);
});
child.stderr.on('data', function (data) {
grunt.log.error(data);
});
child.on('close', function (code) {
code = code ? false : true;
done(code);
});
});
});
// Since Apache Ripple serves assets directly out of their respective platform
// directories, we watch all registered files and then copy all un-built assets
// over to www/. Last step is running cordova prepare so we can refresh the ripple
// browser tab to see the changes. Technically ripple runs `cordova prepare` on browser
// refreshes, but at this time you would need to re-run the emulator to see changes.
grunt.registerTask('ripple', ['wiredep', 'newer:copy:app', 'ripple-emulator']);
grunt.registerTask('ripple-emulator', function () {
grunt.config.set('watch', {
all: {
files: _.flatten(_.pluck(grunt.config.get('watch'), 'files')),
tasks: ['newer:copy:app', 'prepare']
}
});
var cmd = path.resolve('./node_modules/ripple-emulator/bin', 'ripple');
var child = spawn(cmd, ['emulate']);
child.stdout.on('data', function (data) {
grunt.log.writeln(data);
});
child.stderr.on('data', function (data) {
grunt.log.error(data);
});
process.on('exit', function (code) {
child.kill('SIGINT');
process.exit(code);
});
return grunt.task.run(['watch']);
});
// Dynamically configure `karma` target of `watch` task so that
// we don't have to run the karma test server as part of `grunt serve`
grunt.registerTask('watch:karma', function () {
var karma = {
files: ['<%= yeoman.app %>/<%= yeoman.scripts %>/**/*.js', 'test/spec/**/*.js'],
tasks: ['newer:jshint:test', 'karma:unit:run']
};
grunt.config.set('watch', karma);
return grunt.task.run(['watch']);
});
// Wrap ionic-cli commands
grunt.registerTask('ionic', function() {
var done = this.async();
var script = path.resolve('./node_modules/ionic/bin/', 'ionic');
var flags = process.argv.splice(3);
var child = spawn(script, this.args.concat(flags), { stdio: 'inherit' });
child.on('close', function (code) {
code = code ? false : true;
done(code);
});
});
grunt.registerTask('test', [
'clean',
'concurrent:test',
'autoprefixer',
'karma:unit:start',
'watch:karma'
]);
grunt.registerTask('serve', function (target) {
if (target === 'compress') {
return grunt.task.run(['compress', 'ionic:serve']);
}
grunt.config('concurrent.ionic.tasks', ['ionic:serve', 'watch']);
return grunt.task.run(['init', 'concurrent:ionic']);
});
grunt.registerTask('emulate', function() {
grunt.config('concurrent.ionic.tasks', ['ionic:emulate:' + this.args.join(), 'watch']);
return grunt.task.run(['init', 'concurrent:ionic']);
});
grunt.registerTask('run', function() {
grunt.config('concurrent.ionic.tasks', ['ionic:run:' + this.args.join(), 'watch']);
return grunt.task.run(['init', 'concurrent:ionic']);
});
grunt.registerTask('build', function() {
return grunt.task.run(['init', 'ionic:build:' + this.args.join()]);
});
grunt.registerTask('init', [
'clean',
'ngconstant:development',
'wiredep',
'concurrent:server',
'autoprefixer',
'newer:copy:app',
'newer:copy:tmp'
]);
grunt.registerTask('compress', [
'clean',
'ngconstant:production',
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngAnnotate',
'copy:dist',
'cssmin',
'uglify',
'usemin',
'htmlmin'
]);
grunt.registerTask('coverage', ['karma:continuous', 'connect:coverage:keepalive']);
grunt.registerTask('default', [
'newer:jshint',
'karma:continuous',
'compress'
]);
grunt.loadNpmTasks('grunt-coffee-server');
};
same problem like you, solved by
npm install grunt-contrib-coffee --save-dev
check here:
https://github.com/gruntjs/grunt-contrib-coffee
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