Node.js:Grunt自动构建
Grunt是一个自动化的项目构建工具
- 如果你需要重复的执行像压缩,编译,单元测试,代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务,你所需要做的只是配置好Grunt,这样能很大程度的简化你的工作。
- 如果在团队中使用Grunt,你只需要与其他人员约定好使用Grunt应该规避的问题,就能够很方便的自动化的处理大部分的常见工作任务
大多数的任务Grunt都提供了可用的Grunt插件,并且每天都有插件诞生并发布到社区中。我想你所熟悉的有:
- JSHint: JS代码质量检查工具,类似jsLint
- Uglify: 压缩JS源文件,提高运行时性能
- Less: 将Less编译为CSS
- Sass:将sass编译为css
- CoffeeScript: 将CoffeeScript编译为JavaScript
- CSSLint
- watch: 监视磁盘文件,一旦更改就会重新运行指定的任务,例如使http服务器重新加载源文件
- clean: 用于清理指定文件(夹),一般是构建之前或之后进行
- compass: 调用Compass工具生成CSS文件
- concat: 连接源文件,减少HTTP请求
- copy: 复制文件(夹)
插件清单:http://gruntjs.com/plugins
一般前端需求:js压缩(grunt-yui-compressor,grunt-contrib-uglify:有很多关于js的功能,合并,检查),css压缩(grunt-yui-compressor),Less及coffeeScript格式编译,文件合并(grunt-contrib-concat)
一个重要的需求,自动更新文件:watch(grunt-contrib-watch),将对文件的变动进行自动调用脚本,神器般的存在(监视磁盘文件,一旦更改就会重新运行指定的任务,例如使http服务器重新加载源文件)
更多需要可以看插件清单,其中还有一个clean(grunt-contrib-clean)
开始一个Grunt
1.首先安装Grunt:(需要安装Node.js,直接安装即可)
npm install grunt@VERSION --save-dev --global
2.建立项目依赖文件:在对应的自动构建目录新建package.json
{ "name": "xxx", "version": "4.0.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-concat": "~0.3.0", "grunt-yui-compressor": "~0.3.0", "grunt-contrib-clean": "~0.4.1", "grunt-contrib-copy": "~0.4.0" } }
#是Node.js的基本构建包,编写后,在目录执行
npm install
#会自动在目录下建立所需要的模块及对应的依赖包
3.构建任务文件:在对应的自动构建目录新建Gruntfile.js
module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json') //编写任务,根据不同的插件参数设置任务 xxx:{} ,clean: { build: ['~temp'] } }); // 载入插件 ,将任务所需的插件装载 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-yui-compressor'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-clean'); // 注册任务,在命令行可以通过grunt 任务名称执行批量任务设置 grunt.registerTask('default', ['clean']); grunt.registerTask('build', ['concat', 'cssmin:main', 'uglify:main', 'clean:build']); };
4.编写自己的插件:
http://www.gruntjs.org/article/creating_plugins.html#
说明:http://www.infoq.com/cn/articles/GruntJs/