刀脏、將代碼模塊化之后，我們需要模塊加載器來管理這些模塊
**npm
*解析
node package managernode包管理器是基于couchdb的一個數(shù)據(jù)庫超凳，
詳細記錄了每個包的信息愈污，包括作者、版本轮傍、依賴暂雹、授權(quán)信息等。
*作用
管理node包pakeage创夜，包括：安裝杭跪、卸載、更新驰吓、查看涧尿、搜索、發(fā)布等檬贰。
將開發(fā)者從繁瑣的包管理工作中解放出來姑廉，更加專注于功能的開發(fā)。
類似App Store 翁涤、豌豆莢桥言、360助手的用途
*使用
1 安裝Node同時獲贈npm
2 在GitBush里通過命令行操作
○ npm -v 查看npm版本號
○ sudo npm install npm -g 更新npm版本
3 下載package
○ npm install xxxx 本地安裝 ● 存放在當(dāng)前node_modules文件夾 ● 只能在當(dāng)前目錄下使用，通過require調(diào)用
○ npm install -g xxxx 全局安裝 ● 存放在指定系統(tǒng)文件夾/usr/local/lib/node_modules ● 供命令行(command line)使用的迷雪，比如grunt限书，無法require ● 可能會有權(quán)限限制=> sodu...... 管理員身份 ● 可能比較慢=> cnpm...... 國內(nèi)鏡像地址
○ npm uninstall xxxx 卸載
**4 發(fā)布package **
○ npm init 在當(dāng)前目錄下生成配置文件 package.json
■ package.json
· □ 解析： 以key&vaule的形式列出一個清單 □ 作用： 配置pkg的基本信息；指導(dǎo)npm如何安裝這個pkg □ 重要屬性： bin 可執(zhí)行文件目錄 => 設(shè)置全局快捷鍵(寫入path命令) scripts 定義一些操作方式 => 設(shè)置本地快捷鍵 dependencies 運行pkg功能時的依賴包 => 產(chǎn)品模式 devDependencies 開發(fā)pkg時的依賴包（測試用）=> 開發(fā)模式
○ npm install --save xxxx 安裝的同時章咧，在配置信息dependencies上保存這個 運行依賴包的信息
○ npm install --save-dev kkkk 安裝的同時，在配置信息devDependencies上保存這個 開發(fā)依賴包的信息
■ 有了package.json文件： □ 直接 npm install 就可以安裝所有的(運行+開發(fā))依賴包到node_modules中 □ 所以提交代碼時能真，也不用提交node_modules這個文件夾了 □ 執(zhí)行 npm install --production 即選擇產(chǎn)品模式赁严，就只安裝dependencies里的依賴包了
■ scripts 在本地使用node時： □ 執(zhí)行scripts里的key值扰柠，就運行vaule里的命令; 即 通過key值配置命令，通過vaule值配置命令代碼 □ npm key key值是npm規(guī)定范圍內(nèi)的單詞疼约，直接運行 ; □ npm run key key值不是npm規(guī)定范圍內(nèi)的詞卤档，要加run才可以運行
■ bin在全局使用node時： □ 全局安裝時，pkg被放入指定系統(tǒng)文件夾/usr/local/lib/node_modules程剥， 同時在/usr/local/bin下創(chuàng)建一個快捷方式劝枣，指向/usr/local/lib/node_modules 此時pkg就是一個命令行工具了 => □ 輸入bin信息的 key值 就運行vaule里指向的文件 即 通過key值配置全局命令，通過vaule值配置命令文件的地址 □ 這個屬性和本地沒關(guān)系织鲸！用不上舔腾！
■ node_modules 查找模塊時： □ requeire() 有三種形式： 絕對路徑 / 相對路徑 / node封裝好的核心模塊(比如path) 如果是以上三種形式，就根據(jù)地址直接找 □ 如果不是以上三種形式搂擦，就在上一級目錄遞歸查找 node_modules目錄 □ 如果查找玩所有的module.path數(shù)組還沒有稳诚，就報錯
■ 總結(jié)一下，如何發(fā)布一個包：
0 注冊npm 得到ID
1 npm init 創(chuàng)建package.json瀑踢，配置pkg信息? 加入github地址
2 npm install --save安裝依賴包扳还，并計入pkg信息
3 bin.js新建可執(zhí)行文件，require(./index) =>指向主文件 :(可以理解為創(chuàng)建快捷方式 吧
4 index.js新建主程序文件橱夭，require(xxxx) 使用依賴包氨距，編譯代碼
5 npm login登錄npm
6 npm publish發(fā)布pkg
*版本區(qū)別
○ npm2 ：以pkg依賴來安裝，純粹的不共享包原則=>重復(fù)安裝
○ npm3 ：以pkg字母序安裝棘劣，優(yōu)先安裝在第一層級目錄=> 避免重復(fù)安裝
○ yarn versus npm ：互聯(lián)網(wǎng)巨頭對npm進行優(yōu)化后得到的一個包管理器衔蹲，改善了npm一些版本管理混亂；重復(fù)下載呈础；下載速度慢等問題舆驶。
*webpack
module building system
雖然npm完成了js模塊管理，
但是前端代碼還需要處理類似CSS而钞、png沙廉、webfonts等非JS的文件。
所以我們需要一個既能處理JS又能處理別的資源文件的加載器 臼节。
*解析
webpack 是一個前端資源模塊化管理和打包工具撬陵。
webpack不關(guān)心模塊內(nèi)容、文件格式网缝，所有文件都是模塊,只是處理的方式不同巨税；
它只是按 配置文件中規(guī)定的方式來處理相應(yīng)模塊。
*作用
它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源粉臊。
還可以將按需加載的模塊進行代碼分隔草添，等到實際需要的時候再異步加載。
*優(yōu)點
○ 1模塊不一定要遵守 CMD 或 AMD 等規(guī)范
○ 2只打包真正被依賴的資源扼仲，按需加載
○ 3可以深度定制打包方案
*配置文件
webpack.config.js □ 解析： 以module.exports對象作為一個出口 以key&vaule的形式列出一個清單 □ 作用： 構(gòu)建一個兼容本地開發(fā)和生產(chǎn)環(huán)境的富應(yīng)用web工程远寸。 □ 重要屬性： entry 定義整個編譯過程的起點 output 定義整個編譯過程的終點 module 定義模塊module的處理方式 plugin 對編譯完成后的內(nèi)容進行二度加工 resolve.alias 定義模塊的別名
*使用過程
1 使用npm安裝webpack
2 寫好配置文件webpack.config
3 寫好主文件main.js
4 執(zhí)行webpack生成 編譯后的主文件
舉例
webpack-demo 目標(biāo)目錄
?index.html 網(wǎng)頁
?webpack.config.js webpack配置文件
?webpack_JS webpack目錄
▼dist 輸出目錄
?main.js 編譯后的主文件
? module1.js 模塊1
? module2.js 模塊2
? main.js 引用了模塊的主程序文件
**gulp
*解析
○ 基于Nodejs的一個自動化抄淑、批量化地處理重復(fù)性工作的自動任務(wù)運行器。
○ 與webpack側(cè)重于模塊打包不同驰后，gulp側(cè)重于流程管理肆资。
○ 借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級的輸出灶芝，直接變成后一級的輸入 ..使得在操作上非常簡單郑原。
*作用
自動化地完成 javascript/coffee/sass/less/html/image/css等文件的
測試 => 檢查 => 合并 => 壓縮 => 格式化 => 瀏覽器自動刷新 => 部署文件生成
并監(jiān)聽文件在改動后重復(fù)指定的這些步驟。
*使用過程
1 npm install gulp-cli -g全局安裝gulp（無法require）
2 npm init生成package.json
3 npm install --save-dev xx 本地安裝gulp 并寫入開發(fā)依賴
4 npm install --save-dev kk本地安裝gulp插件
5 新建 gulpfile.js 使用插件編譯代碼
6運行任務(wù)`
gulp API
gulp.src 引入需要處理的文件
gulp.dest 導(dǎo)出處理好的文件
gulp.task 定義一個任務(wù)
guip.watch 監(jiān)聽任務(wù)變化
demo
■ 圖片壓縮
□ 安裝插件
npm install --save gulp-imagemin
□ 使用插件
gulpfile.js
var gulp = require('gulp');
var imagemin = require('gulp-imagemin'); 引入插件
gulp.task('img', function(argument){ 定義一個test任務(wù)
gulp.src('src/imgs/*.img') 處理所有.img后綴的文件
.pipe(imagemin()) 任務(wù)調(diào)用的模塊
.pipe(gulp.dest('dist/imgs')); 處理之后的文件
});
■ CSS 壓縮合并：
□ 安裝插件
$ npm install --save gulp-minify-css
$ npm install --save gulp-rename
$ npm install --save gulp-concat
□ 使用插件
gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
gulp.task('css', function(argument) {
gulp.src('src/css/*.css')
.pipe(concat('merge.css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('dist/css/'));
});
■ JS 壓縮合并：
□ 安裝插件
$ npm install --save gulp-uglify
$ npm install --save gulp-concat
$ npm install --save gulp-rename
□ 使用插件
gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('js', function(argument) {
gulp.src('src/js/*.js')
.pipe(concat('merge.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'));
});
