node+bower+gulp+webpack初見

node

node模塊管理是經過NPM（即 Node Package Manage，是 NodeJS 模塊管理工具）來處理各模塊之間的依賴。NPM按樹狀結構來管理的，支持某模塊的不一樣版本。

[前提是本機已安裝node、git環境]，配置好某項目的npm配置文件package.json後，在當前項目目錄下用命令npm install 或npm install --save-dev安裝便可，自動將package.json中的模塊安裝到node-modules文件夾下。

*使用npm安裝一些包緩慢或安裝失敗，建議使用淘寶鏡像。

鏡像使用方法（三種辦法任意一種都能解決問題，建議使用第三種，將配置寫死，下次用的時候配置還在）:
1.經過config命令
npm config set registry https://registry.npm.taobao.org 
npm info underscore （若是上面配置正確這個命令會有字符串response）
2.命令行指定
npm --registry https://registry.npm.taobao.org info underscore 
3.編輯 ~/.npmrc 加入下面內容
registry = https://registry.npm.taobao.org

搜索鏡像: https://npm.taobao.org
創建或使用鏡像,參考: https://github.com/cnpm/cnpmjs.org

bower

bower是使用nodejs開發，用於web包管理。web包一般認爲由html+css+javascript構成。若是愈來愈多得開源項目都託管在github上，bower只須要將github上項目加上一個配置文件既能夠使用bower方式使用安裝包。做爲包管理，bower能提供添加新web包，更新web包，刪除web包，發佈web包功能，管理包依賴。

bower是經過npm安裝和管理的：npm install -g bower 

配置好某項目的bower配置文件bower.json後，在當前項目目錄下用命令bower install安裝便可，自動將bower.json中的模塊安裝到bower-components文件夾下。

node.js

node.js 是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎。目的是爲了提供撰寫可擴展網絡程序，如Web服務。

npm vs bower

npm是用來下載安裝node js的第三方工具包，也能夠用來發布你本身開發的工具包。

bower是一個web包管理的工具，管理一些js庫，好比說jquery，bootstrap等。經過bower，你就不用本身去找jQuery文件了，經過配置文件就能夠自動完成了。

gulp

gulp：處理html壓縮/預處理/條件編譯，圖片壓縮，精靈圖自動合併等任務

gulpfile.js：gulp的配置文件，引入了全部的gulp子任務。參見gulp 入門

webpack

webpack是模塊化管理的工具，使用webpack可實現模塊按需加載，構建js/css任務，模塊預處理，模塊打包等功能。可學習webpack入門指南。

 

整合gulp & webpack

webpack是衆多gulp子任務中比較複雜的部分，主要對JS/CSS進行相關處理。 包括：模塊分析、按需加載、JS代碼壓縮合並、抽離公共模塊、SourceMap、PostCSS、CSS代碼壓縮等等...