摘要：介紹說(shuō)明的包管理器，用于插件管理包括安裝卸載管理依賴等使用安裝插件命令提示符執(zhí)行插件名稱。總結(jié)安裝新建文件全局和本地安裝安裝插件新建文件通過(guò)命令提示符運(yùn)行任務(wù)。

眾所周知目前比較火的工具就是gulp和webpack，但webpack和gulp卻有所不同，本人兩者的底層研究不是很深，所以本篇只做入門，只介紹各自環(huán)境下的環(huán)境配置和對(duì)應(yīng)能實(shí)現(xiàn)的效果。

gulp是前端開發(fā)過(guò)程中對(duì)代碼進(jìn)行構(gòu)建的工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器；她不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過(guò)程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。

gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器， 她能自動(dòng)化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測(cè)試、檢查、合并、壓縮、格式化、瀏覽器自動(dòng)刷新、部署文件生成，并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟。在實(shí)現(xiàn)上，她借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級(jí)的輸出，直接變成后一級(jí)的輸入，使得在操作上非常簡(jiǎn)單。

在學(xué)習(xí)前，先談?wù)劥笾率褂胓ulp的步驟，給讀者以初步的認(rèn)識(shí)。首先當(dāng)然是安裝nodejs，通過(guò)nodejs的npm全局安裝和項(xiàng)目安裝gulp，其次在項(xiàng)目里安裝所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并寫好配置信息（定義gulp任務(wù)），最后通過(guò)命令提示符運(yùn)行g(shù)ulp任務(wù)即可。

安裝nodejs -> 全局安裝gulp -> 項(xiàng)目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運(yùn)行任務(wù)

安裝nodejs

1.1. 說(shuō)明：gulp是基于nodejs，理所當(dāng)然需要安裝nodejs；

1.2. 安裝：打開nodejs官網(wǎng)，點(diǎn)擊碩大的綠色Download按鈕，它會(huì)根據(jù)系統(tǒng)信息選擇對(duì)應(yīng)版本（.msi文件）。然后像安裝QQ一樣安裝它就可以了（安裝路徑隨意）。

使用命令行（如果你熟悉命令行，可以直接跳到第3步）

2.1. 說(shuō)明：什么是命令行？命令行在OSX是終端（Terminal），在windows是命令提示符（Command Prompt）；

2.2. 注：之后操作都是在windows系統(tǒng)下；

2.3. 簡(jiǎn)單介紹gulp在使用過(guò)程中常用命令，打開命令提示符執(zhí)行下列命令（打開方式：window + r 輸入cmd回車）：

node -v查看安裝的nodejs版本，出現(xiàn)版本號(hào)，說(shuō)明剛剛已正確安裝nodejs。PS：未能出現(xiàn)版本號(hào)，請(qǐng)嘗試注銷電腦重試；

npm -v查看npm的版本號(hào)，npm是在安裝nodejs時(shí)一同安裝的nodejs包管理器，那它有什么用呢？稍后解釋；

cd定位到目錄，用法：cd + 路徑 ；

dir列出文件列表；

cls清空命令提示符窗口內(nèi)容。

npm介紹

3.1. 說(shuō)明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）；

3.2. 使用npm安裝插件：命令提示符執(zhí)行npm install [-g] [--save-dev]；

3.2.1. ：node插件名稱。例：npm install gulp-less --save-dev

3.2.2. -g：全局安裝。將會(huì)安裝在C:UsersAdministratorAppDataRoamingnpm，并且寫入系統(tǒng)環(huán)境變量； 非全局安裝：將會(huì)安裝在當(dāng)前定位目錄； 全局安裝可以通過(guò)命令行在任何地方調(diào)用它，本地安裝將安裝在定位目錄的node_modules文件夾下，通過(guò)require()調(diào)用；

3.2.3. --save：將保存配置信息至package.json（package.json是nodejs項(xiàng)目配置文件）；

3.2.4. -dev：保存至package.json的devDependencies節(jié)點(diǎn)，不指定-dev將保存至dependencies節(jié)點(diǎn)；一般保存在dependencies的像這些express/ejs/body-parser等等。

3.2.5. 為什么要保存至package.json？因?yàn)閚ode插件包相對(duì)來(lái)說(shuō)非常龐大，所以不加入版本管理，將配置信息寫入package.json并將其加入版本管理，其他開發(fā)者對(duì)應(yīng)下載即可（命令提示符執(zhí)行npm install，則會(huì)根據(jù)package.json下載所有需要的包，npm install --production只下載dependencies節(jié)點(diǎn)的包）。

