使用GruntJS構建Web程式 2

前一篇記錄了grunt的安裝，這篇介紹下怎麼使用gruntjs來搭建乙個前端專案，然後使用grunt合併，壓縮js檔案。

大概有如下步驟

新建專案bejs

新建檔案package.json

新建檔案gruntfile.js

命令列執行grunt任務

原始碼放在src下，該目錄有兩個js檔案，selector.js和ajax.js。編譯後**放在dest，這個grunt會自動生成。

package.json放在根目錄下，它包含了該項目的一些元資訊，如專案名稱、描述、版本號，依賴包等。它應該和原始碼一樣被提交到svn或git。 現在的專案結構如下

package.json內容需符合json語法規範，如下

}

此時，開啟命令列工具進入到專案根目錄，敲如下命令: npm install

再檢視根目錄，發現多了個node_modules目錄，包含了四個子目錄，見圖

gruntfile.js也是放在專案根目錄下，幾乎所有的任務都定義在該檔案中，它就是乙個普通的js檔案，裡面可以寫任意js**而不僅侷限於json。和package.json一樣它也要和原始碼一樣被提交到svn或git。

gruntfile.js由以下內容組成

// do grunt-related things in here

};專案和任務配置

載入grunt外掛程式和任務

定製執行任務

該示例完成以下任務

合併src下的檔案（ajax.js/selector.js）為domop.js

壓縮domop.js為domop.min.js

這兩個檔案都放在dest目錄下

最終的gruntfile.js如下

module.exports = function(grunt) 

},uglify : ,
build : 
}});
// 載入concat和uglify外掛程式，分別對於合併和壓縮
grunt.loadnpmtasks('grunt-contrib-concat');
grunt.loadnpmtasks('grunt-contrib-uglify');
// 註冊任務
grunt.registertask('default', ['concat', 'uglify']);
};

從列印資訊看出成功的合併和壓縮並生成了dest目錄及期望的檔案，這時的專案目錄下多了dest，如下

ok，這裡介紹了2個常見任務concat和uglify，jshint等沒有介紹。gruntfile.js裡的**也沒有一一解讀，感興趣的同學可在gruntjs的官方文件找到。

相關：bejs

使用GruntJS構建Web程式 2

前一篇記錄了grunt的安裝，這篇介紹下怎麼使用gruntjs來搭建乙個前端專案，然後使用grunt合併，壓縮js檔案。大概有如下步驟 新建專案bejs 新建檔案package.json 新建檔案gruntfile.js 命令列執行grunt任務 原始碼放在src下，該目錄有兩個js檔案，selec...

使用GruntJS構建Web程式 2

前一篇記錄了grunt的安裝，這篇介紹下怎麼使用gruntjs來搭建乙個前端專案，然後使用grunt合併，壓縮js檔案。大概有如下步驟 新建專案bejs 新建檔案package.json 新建檔案gruntfile.js 命令列執行grunt任務 原始碼放在src下，該目錄有兩個js檔案，selec...

構建web應用

請求方法的判斷 function req,res 路徑解析 http parser將路徑解析為req.url 客戶端 function req,res res.writehead 200 res.end file 查詢字串 node提供了querystring模組用於處理這部分資料 var url ...