Grunt安裝與環(huán)境配置

Grunt 依賴 Node.js 所以在安裝之前確保你安裝了 Node.js。然后開(kāi)始安裝 Grunt
實(shí)際上攀唯,安裝的并不是 Grunt,而是 Grunt-cli,也就是命令行的 Grunt噪窘,這樣你就可以使用 grunt 命令來(lái)執(zhí)行某個(gè)項(xiàng)目中的 Gruntfile.js 中定義的 task 。但是要注意效扫,Grunt-cli 只是一個(gè)命令行工具倔监,用來(lái)執(zhí)行,而不是 Grunt 這個(gè)工具本身

項(xiàng)目的github地址:grunt_test

  • 1.安裝node

node.js安裝教程

  • 2.grunt命令行(CLI) 安裝在全局環(huán)境下菌仁,所以命令是這么寫(xiě)滴浩习!

npm install -g grunt-cli

  • 3.新建一個(gè)項(xiàng)目,名字叫g(shù)runt_test:注意济丘,千萬(wàn)不要叫g(shù)runt谱秽,后面運(yùn)行g(shù)runt命令的時(shí)候會(huì)出錯(cuò)

下面是我的項(xiàng)目目錄


QQ截圖20161222155458.png
  • 4.生成package.json,也可以手動(dòng)生成這樣一個(gè)文件

npm init

生成之后在里面填入以下內(nèi)容


package.json.png
  • 5.安裝grunt

npm install grunt --save-dev 注意查看package.json文件

grunt安裝成功.png

偶闪盔?自動(dòng)把grunt的版本號(hào)加上啦弯院。對(duì)啦,這就是--save-dev的作用

  • 6.安裝grunt插件

js語(yǔ)法檢查:grunt-contrib-jshint
安裝命令:npm install grunt-contrib-jshint --save-dev 下同
css語(yǔ)法檢查:grunt-contrib-csslint
合并文件:grunt-contrib-concat
js壓縮文件:grunt-contrib-uglify
css壓縮文件:grunt-contrib-cssmin
image壓縮文件:grunt-contrib-imagemin
html壓縮文件:grunt-contrib-htmlmin
Sass\Scss 編譯:grunt-contrib-sass
安裝sass插件后泪掀,我運(yùn)行g(shù)runt听绳,發(fā)現(xiàn)報(bào)錯(cuò),提示ruby沒(méi)有安裝异赫,所以如果需要使用到這個(gè)插件的椅挣,要確保自己的電腦上是否有裝ruby,沒(méi)有的話要進(jìn)行安裝
sudo yum install ruby # CentOS, Fedora, 或 RHEL 系統(tǒng)
sudo apt-get install ruby-full # Debian 或 Ubuntu 系統(tǒng)
brew install ruby #蘋果系統(tǒng)
Less 編譯:grunt-contrib-less
監(jiān)聽(tīng)文件變動(dòng):grunt-contrib-watch

建立本地服務(wù)器:grunt-contrib-connect

上面這些插件都安裝好后塔拳,注意看package.json文件中的內(nèi)容


grunt插件安裝成功.png
  • 7.配置Gruntfile.js

這里是對(duì)每個(gè)需要的插件進(jìn)行配置


grunt.initConfig.png

插件太多了鼠证,挑其中一個(gè)(uglify,用于js壓縮)進(jìn)行詳細(xì)說(shuō)明


grunt-contrib-uglify.png

grunt是任務(wù)機(jī)制靠抑,我在這里給定了combine量九、compress、fileCompress三個(gè)任務(wù),執(zhí)行g(shù)runt時(shí)會(huì)按順序執(zhí)行三個(gè)任務(wù)

uglify:{    
    options:{        
        sourceMap: false,        
        stripBanners: true,        
        //壓縮后的文件注釋信息        
        banner :'/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n',        
        footer:'\n/*!修改于<%= grunt.template.today("yyyy-mm-dd") %>  */'    
    },    
    combine: {        
        files: {           
             'build/static/js/compress-<%= pkg.name %>-<%= pkg.version %>.min.js': ['dev/static/js/*.common.js'],            
            'build/static/js/compress.common.min.js': ['dev/static/js/*/*.common.js']        
        }    
    },    
    compress:{        
        options:{            
            report:"min",
        },        
        files:[{                
                expand:true,                
                cwd:'dev/static/js',                
                src:['*.js','!*.min.js','!*.common.js'],                
                dest:'build/static/js',                
                ext:'.min.js'           
        }]    
    },    
    fileCompress:{        
        options:{                 
        },        
        files:[{                
            expand:true,                
            cwd:'dev/static/js',                
            src:['**/*.js','!**/*.min.js','!**/*.common.js'],                
            dest:'build/static/js/',                
            ext:'.min.js'            
        }]    
    }
},