3.3. 使用npm卸載插件：npm uninstall [-g] [--save-dev] PS：不要直接刪除本地插件包

3.3.1. 刪除全部插件：npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻煩

3.3.2. 借助rimraf：npm install rimraf -g 用法：rimraf node_modules

3.4. 使用npm更新插件：npm update [-g] [--save-dev]

3.4.1. 更新全部插件：npm update [--save-dev]

3.5. 查看npm幫助：npm help

3.6. 當(dāng)前目錄已安裝插件：npm list

PS：npm安裝插件過(guò)程：從http://registry.npmjs.org下載對(duì)應(yīng)的插件包（該網(wǎng)站服務(wù)器位于國(guó)外，所以經(jīng)常下載緩慢或出現(xiàn)異常），解決辦法往下看↓↓↓↓↓↓。
4、選裝cnpm

4.1. 說(shuō)明：因?yàn)閚pm安裝插件是從國(guó)外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常，如果npm的服務(wù)器在中國(guó)就好了，所以我們樂(lè)于分享的淘寶團(tuán)隊(duì)干了這事。32個(gè)！來(lái)自官網(wǎng)：“這是一個(gè)完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步?！?；

4.2. 官方網(wǎng)址：http://npm.taobao.org；

4.3. 安裝：命令提示符執(zhí)行npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安裝完后最好查看其版本號(hào)cnpm -v或關(guān)閉命令提示符重新打開，安裝完直接使用有可能會(huì)出現(xiàn)錯(cuò)誤；

注：cnpm跟npm用法完全一致，只是在執(zhí)行命令時(shí)將npm改為cnpm（以下操作將以cnpm代替npm）。

全局安裝gulp

5.1. 說(shuō)明：全局安裝gulp目的是為了通過(guò)她執(zhí)行g(shù)ulp任務(wù)；

5.2. 安裝：命令提示符執(zhí)行cnpm install gulp -g；

5.3. 查看是否正確安裝：命令提示符執(zhí)行g(shù)ulp -v，出現(xiàn)版本號(hào)即為正確安裝。

新建package.json文件
6.1. 說(shuō)明：package.json是基于nodejs項(xiàng)目必不可少的配置文件，它是存放在項(xiàng)目根目錄的普通json文件；

6.2. 它是這樣一個(gè)json文件（注意：json文件內(nèi)是不能寫注釋的，復(fù)制下列內(nèi)容請(qǐng)刪除注釋）：

