前一篇記錄了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語法規範,如下
}
devdependencies中的grunt在前一篇已經安裝了,grunt-contrib-jshint/grunt-contrib-uglify/grunt-contrib-concat則沒有安裝。三個分別對於三個任務(task)
此時,開啟命令列工具進入到專案根目錄,敲如下命令: npm install
再檢視根目錄,發現多了個node_modules目錄,包含了四個子目錄,見圖
gruntfile.js也是放在專案根目錄下,幾乎所有的任務都定義在該檔案中,它就是乙個普通的js檔案,裡面可以寫任意js**而不僅侷限於json。和package.json一樣它也要和原始碼一樣被提交到svn或git。
gruntfile.js由以下內容組成
module.exports = function(grunt) ;
專案和任務配置
載入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']);
};
開啟命令列,進入到專案根目錄,敲 grunt
從列印資訊看出成功的合併和壓縮並生成了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 ...