使用GruntJS構建Web程式 2

2021-08-27 12:35:10 字數 2182 閱讀 9146

前一篇記錄了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 ...