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：插件創建實戰

參見 開源一小步，前端一大步 第二部分《插件編寫及發布》

進入實戰

@TODO