Node.js的項(xiàng)目構(gòu)建工具Grunt的安裝與配置教程

字號(hào):


    Grunt是為Node打造的項(xiàng)目構(gòu)建工具,相當(dāng)于C/C++世界中的makefile,可以執(zhí)行像壓縮、編譯、單元測(cè)試、代碼檢查以及打包發(fā)布的任務(wù),下面我們就來一起看一下Node.js的項(xiàng)目構(gòu)建工具Grunt的安裝與配置教程:
    Grunt 基于 Node.js ,用 JS 開發(fā),這樣就可以借助 Node.js 實(shí)現(xiàn)跨系統(tǒng)跨平臺(tái)的桌面端的操作,例如文件操作等等。此外,Grunt 以及它的插件們,都作為一個(gè) 包 ,可以用 NPM 安裝進(jìn)行管理。
    所以 NPM 生成的 package.json 項(xiàng)目文件,里面可以記錄當(dāng)前項(xiàng)目中用到的 Grunt 插件,而 Grunt 會(huì)調(diào)用 Gruntfile.js 這個(gè)文件,解析里面的任務(wù)(task)并執(zhí)行相應(yīng)操作。
    安裝 Grunt-cli
    其實(shí)是安裝 Grunt-cli ,這里安裝Grunt的命令行支持(command line interface,簡稱CLI),在這之后,命令提示符中將會(huì)識(shí)別grunt命令。安裝grunt-cli 并不能稱為安裝Grunt完畢。這是因?yàn)?,Grunt本身不是全局使用的,任何具體的工作目錄,如果要使用Grunt,都需要安裝一次Grunt。這樣做也是因?yàn)椴煌墓ぷ髂夸?,需要通過Grunt做的自動(dòng)化工作也不同,因此需要獨(dú)立配置。
    npm install -g grunt-cli
    —save-dev 參數(shù),表示會(huì)把剛安裝的東西添加到 package.json 文件中。
    生成 package.json 文件
    npm對(duì)工作目錄有一個(gè)要求。這個(gè)要求是:根目錄位置處有一個(gè)package.json
    文件。這個(gè)文件定義了工作目錄對(duì)應(yīng)的一些項(xiàng)目信息(名字,描述),以及包(就是npm模塊)依賴關(guān)系。
    執(zhí)行下面命令便可以初始化
    npm init
    為當(dāng)前工作目錄安裝Grunt和需要的插件
    方法1
    之前我們把Grunt安裝到了全局目錄下,現(xiàn)在需要引入到當(dāng)前項(xiàng)目路徑,與此同時(shí),所需要的插件可能有這些:
    合并文件:grunt-contrib-concat
    語法檢查:grunt-contrib-jshint
    Scss 編譯:grunt-contrib-sass
    壓縮文件:grunt-contrib-uglify
    監(jiān)聽文件變動(dòng):grunt-contrib-watch
    建立本地服務(wù)器:grunt-contrib-connect
    安裝它們的方式可以是:
    npm install --save-dev grunt
    npm install --save-dev 插件1 插件2 插件3
    這個(gè)時(shí)候package.json文件夾里多出了一些代碼。
    "devDependencies": {
     "grunt": "0.4.1"
    },
    方法2-手動(dòng)更改package.json
    "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-cssmin": "~0.7.0"
    }
    手動(dòng)在package.json文件里面添加這個(gè)字段,將需要依賴的包添加進(jìn)去,如果只需安裝最新版本,可以改成 * ,然后執(zhí)行npm install,會(huì)發(fā)現(xiàn)文件夾里多了node_modules文件夾,里面存放的就是我們需要的插件。
    配置
    一般來說,直接使用模板作為配置文件。
    module.exports = function(grunt) {
     "use strict";
     grunt.initConfig({
     //插件配置區(qū)域
     });
     //加載插件任務(wù),要使用誰就添加誰
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-cssmin');
     grunt.loadNpmTasks('grunt-contrib-imagemin');
     // 注冊(cè)任務(wù)
     grunt.registerTask('default', ['cssmin', 'imagemin', 'uglify']);
    };
    grunt.loadNpmTasks()是加載插件任務(wù)。其實(shí)就是說,你如果要使用哪個(gè)插件的功能,請(qǐng)?jiān)谶@部分用這句代碼把插件任務(wù)添加進(jìn)去。
    grunt.registerTask()是注冊(cè)任務(wù),默認(rèn)有一個(gè)default。默認(rèn)的意思就是說,你最后使用的時(shí)候,在目錄的命令提示符里直接輸入grunt便可以執(zhí)行注冊(cè)的任務(wù),相當(dāng)于執(zhí)行了default這個(gè)任務(wù)。
    使用自定義任務(wù)
    可以注冊(cè)更多的任務(wù)命令,使用其他的命名。比如
    grunt.registerTask('custom', ['cssmin', 'imagemin']);
    對(duì)應(yīng)使用的時(shí)候,輸入:
    grunt custom