实际项目中,单独使用coffee、grunt和less的很少,我们可以把他们整合其他协同使用来提高我们的效率。
grunt的定位是构建工具,我们可以利用它来调用coffee和less来实现我们的目的。
参考项目https://github.com/mrcoles/static-less-coffeescript-grunt-project。
gruntfile可以这样来写:
module.exports = function(grunt) {
// load tasks
[
'grunt-contrib-jshint',
'grunt-contrib-qunit',
'grunt-contrib-watch',
'grunt-contrib-clean',
'grunt-contrib-copy',
'grunt-contrib-concat',
'grunt-contrib-uglify',
'grunt-contrib-cssmin',
'grunt-contrib-concat',
'grunt-contrib-less',
'grunt-contrib-coffee',
'grunt-usemin',
'grunt-filerev'
].forEach(function(task) { grunt.loadNpmTasks(task); });
// setup init config
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// clean up the `dist/` directory, i.e., delete files
clean: {
dist: {
src: [
'dist/*',
// funny dance to keep old versioned dist/css/*.pkg.*.css
'!dist/css/**',
'dist/css/*',
'!dist/css/*.pkg.*.css',
// funny dance to keep old versioned dist/css/*.pkg.*.js
'!dist/js/**',
'dist/js/*',
'!dist/js/*.pkg.*.js'
]
}
},
// copy over `src/` files to `dist/`
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: 'src/',
dest: 'dist/',
src: [
'*',
'css/**',
'js/**',
'ico/**',
'img/**'
],
filter: 'isFile'
}]
}
},
// compile LESS files in `src/less/` into CSS files
less: {
css: {
options: {
paths: ["src/less"]
},
files: [
{
expand: true,
cwd: 'src/less',
src: ['*.less'],
dest: 'src/css/',
ext: '.css'
}
]
}
},
// compile coffeescript files in `/src/coffee/` into JS files
coffee: {
glob_to_multiple: {
expand: true,
// flatten: true,
cwd: 'src/coffee',
src: ['**/*.coffee'],
dest: 'src/js',
ext: '.js'
}
},
// prep call for usemin (target all html files)
useminPrepare: {
html: [
'dist/*.html'
]
},
// final call for usemin (target all html files)
usemin: {
html: [
'dist/*.html'
],
options: {
dirs: ['dist/']
}
},
// revision a specific set of static files, this can be
// extended to do more files and images too
filerev: {
files: {
src: [
'dist/css/*.pkg.css',
'dist/js/*.pkg.js'
]
}
},
// TODO - support qunit
qunit: {
files: ['test/**/*.html']
},
// validate JS files using jshint (great for catching simple bugs)
jshint: {
files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
},
ignores: [
// enter paths to ignore here, e.g., 'src/js/jquery.js'
]
}
},
// watch command to auto-compile files that have changed
watch: {
coffee: {
files: ['src/**/*.coffee'],
tasks: ['coffee', 'jshint']
},
less: {
files: ['src/**/*.less'],
tasks: ['less']
}
}
});
// Composite tasks...
// run tests
grunt.registerTask('test', ['jshint', 'qunit']);
// like watch, but build stuff at start too!
grunt.registerTask('dev', ['less', 'coffee', 'watch']);
// full build of project to `dist/`
grunt.registerTask('default', ['less', 'coffee', 'jshint', 'clean', 'copy',
'useminPrepare',
'concat', 'uglify', 'cssmin',
'filerev',
'usemin']);
};
在这段代码中,使用了清理、压缩、测试、监听、复制、合并、less和coffee,我们可以在前面用数组遍历的方式逐个加载任务。
less任务的配置是这样子的:
less: {
css: {
options: {
paths: ["src/less"]
},
files: [
{
expand: true,
cwd: 'src/less',
src: ['*.less'],
dest: 'src/css/',
ext: '.css'
}
]
}
}
当然,path是可选的,我们可以在files.src里更改。expand为true时动态生成文件名。coffee中的配置基本类似。
在末尾,我们可以指定监听任务。例如演示的gruntfile里的watch任务,实际执行了两个任务,分别监听coffee文件和less文件,然后编译成js和css。而执行default则会全部执行清理、压缩、测试、监听、复制、合并、less和coffee,最后产出压缩后的css和js文件。