未志

巧用 Grunt Options

感谢大猫,博客终于有内容写了。

重构的项目一般有以下特点:

  • 各种大小项目加起来绕地球好几圈儿(@hzlzh发音)
  • 项目目录一致,因为团队都有房事指南
  • Grunt 常用任务就那么几个,任务配置高度一致

不是我们事儿逼,看这些真的很不爽:

  • node_modules, Gruntfile.js 高度一致,你怎么受得鸟?
  • 对于重构来说 package.json 接近残废,这里的作用 npm install 提供依赖
  • 每次优化任务配置,带来的是几十个项目配置文件同时修改
  • NPM Task Module 更新,每个项目都得跑一次 npm update

于是我们希望达到这样的效果:

  • workspace 下保留一份 node_modules, Gruntfile.js, package.json
  • 必须支持个别项目独特立行的 task target.

工作目录是这样的!

/* Workspace Structure
├── proj-A
│ ├── css
│ ├── img
│ ├── node_modules
│ ├── Gruntfile.js
│ └── package.json
├── proj-B
│ ├── css
│ ├── img
│ ├── node_modules
│ ├── Gruntfile.js
│ └── package.json
├── proj-C
│ ├── css
│ ├── img
│ ├── node_modules
│ ├── Gruntfile.js
│ └── package.json
└── README.md
*/

前戏太久,硬货来了~~~~

一、使用软链接

@hzlzh 提出的方案,只需要在 workspace 根目录保留一份。但有个小问题,不灵活,如果某个项目需要单独配置,就比较麻烦了。

另外,大猫说:Windows 下软连接会被 SVN 软件破坏掉。

二、使用全局配置,子项目引用

在 workspace 根保留 GruntConfig.js,子项目中导入。代码如下:

var globalConfig = require('../GruntConfig.js');
//如果需要单独配置,或者覆盖都可以这么干。
globalConfig.watch = {
files: 'css/*.less',
tasks: ['less', 'cssmin', 'copy', 'cleanup','pngmin']
}
Grunt.initConfig(globalConfig);

Gruntfile.js 可以导入全局的配置了,但是 Gruntfile.js、node_modules 还是人手一份。
node_modules 也可以通过 Grunt.loadTasks() 调用指定目录的全局模块,但依然感觉略显不优雅。

三、使用 Grunt Option

直接上代码,不同项目打开自己的 URL。

module.exports = function(grunt){
var folder = grunt.option('folder') || 'default';
var file = grunt.option('file') || 'file';
grunt.initConfig({
open: {
server :{
path: 'http://127.0.0.1:8888/' + folder + "/" + file
}
}
});
grunt.loadNpmTasks('grunt-open');
};

调用:

grunt deploy --folder=f --file=index.html

如果其中某一个项目需要特别的配置呢?

var target = grunt.option('target') || 'default';
var folder = grunt.option('folder') || 'default';
var file = grunt.option('file') || 'file';
grunt.initConfig({
open: {
default :{
path: 'http://127.0.0.1:8888/'+folder+"/"+file
},
sb :{
path: 'http://127.0.0.1:8888/sb/'+folder+"/"+file
}
}
});
grunt.registerTask('deploy', ['open:' + target]);
grunt.loadNpmTasks('grunt-open');

调用:

grunt deploy --target=sb --folder=f --file=index.html

参考资源:http://gruntjs.com/api/grunt.option