Continuous CSS concatenation in background with Yeoman - css

Question

I'm using Yeoman and I can't find a way to trigger the CSS task upon file change.
I have a project structure like
\ app
-----\ module1
------- style.css
-----\ module2
------- style.css
-----\ module3
------- style.css
-----\ styles
------- main.css
and I'd like Yeoman to
watch all the CSS files within the modules;
trigger the CSS concat/minification task;
overwrite app/styles/main.css.
Here's my Gruntfile.js:
module.exports = function( grunt ) {
'use strict';
//
// Grunt configuration:
//
// https://github.com/cowboy/grunt/blob/master/docs/getting_started.md
//
grunt.initConfig({
// Project configuration
// ---------------------
// specify an alternate install location for Bower
bower: {
dir: 'app/components'
},
// Coffee to JS compilation
coffee: {
compile: {
files: {
// 'app/scripts/*.js': 'app/scripts/**/*.coffee',
// 'test/spec/*.js': 'test/spec/**/*.coffee'
}
}
},
// compile .scss/.sass to .css using Compass
compass: {
dist: {}
},
// default watch configuration
watch: {
reload: {
files: [
'Gruntfile.js',
'app/*.html',
'app/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*',
'app/app/**/*'
],
tasks: 'css reload'
}
},
// default lint configuration, change this to match your setup:
// https://github.com/cowboy/grunt/blob/master/docs/task_lint.md#lint-built-in-task
lint: {
files: [
'Gruntfile.js',
'app/scripts/**/*.js',
'spec/**/*.js'
]
},
// specifying JSHint options and globals
// https://github.com/cowboy/grunt/blob/master/docs/task_lint.md#specifying-jshint-options-and-globals
jshint: {
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
angular: true
}
},
// Build configuration
// -------------------
// the staging directory used during the process
staging: 'temp',
// final build output
output: 'dist',
mkdirs: {
staging: 'app/'
},
// Below, all paths are relative to the staging directory, which is a copy
// of the app/ directory. Any .gitignore, .ignore and .buildignore file
// that might appear in the app/ tree are used to ignore these values
// during the copy process.
// concat css/**/*.css files, inline #import, output a single minified css
css: {
'app/styles/main.css': ['app/styles/*.css', 'app/app/**/*.css']
},
// renames JS/CSS to prepend a hash of their contents for easier
// versioning
rev: {
js: 'scripts/**/*.js',
css: 'styles/**/*.css',
img: 'images/**'
},
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// update references in HTML/CSS to revved files
usemin: {
html: ['**/*.html'],
css: ['**/*.css']
},
// HTML minification
html: {
files: ['**/*.html']
},
// Optimizes JPGs and PNGs (with jpegtran & optipng)
img: {
dist: '<config:rev.img>'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true
}
});
// Alias the `test` task to run `testacular` instead
grunt.registerTask('test', 'run the testacular test driver', function () {
var done = this.async();
require('child_process').exec('testacular start --single-run', function (err, stdout) {
grunt.log.write(stdout);
done(err);
});
});
};

Answer 1

I am new to grunt, but what I did to write a custom watch task was this. First I registered a new task which included only the things I want to run while I am developing. I want my project to run against unminified js, for example. So I don't ask for the min or concat tasks to be executed. Just lint them, test them and rewrite the html for development mode using grunt-targethtml.
grunt.registerTask('devel', 'lint qunit targethtml');
Then I replace the default watch configuration to run the devel task
watch: {
files: '<config:lint.files>',
tasks: 'devel'
}
This is using the file list as defined for the lint task but you should be able to replace this with
files: ['app/**/*.css']