为何要用构建工具?
一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
不错的链接
NPM 使用介绍
http://www.runoob.com/nodejs/nodejs-npm.html
------版本号
使用NPM下载和发布代码时都会接触到版本号。
NPM使用语义版本号来管理代码,这里简单介绍一下。
语义版本号分为X.Y.Z三位,分别代表主版本号、次版本号和补丁版本号。当代码变更时,版本号按以下原则更新。
- 如果只是修复bug,需要更新Z位。
- 如果是新增了功能,但是向下兼容,需要更新Y位。
- 如果有大变动,向下不兼容,需要更新X位。
版本号有了这个保证后,在申明第三方包依赖时,除了可依赖于一个固定版本号外,还可依赖于某个范围的版本号。例如"argv": "0.0.x"表示依赖于0.0.x系列的最新版argv。
NPM支持的所有版本号范围指定方式可以查看官方文档。
npm是 Node.js 的包管理器
http://www.gruntjs.net/getting-started
安装cli
npm install -g grunt-cli
上述命令执行完后,grunt
命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。
注意,安装grunt-cli
并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile
在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。
这样就能让多个版本的 Grunt 同时安装在同一台机器上。
cli是如何工作的
每次运行grunt
时,他就利用node提供的require()
系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt
。
grunt项目练手
- 将命令行的当前目录转到项目的根目录下。
- 执行
npm install
命令安装项目依赖的库。 - 执行
grunt
命令。
grunt项目出现在
package.json,就可以管理好模块的依赖关系。
package.json
应当放置于项目的根目录中,与Gruntfile
在同一目录中,并且应该与项目的源代码一起被提交。在上述目录(package.json
所在目录)中运行npm install
将依据package.json
文件中所列出的每个依赖来自动安装适当版本的依赖。
Gruntfile由以下几部分构成:
- "wrapper" 函数
- 项目与任务配置
- 加载grunt插件和任务
- 自定义任务
http://study.163.com/course/introduction.htm?courseId=691008#/courseDetail
Gruntfile
这个是
"wrapper" 函数
每一份 Gruntfile
(和grunt插件)都遵循同样的格式,你所书写的Grunt代码必须放在此函数内:
module.exports = function(grunt) { // Do grunt-related things in here };
http://www.hulufei.com/post/grunt-introduction
我想先花点时间回忆一下作为一个前端需要做的工作(Loading...)
- JS合并
- JS压缩
- CSS压缩
- CSS Sprite
- 图片优化
- 测试
- 静态资源缓存(版本更新)
- ...
对应的,一个全副武装的前端可能会是这样的:
- JSHint
- CSSLint
- Jade
- CoffeeScript
- RequireJS/SeaJS
- Compass/Stylus/Less
- QUnit/Mocha/Jasmine
- ...
就是这么苦逼的设定,但其实也正是有了这些天才的工具和解决方案才让我们的工作变得更美好,WTF
随身装备这么多武器,拔刀的姿势很重要,手忙脚乱焦头烂额的狼狈样肯定是不行的。如果每个工具(任务)对应一个招数的话,Grunt就是用来组合各种华丽连续技的辅助装备。这比喻略显白烂,高端大气国际化的说法叫“工作流”(Workflow)。所以开始进入正题: Grunt锻造指南,参见!