Yeoman的好基友：Grunt

[chyingp]

Yeoman的好基友：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

哪些优势

1. 环境/平台依赖小（node环境、grunt-cli）
2. 便捷的下载/版本管理（npm）
3. 插件丰富，极易扩展（目前300++）http://gruntjs.com/plugins
4. 活跃的社区

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：插件创建实战

首先我们看下官方教程里参考教程：http://gruntjs.com/creating-plugins

1. 下载脚手架工具grunt-init

   npm install -g grunt-init
   

2. 安装grunt插件模板

   git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
   

3. 在任意空目录下运行grunt-init gruntplugin

4. 运行npm install初始化开发环境

5. 声明所有权：其实就是修改package.json里的name、version等字段

6. 通过npm publish发布插件

进入实战

。。。（待填坑）

[bigzhu]

很有用

[chyingp]

@bigzhu 谢谢支持 :)