uglify:combine 用來(lái)合并文件
uglify:compress用來(lái)壓縮文件
uglify:fileCompress也是用來(lái)壓縮文件
下面兩個(gè)的區(qū)別在于 files中的src:*/.js用來(lái)匹配所有的js荠列,注意类浪,輸出的時(shí)候會(huì)保留目錄層次,如果是合并到一個(gè)文件中肌似,就把dest寫(xiě)成

dest: 'build/static/js/common.js'费就,并且不寫(xiě)ext就可以

grunt配置總體圖

grunt配置一覽圖.png

最后一行代碼是注冊(cè)任務(wù),當(dāng)然川队,除了default力细,我們也可以注冊(cè)到別的Task上去,比如grunt.registerTask('compress', ['uglify:build']);
如果想要執(zhí)行這個(gè) task固额,我們就不能只輸入 grunt 命令了眠蚂,我們需要輸入 grunt compress命令來(lái)執(zhí)行這條 task,而這條 task 的任務(wù)是 uglify 下面的 build 任務(wù)对雪,也就是說(shuō)河狐,我們只會(huì)執(zhí)行 uglify 里面 build 定義的任務(wù),而不會(huì)執(zhí)行 uglify 里面定義的其他任務(wù)瑟捣。
這里需要注意的是,task 的命名不能與后面的任務(wù)配置同名栅干,也就是說(shuō)這里的 compress 不能命名成 uglify迈套,這樣會(huì)報(bào)錯(cuò)或者產(chǎn)生意外情況

  • 8.運(yùn)行查看效果

在grunt_test目錄下,運(yùn)行g(shù)runt碱鳞,我現(xiàn)在是默認(rèn)執(zhí)行uncss和htmlmin

grunt_done.png

詳細(xì)代碼放在github上面了桑李,鏈接地址:grunt_test

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市窿给,隨后出現(xiàn)的幾起案子贵白,更是在濱河造成了極大的恐慌,老刑警劉巖崩泡,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件禁荒,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡角撞,警方通過(guò)查閱死者的電腦和手機(jī)呛伴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)谒所,“玉大人热康,你說(shuō)我怎么就攤上這事×恿欤” “怎么了姐军?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我奕锌,道長(zhǎng)著觉,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任歇攻,我火速辦了婚禮固惯,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘缴守。我一直安慰自己葬毫,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布屡穗。 她就那樣靜靜地躺著贴捡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪村砂。 梳的紋絲不亂的頭發(fā)上烂斋,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音础废,去河邊找鬼汛骂。 笑死,一個(gè)胖子當(dāng)著我的面吹牛评腺,可吹牛的內(nèi)容都是我干的帘瞭。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼蒿讥,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蝶念!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起芋绸,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤媒殉,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后摔敛,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體廷蓉,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年舷夺,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了苦酱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡给猾,死狀恐怖疫萤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情敢伸,我是刑警寧澤扯饶,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響尾序,放射性物質(zhì)發(fā)生泄漏钓丰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一每币、第九天 我趴在偏房一處隱蔽的房頂上張望携丁。 院中可真熱鬧,春花似錦兰怠、人聲如沸梦鉴。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)肥橙。三九已至,卻和暖如春秸侣,著一層夾襖步出監(jiān)牢的瞬間存筏,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工味榛, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留椭坚,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓搏色,卻偏偏與公主長(zhǎng)得像藕溅,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子继榆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 快速入門 Grunt和 Grunt 插件是通過(guò) npm 安裝并管理的,npm是 Node.js 的包管理器汁掠。Gru...
    你不知道的你我不知道的我閱讀 376評(píng)論 0 0
  • 對(duì)網(wǎng)站資源進(jìn)行優(yōu)化略吨,并使用不同瀏覽器測(cè)試并不是網(wǎng)站設(shè)計(jì)過(guò)程中最有意思的部分,但是這個(gè)過(guò)程中的很多重復(fù)的任務(wù)能夠使用...
    懵逼js閱讀 1,073評(píng)論 0 8
  • gulpjs是一個(gè)前端構(gòu)建工具考阱,與gruntjs相比翠忠,gulpjs無(wú)需寫(xiě)一大堆繁雜的配置參數(shù),API也非常簡(jiǎn)單乞榨,學(xué)...
    依依玖玥閱讀 3,157評(píng)論 7 55
  • gulpjs是一個(gè)前端構(gòu)建工具秽之,與gruntjs相比,gulpjs無(wú)需寫(xiě)一大堆繁雜的配置參數(shù)吃既,API也非常簡(jiǎn)單考榨,學(xué)...
    井皮皮閱讀 1,306評(píng)論 0 10
  • UIEdgeInsets 內(nèi)嵌 UIOffset 偏移 Value 轉(zhuǎn)換 (拓展) 初始化 各種結(jié)構(gòu)體 轉(zhuǎn)化 NS...
    居然是村長(zhǎng)閱讀 862評(píng)論 1 1