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'
]);
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..
module.exports = function(grunt){
'use strict';
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//Lint JavaScript (validate JS)
jshint: {
all: {
options: {
force: true
},
src: ['Gruntfile.js', 'source/js/*.js', 'source/views/js/*.js']
}
},
// Lint CSS (validate CSS)
csslint: {`enter code here`
lax: {
options: {
force: true
},
src: ['source/css/*.css', 'source/views/css/*.css']
}
},
//Clean and New folder for optimized code
clean: {
dev: {
src: ['dest/'],
},
},
mkdir: {
dev: {
options: {
create: ['dest/']
},
},
},
//Copy thee files in 'dest' folder
copy: {
main: {
files: []
{expand: true, cwd: 'source/', src: ['**'], dest: 'dest/'}
],
},
},
//JS Minification
uglify: {
my_target: {
files: [{
expand: true,
cwd: 'dest/js',
src: ['*.js'],
dest: 'dest/js'
},{
expand: true,
cwd: 'dest/views/js',
src: ['*.js'],
dest: 'dest/views/js'
}]
}
},
//CSS Minification
cssmin: {
target: {
files: [{
expand: true,
cwd: 'dist/css',
src: ['*.css'],
dest: 'dist/css',
ext: '.css'
},{
expand: true,
cwd: 'dist/views/css',
src: ['*.css'],
dest: 'dist/views/css',
ext: '.css'
}]
}
},
// resize images from pizza
responsive_images: {
dev: {
options: {
engine: 'im',
sizes: [{
width: 77,
quality: 60
},{
width: 116,
quality: 60
},{
width: 232,
quality: 60
},{
width: 720,
quality: 60
}]
},
files: [{
expand: true,
src: ['**.{gif,jpg,png}'],
cwd: 'dest/views/images/',
dest: 'dest/views/images/'
}]
}
}
});
grunt.registerTask('default', [
'jshint',
'csslint',
'clean',
'mkdir',
'copy',
'uglify',
'cssmin',
'responsive_images'
]);
};
Running grunt in Command Prompt gives ERROR:
Loading "gruntfile.js" tasks...ERROR >> SyntaxError: Unexpected token
Warning: Task "default" not found. Use --force to continue.
I don't know where i have gone wrong..Any Help is Appreciated!
You have typo in your gruntfile.
Change
// ... config before
copy: {
main: {
files: []
{expand: true, cwd: 'source/', src: ['**'], dest: 'dest/'}
],
},
},
// ... config after
To:
// ... config before
copy: {
main: {
files: [ //removed array close
{expand: true, cwd: 'source/', src: ['**'], dest: 'dest/'}
]
}
},
// ... config after
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.
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