{
  "name": "test",   //項(xiàng)目名稱（必須）
  "version": "1.0.0",   //項(xiàng)目版本（必須）
  "description": "This is for study gulp project !",   //項(xiàng)目描述（必須）
  "homepage": "",   //項(xiàng)目主頁(yè)
  "repository": {    //項(xiàng)目資源庫(kù)
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //項(xiàng)目作者信息
    "name": "surging",
    "email": "surging2@qq.com"
  },
  "license": "ISC",    //項(xiàng)目許可協(xié)議
  "devDependencies": {    //項(xiàng)目依賴的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

本地安裝gulp插件

7.1. 安裝：定位目錄命令后提示符執(zhí)行cnpm install --save-dev；

7.2. 本示例以gulp-less為例（編譯less文件），命令提示符執(zhí)行cnpm install gulp-less --save-dev；
7.3. 將會(huì)安裝在node_modules的gulp-less目錄下，該目錄下有一個(gè)gulp-less的使用幫助文檔README.md；

7.4. 為了能正常使用，我們還得本地安裝gulp：cnpm install gulp --save-dev；

PS：細(xì)心的你可能會(huì)發(fā)現(xiàn)，我們?nèi)职惭b了gulp，項(xiàng)目也安裝了gulp，全局安裝gulp是為了執(zhí)行g(shù)ulp任務(wù)，本地安裝gulp則是為了調(diào)用gulp插件的功能。

新建gulpfile.js文件（重要）

8.1、說(shuō)明：gulpfile.js是gulp項(xiàng)目的配置文件，是位于項(xiàng)目根目錄的普通js文件（其實(shí)將gulpfile.js放入其他文件夾下亦可）。

8.2. 它大概是這樣一個(gè)js文件（更多插件配置請(qǐng)查看這里）：

//導(dǎo)入工具包 require("node_modules里對(duì)應(yīng)模塊")
var gulp = require("gulp"), //本地安裝gulp所用到的地方
    less = require("gulp-less");
 
//定義一個(gè)testLess任務(wù)（自定義任務(wù)名稱）
gulp.task("testLess", function () {
    gulp.src("src/less/index.less") //該任務(wù)針對(duì)的文件
        .pipe(less()) //該任務(wù)調(diào)用的模塊
        .pipe(gulp.dest("src/css")); //將會(huì)在src/css下生成index.css
});
 
gulp.task("default",["testLess", "elseTask"]); //定義默認(rèn)任務(wù) elseTask為其他任務(wù)，該示例沒(méi)有定義elseTask任務(wù)
 
//gulp.task(name[, deps], fn) 定義任務(wù)  name：任務(wù)名稱 deps：依賴任務(wù)名稱 fn：回調(diào)函數(shù)
//gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件  globs：處理的文件路徑(字符串或者字符串?dāng)?shù)組) 
//gulp.dest(path[, options]) 處理完后文件生成路徑

9、運(yùn)行g(shù)ulp

9.1、說(shuō)明：命令提示符執(zhí)行g(shù)ulp 任務(wù)名稱；

9.2、編譯less：命令提示符執(zhí)行g(shù)ulp testLess；

9.3、當(dāng)執(zhí)行g(shù)ulp default或gulp將會(huì)調(diào)用default任務(wù)里的所有任務(wù)[‘testLess’,’elseTask’]。

總結(jié)

安裝nodejs；

新建package.json文件；

全局和本地安裝gulp；

安裝gulp插件；

新建gulpfile.js文件；

通過(guò)命令提示符運(yùn)行g(shù)ulp任務(wù)。

作為入門只介紹最基礎(chǔ)的使用方法，如想進(jìn)一步提升自己的自動(dòng)化構(gòu)建環(huán)境，可參考gulp官方給出的例子，根據(jù)自己的需求自定義一套自動(dòng)化流程環(huán)境，如有需要我可以額外寫一篇文章介紹自己的gulp和webpack配置以及注意點(diǎn)。

webpack為”模塊化管理”和”打包工具”，它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時(shí)候再異步加載。通過(guò) loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

代碼拆分

Webpack 有兩種組織模塊依賴的方式，同步(默認(rèn))和異步（高級(jí)）。異步依賴作為分割點(diǎn)，形成一個(gè)新的塊。在優(yōu)化了依賴樹后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。

Loader

Webpack 本身只能處理原生的 JavaScript 模塊，但是 “l(fā)oader 轉(zhuǎn)換器”可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。

智能解析

Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫(kù)，無(wú)論它們的模塊形式是CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時(shí)候，允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")。

插件系統(tǒng)

Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的，還可以開發(fā)和使用開源的 Webpack 插件，來(lái)滿足各式各樣的需求。

快速運(yùn)行

Webpack 使用異步 I/O （NodeJs）和多級(jí)緩存提高運(yùn)行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。

全局安裝webpack （安裝webpack命令）

安裝： npm i webpack -g //全局安裝 測(cè)試： webpack version 只需要安裝一次；

本地安裝

全局安裝相當(dāng)于只是安裝了webpack命令，如果需要在我們的項(xiàng)目中使用， 那么還需要本地安裝（項(xiàng)目中安裝） 安裝：npm i webpack --save-dev 安裝穩(wěn)定版本（大多都是最新版） npm i webpack@2.1.0-beta.11 --save-dev

簡(jiǎn)單使用

1)新建項(xiàng)目（文件夾） npm init 初始化package.json包配置文件

2)本地安裝 npm i webpack --save-dev //保存到包配置文件中

3)新建模塊 scripts 文件夾（命明任意） a.js
b.js index.html

4)命令行打包 webpack 源文件 輸出文件 webpack a.js bundle.js a.js 主文件(入口文件，第一個(gè)被頁(yè)面加載的文件） bundle.js 打包后的文件(文件內(nèi)容包含a.js和a.js依賴的所有文件)

5)頁(yè)面使用

注：后面可以用HtmlWebpackPlugin來(lái)自動(dòng)將打包后的js引入，目前只做初步了解，以后有機(jī)會(huì)再講。

webpack配置文件

webpack.config.js

webpack提供了配置文件，我們可以把webpack后面的參數(shù)放到配置文件中，之后直接使用webpack命令執(zhí)行。關(guān)于這個(gè)的初始化模版，可以參考下我這個(gè)(摘取于官方中文文檔)

var path = require("path");

module.exports = {
//入口文件
  entry: "./foo.js",
//輸出目錄和文件  
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "foo.bundle.js"
  }
};

注：多頁(yè)面應(yīng)用和多入口文件請(qǐng)參考webpack官方中文文檔里有詳解，我在此不再拷貝過(guò)來(lái)。

運(yùn)行webpack命令

最簡(jiǎn)單的就是直接 使用指令：webpack

