chyingp commented 10 years ago

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

哪些优势

环境/平台依赖小（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：插件创建实战

首先我们看下官方教程里参考教程：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发布插件
进入实战

。。。（待填坑）

bigzhu commented 10 years ago

很有用

chyingp commented 10 years ago

@bigzhu 谢谢支持 :)

chyingp / blog