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

image

问题一: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:插件创建实战

参见 开源一小步,前端一大步 第二部分《插件编写及发布》

进入实战

@TODO

posted @ 2013-09-10 22:41  程序猿小卡  阅读(1666)  评论(3编辑  收藏