由于webpack其實(shí)還有很多可以添加配置指令，所以一般都把對(duì)應(yīng)的腳本指令放到packjson文件，如下是我的：

"scripts": {
        "dev": "webpack-dev-server --hot --watch --progress --profile --colors ",
        "build": "webpack -p --colors --watch",
        "start": "webpack-dev-server --open",
        "clean": "npm cache clean -f"
    },

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時(shí)預(yù)處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader 可以將文件從不同的語(yǔ)言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！

loader模塊加載器

webpack原生僅支持JavaScript模塊加載（require(‘/xxx.js’)），如果需要提供其他的模塊加載器，那么我們就必須進(jìn)行安裝。 如果直接通過(guò)require去加載非js文件，那么會(huì)報(bào)錯(cuò)。 You may need an appropriate loader to handle this file type.（提示差加載器） Cannot resolve module "style-loader"（沒(méi)有安裝模塊。指定加載器，沒(méi)有安裝）

style模塊加載器

css-loader:css文件加載器； style-loader: style文件加載器；

npm install css-loader style-loader --save-dev來(lái)安裝這些loader。

使用模塊加載器，你還需要在webpack.config.js中進(jìn)行配置。

styles/a.css body{ background: pink; } scripts/a.js //導(dǎo)入css模塊 require("../styles/a.css");

less模塊加載器

less是CSS 預(yù)處理語(yǔ)言,使用less可以提高編寫css效率，webpack中也可以對(duì)less模塊加載。 安裝：npm install less less-loader --save-dev

styles/myless.less @color: #00ff0f; h1,h2{ color: @color; }

scripts/a.js //導(dǎo)入myless.less模塊。 require("../styles/myless.less"); 執(zhí)行命令webpack,開始打包。

url資源加載器

url-loader對(duì)圖片的加載器，將采用如果圖片小可以采用base64（內(nèi)嵌在js中）。 file-loader：對(duì)大圖片，默認(rèn)不（推薦）會(huì)嵌入js，所以這個(gè)文件會(huì)直接拷貝到輸出目錄，需要使用時(shí)，直接通過(guò)路徑來(lái)使用。file-loader就是用來(lái)識(shí)別文件（在服務(wù)器上）的地址

var image = require("../images/xxxx.jpg"); console.log(image);

注：其他加載器請(qǐng)參考官方文檔了解并使用如：html-loader、babel-loader等

1. webpack-dev-server

webpack-dev-server是webpack中常用的工具，它是一個(gè)服務(wù)器,基于express，并且提供熱加載功能，方便我們開發(fā)。

安裝webpack-dev-server

npm install webpack-dev-server -g npm install webpack-dev-server //本地安裝

使用webpack-dev-server

webpack-dev-server服務(wù)器啟動(dòng)后，默認(rèn)使用iframe幫我們自動(dòng)刷新。 執(zhí)行webpack-dev-server --hot --inline; --hot 采用熱部署，不用F5就可以刷新頁(yè)面（AJAX）。 --inline無(wú)需刷新頁(yè)面就可以更新(刷新的代碼直接嵌套在我們的打包文件中)。

或在配置文件里配置

devServer: {
        host: "192.168.0.135",
        //壓縮代碼
        compress: false,
        contentBase: [path.join(__dirname, "dist"), path.join(__dirname, "src")],
        port: 9000,
        watchContentBase: true
    }

具體的參數(shù)和如何設(shè)置請(qǐng)查看官方文檔的解釋

2. extract-text-webpack-plugin 提取css

webpack中所有資源（css/img/js）都看為模塊，所以如果一個(gè)js中依賴的css,默認(rèn)情況下會(huì)打包到模塊中。 extract-text-webpack-plugin 插件可以把css提取到一個(gè)文件，然后通過(guò)link引入這個(gè)文件即可。 extract-text-webpack-plugin是一個(gè)第三方的插件，所以使用之前先要安裝。 安裝：npm i extract-text-webpack-plugin --save-dev

使用

const extractSCSS = new ExtractTextPlugin("css/styles.css");

{
                test: /.scss$/,
                use: extractSCSS.extract({
                    fallback: "style-loader",
                    //如果需要，可以在 sass-loader 之前將 resolve-url-loader 鏈接進(jìn)來(lái)
                    use: ["css-loader", "sass-loader"]
                })
            }

plugins: [
        extractSCSS,
    ],

基本的介紹到這，如有一些概念拿不準(zhǔn)請(qǐng)去官方文檔看，一些進(jìn)階的玩法和整體的所有配置，以后有機(jī)會(huì)可以出一篇作為文章，貼出我自己的配置文件以及注意事項(xiàng)。