Yeoman 的好基友 Grunt

Question

前端不能承受之痛

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

下载脚手架工具 grunt-init

npm install -g grunt-init

安装grunt插件模板

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

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

运行 npm install 初始化开发环境。

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

通过 npm publish 发布插件。