Develop Reference

Different grunt tasks for watch and sass

I have a grunt project and I am using sass and jade together. I want to have a task for sass when developing where the style would be expanded for troubleshooting and a task for when I 'finish' the project and then the style would be compressed. I am new to grunt and don't know how to do it.
My gruntfile
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
compile: {
options: {
pretty: true,
nospawn: false
},
files: {
'index.html' : 'src/index.jade'
}
}
},
sass: {
dist: {
options: {
style: 'expanded',
nospawn: false
},
files: {
'build/css/app.css' : 'src/sass/app.sass'
}
}
},
watch: {
jade: {
files: 'src/**/*.jade',
tasks: ['jade']
},
css: {
files: 'src/sass/**/*.sass',
tasks: ['sass']
},
options: {
livereload: true,
nospawn: false
}
},
connect: {
server: {
options: {
port: 9000,
base: '.',
hostname: '0.0.0.0',
protocol: 'http',
livereload: true,
open: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask('default', ['connect', 'watch']);
};

To get compressed css instead of expanded, you would first need to make another sass-task (so within sass:{}), call it finish: for instance and change the compression setting.
It should look something like this:
finish: {
options: {
style: 'compressed',
nospawn: false
},
files: {
'build/css/app.css' : 'src/sass/app.sass'
}
}
Then after grunt.registerTask('default', ['connect', 'watch']);
you can add another task, ie finish that should like:
grunt.registerTask('finish', ['sass:finish']);
To run it you would type grunt finish on the command line.

sass with gruntjs doesn't work

The livereload worked but my sass isn't output anything to my css. No error shown in the terminal. Below is my gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
sass: {
files: ['components/sass/*.{scss,sass}'],
tasks: ['sass'],
options: {
livereload: true
}
},
livereload: {
files: ['**/*'],
options: {
livereload: true
}
}
},
sass: {
options: {
sourceMap: true,
outputStyle: 'compressed'
},
files: {
'css/styles.css': 'components/sass/styles.scss'
}
}
});
grunt.registerTask('default', ['sass', 'watch']);
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
}
Anything I did wrongly here?

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.

Grunt Watch and Connect is not working together

I am trying to register a custom task that combines the connect and watch task on grunt, but it seems like it is just running the first element(task) of the array on the function grunt.registerTask. In this situation, it is just running the watch command, not the connect.
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: '8000',
protocol: 'http',
hostname: 'localhost',
base: 'app',
keepalive: true,
livereload: true,
open: true
}
}
},
wiredep: {
task: {
src: ['app/index.html'],
}
},
jshint: {
options: {
reporter: require('jshint-stylish'),
jshintrc: '.jshintrc'
},
all: [
'GruntFile.js',
'app/scripts/*',
'test/spec/*'
]
},
sass: {
dist: {
files: {
'app/stylesheets/main.css': 'app/sass/main.sass'
},
options: {
compass: true
}
}
},
watch: {
options: {
livereload: true
},
styles: {
files: ['app/sass/*.sass'],
tasks: ['sass'],
options: {
livereload: true
}
},
scripts: {
files: ['app/scripts/*.js', 'GruntFile.js'],
tasks: ['jshint'],
options: {
livereload: true
}
},
bower: {
files: ['bower.json'],
tasks: ['wiredep']
}
}
});
// ========================================================
// Loading npm tasks
// ========================================================
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// ========================================================
// Register npm tasks
// ========================================================
grunt.registerTask('default', ['connect', 'wiredep', 'jshint', 'sass', 'watch']);
grunt.registerTask('serve',['watch', 'connect:server']);
// ========================================================
};
How can I work this two tasks together with registerTask function?

Incredible annoying behavior with GRUNT

We're using Mean.io for a project and getting erratic behavior from Grunt.
When we make changes on different files (while Grunt is running, of course), Grunt may detect the changes or not. HTML changes are usually detected by Grunt, but CSS/JS changes not.
And even worst, we often have to reboot (CTRL+C, grunt -f) Grunt to make it displays the project correctly because it prints random errors that actually don't exist. And thus the page is not displayed correctly in the browser.
For instance:
/vagrant/vavel/node_modules/dependable/index.js:115
throw new Error("dependency '" + name + "' was not registered");
^
Error: dependency 'access' was not registered
Or:
/vagrant/vavel/node_modules/mongoose/lib/index.js:323
throw new mongoose.Error.MissingSchemaError(name);
^
MissingSchemaError: Schema hasn't been registered for model "User".
Use mongoose.model(name, schema)
These errors just disappear if we restart Grunt again (using "rs" or CTRL+C + grunt -f).
In fact, sometimes there is not any error displayed in console and the page doesn't show up well.
Are we doing something wrong with ow we are using Grunt?
Gruntfile.js
cat Gruntfile.js
'use strict';
var paths = {
js: ['*.js', 'test/**/*.js', '!test/coverage/**', '!bower_components/**', 'packages/**/*.js', '!packages/**/node_modules/**'],
html: ['packages/**/public/**/views/**', 'packages/**/server/views/**'],
css: ['!bower_components/**', 'packages/**/public/**/css/*.css']
};
module.exports = function(grunt) {
if (process.env.NODE_ENV !== 'production') {
require('time-grunt')(grunt);
}
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
assets: grunt.file.readJSON('config/assets.json'),
clean: ['bower_components/build'],
watch: {
js: {
files: paths.js,
tasks: ['jshint'],
options: {
livereload: true
}
},
html: {
files: paths.html,
options: {
livereload: true,
interval: 500
}
},
css: {
files: paths.css,
tasks: ['csslint'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: paths.js,
options: {
jshintrc: true
}
}
},
uglify: {
core: {
options: {
mangle: false
},
files: '<%= assets.core.js %>'
}
},
csslint: {
options: {
csslintrc: '.csslintrc'
},
src: paths.css
},
cssmin: {
core: {
files: '<%= assets.core.css %>'
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
args: [],
ignore: ['node_modules/**'],
ext: 'js,html',
nodeArgs: ['--debug'],
delayTime: 1,
cwd: __dirname
}
}
},
concurrent: {
tasks: ['nodemon', 'watch'],
options: {
logConcurrentOutput: true
}
},
mochaTest: {
options: {
reporter: 'spec',
require: [
'server.js',
function() {
require('meanio/lib/util').preload(__dirname + '/packages/**/server', 'model');
}
]
},
src: ['packages/**/server/tests/**/*.js']
},
env: {
test: {
NODE_ENV: 'test'
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
});
//Load NPM tasks
require('load-grunt-tasks')(grunt);
//Default task(s).
if (process.env.NODE_ENV === 'production') {
grunt.registerTask('default', ['clean', 'cssmin', 'uglify', 'concurrent']);
} else {
grunt.registerTask('default', ['clean', 'jshint', 'csslint', 'concurrent']);
}
//Test task.
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
// For Heroku users only.
// Docs: https://github.com/linnovate/mean/wiki/Deploying-on-Heroku
grunt.registerTask('heroku:production', ['cssmin', 'uglify']);
};