Yeoman的好基友：Grunt
grunt介绍
前端不能承受之痛
1、这是我们的生活
- 文件压缩：YUI Compressor、Google Closure
- 文件合并：fiddler + qzmin
- 文件校验：jshint
- 雪碧图：cssGaga
- sass编译：sass/compass
- 文件打包：require + r.js / seajs + wpm
- 。。。
2、究竟痛在哪里
下载难 /（版本）管理难
YUI Compressor：https://github.com/yui/yuicompressor
Google Closure：https://code.google.com/p/closure-compiler/downloads/list
jshint：http://www.jshint.com/
其他：。。。
环境依赖、平台依赖
YUI Compressor：JDK
fiddler/qzmin：win平台
sass/compass：ruby
配置使用难：
系统参数设置
工具自己的命令、参数
3、谁能拯救我们
grunt
问题一：grunt是什么
- 官方定义：The JavaScript Task Runner
- 民间版本：基于任务的JavaScript项目构建工具
- 关键词：JavaScript、Task、Runner
问题二：grunt是什么
曾经grunt是： 命令行工具+构建工具+脚手架工具+预定义任务
- 命令行工具（grunt-cli）
- 构建工具（grunt）
- 脚手架工具（grunt-init）
- 预定义任务（concat、uglify、jshint等）
grunt-cli：
The Grunt command line interface.
Note: The job of the grunt command is to load and run the version of Grunt you have installed locally to your project, irrespective of its version.
grunt：
The JavaScript Task Runner
grunt-init：
Grunt-init is a scaffolding tool used to automate project creation.
问题三：为什么使用grunt
哪些优势
-
环境/平台依赖小（node环境、grunt-cli）
-
便捷的下载/版本管理（npm）
-
插件丰富，极易扩展（目前300++）http://gruntjs.com/plugins
-
活跃的社区
demo演示：运行任务
步骤一：安装package
npm install
步骤二：运行任务
文件合并
grunt dist
js文件校验
grunt jshint
grunt项目的要素
Gruntfile.js：必要
Grunt任务的主入口文件，主要作用在于任务的定义与配置
package.json
项目组件依赖的描述文件，非必要
grunt我们需知道什么
- 基于nodejs（npm）
- 核心是任务、任务配置（配置即任务）
- 大部分是文件操作 （基于blob、minmath的文件匹配）
- 一系列API：file、config、log、task、option等
- 自定义插件
grunt任务配置
方式一：grunt.initConfig
grunt.initConfig({ clean: { dev: [ 'dev/' ], },
jshint: { all: ['dist/js/**/*.js'] }
});
方式二：grunt.config 接口
grunt.config.set('jshint', { all: ['dist/js/**/*.js'] });
grunt.task.run('jshint');
grunt Task类型
根据任务类型：
- 普通任务
- 插件任务
根据任务位置：
- 内部任务：Gruntfile.js里定义
- 外部任务：Gruntfile.js之外定义
grunt Task类型：根据任务类型
普通任务
任务定义
grunt.task.registerTask('hello', '一个无聊的demo', function() {
console.log( '大家好，我是grunt任务！');
});
运行任务
grunt hello
插件任务
任务内部
grunt.registerMultiTask('inline', "同样是很无聊的demo", function() {
var files = this.filesSrc; // 用户
files.forEach(function(filepath){
console.log( '输出文件路径：'+ filepath );
};
});
任务配置
grunt.initConfig({
'inline': {
test: {
src: [$config.distPath+'**/*.html']
}
}
});
运行任务
grunt inline
grunt Task类型：根据任务位置
内部任务
最常见，Gruntfile.js里定义，可满足绝大部分项目的需求
grunt.task.registerTask('hello', '一个无聊的demo', function() {
console.log( '大家好，我是grunt任务！');
});
外部任务
定义方式跟内部任务基本没区别，在Grungfile.js之外定义，用到的时候显式加载即可
加载插件：
grunt.loadNpmTasks('grunt-cdn');
加载自定义任务
grunt.task.loadTasks('proj-task/core');
grunt-inline：一个自定义的grunt插件
grunt-inline作用：将html页面里的声明了__inline标记的<script>、<link>、<img>等变成内联资源，即：
- script：内联脚本
- link：内联样式
- img：base64
例子：下面这段script标签，声明了__inline，构建阶段会被行内脚本替换
构建前
<script type="text/javascript" src="modules/common/js/nohost.js?__inline"></script>
构建后
<script> void function(){setTimeout(function(){var b=document.cookie.match(/(^| )nohost_guid=([^;]*)(;|$)/);if(!b?0:decodeURIComponent(b[2])){var b="/nohost_htdocs/js/SwitchHost.js?random="+Math.random(),c=function(a){try{eval(a)}catch(b){}window.SwitchHost&&window.SwitchHost.init&&window.SwitchHost.init()},a=window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest;a.open("GET",b);a.onreadystatechange=function(){4==a.readyState&&((200<=a.status&&300>a.status||304===a.status||1223===a.status|| 0===a.status)&&c(a.responseText),a=null)};a.send(null)}},1500)}(); </script>
grunt-inline：插件创建实战
参见 开源一小步，前端一大步 第二部分《插件编写及发布》
进入实战
@TODO
github博客： https://github.com/chyingp/blog
新浪微博： http://weibo.com/chyingp
站酷主页： http://www.zcool.com.cn/u/346408/