一開始要裝nodejs样悟、然后用npm、bower的時候根本就有點搞不懂⊥バ桑現(xiàn)在終于弄明白一些了窟她。
前言
為什么要安裝nodejs。npm包有什么作用蔼水？
我的理解是安裝nodejs一開始主要是為了npm包順便安裝好震糖。然后npm包可以裝很多的東西。一開始我是懵的趴腋。我想的是npm弄完了它裝在全局的東西我該怎么去引用它呢吊说？后來經(jīng)過一系列的查找和問前輩，現(xiàn)在終于明白了一點优炬，所以來和大家分享颁井。
grunt
是一套前端自動化工具，一個基于nodeJs的命令行工具蠢护，一般用于：
① 壓縮文件
② 合并文件
③ 簡單語法檢查
對于其他用法雅宾，我還不太清楚，我們這里簡單介紹下grunt的壓縮葵硕、合并文件
初學(xué)眉抬，有誤請包涵
準(zhǔn)備階段
1、nodejs環(huán)境
因為要安裝grunt贬芥、bower吐辙、npm都是先需要nodejs的環(huán)境的。這個簡單網(wǎng)上百度nodejs下載蘸劈。下載完了直接安裝昏苏。它會自帶一個npm的包。然后通過這個我們就可以安裝bower威沫、還有一些庫什么的贤惯。
安裝grunt
npm install -g grunt-cli
直接cmd中敲就可以。因為是安裝在全局的都可以調(diào)用棒掠。這條命令將會把grunt命令植入系統(tǒng)路徑孵构，這樣就能在任意目錄運行他，
原因是每次運行g(shù)runt時烟很，它都會使用node的require查找本地是否安裝grunt颈墅，如果找到CLI便加載這個本地grunt庫然后應(yīng)用我們項目中的GruntFile配置蜡镶，并執(zhí)行任務(wù)PS：這段先不要管，安裝完了往下看恤筛。
如何打包
打包需要前提需要一個packsge.json文件和Gruntfile.js文件官还。
package.json
這個文件用來存儲npm模塊的依賴項（比如我們的打包若是依賴requireJS的插件，這里就需要配置）然后毒坛，我們會在里面配置一些不一樣的信息望伦，比如我們上面的file，這些數(shù)據(jù)都會放到package中
Gruntfile.js
這個文件尤其關(guān)鍵煎殷，他一般干兩件事情：
① 讀取package信息
② 插件加載屯伞、注冊任務(wù)，運行任務(wù)（grunt對外的接口全部寫在這里面）
Gruntfile一般由四個部分組成① 包裝函數(shù)這個包裝函數(shù)沒什么東西豪直，意思就是我們所有的代碼必須放到這個函數(shù)里面
module.exports = function (grunt) {//你的代碼}
這個不用知道為什么劣摇，直接將代碼放入即可
② 項目/任務(wù)配置我們在Gruntfile一般第一個用到的就是initConfig方法配置依賴信息
pkg: grunt.file.readJSON('package.json')
這里的 grunt.file.readJSON就會將我們的配置文件讀出，并且轉(zhuǎn)換為json對象然后我們在后面的地方就可以采用pkg.XXX的方式訪問其中的數(shù)據(jù)了值得注意的是這里使用的是underscore模板引擎顶伞，所以你在這里可以寫很多東西uglify是一個插件的饵撑，我們在package依賴項進行了配置，這個時候我們?yōu)橄到y(tǒng)配置了一個任務(wù)uglify（壓縮）唆貌，他會干這幾個事情：① 在src中找到zepto進行壓縮（具體名字在package中找到）② 找到dest目錄，沒有就新建垢乙，然后將壓縮文件搞進去③ 在上面加幾個描述語言這個任務(wù)配置其實就是一個方法接口調(diào)用锨咙，按照規(guī)范來就好，暫時不予關(guān)注追逮，內(nèi)幕后期來這里只是定義了相關(guān)參數(shù)酪刀，但是并未加載實際函數(shù)，所以后面馬上就有一句：grunt.loadNpmTasks('grunt-contrib-uglify');
用于加載相關(guān)插件最后注冊一個自定義任務(wù)（其實也是默認(rèn)任務(wù)）钮孵，所以我們下面的命令行是等效的：
grunt == grunt uglify
合并文件
合并文件依賴于grunt-contrib-concat插件骂倘，所以我們的package依賴項要新增一項然后寫好配置文件即可先壓縮了再合并。關(guān)于package.json和Gruntfile.js怎么寫可以百度一下巴席。
疑惑
一開始我就很奇怪為什么公司做的項目是有bower的包和npm生成的node_module的東西历涝。后來我明白了一點。公司的項目主要用npm來進行代碼的打包壓縮漾唉。而用bower來裝一些插件庫荧库、比如angularjs、jquery赵刑、bootstrap等分衫。其實npm一個東西就可以干完的事情。至今還有疑惑為什么要分開般此。有人能解答疑惑可以在下方評論蚪战。
