摘要：介紹說明的包管理器，用于插件管理包括安裝卸載管理依賴等使用安裝插件命令提示符執行插件名稱。總結安裝新建文件全局和本地安裝安裝插件新建文件通過命令提示符運行任務。

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

gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。

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

在學習前，先談談大致使用gulp的步驟，給讀者以初步的認識。首先當然是安裝nodejs，通過nodejs的npm全局安裝和項目安裝gulp，其次在項目里安裝所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并寫好配置信息（定義gulp任務），最后通過命令提示符運行gulp任務即可。

安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務

安裝nodejs

1.1. 說明：gulp是基于nodejs，理所當然需要安裝nodejs；

1.2. 安裝：打開nodejs官網，點擊碩大的綠色Download按鈕，它會根據系統信息選擇對應版本（.msi文件）。然后像安裝QQ一樣安裝它就可以了（安裝路徑隨意）。

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

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

2.2. 注：之后操作都是在windows系統下；

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

node -v查看安裝的nodejs版本，出現版本號，說明剛剛已正確安裝nodejs。PS：未能出現版本號，請嘗試注銷電腦重試；

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

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

dir列出文件列表；

cls清空命令提示符窗口內容。

npm介紹

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

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

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

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

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

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

3.2.5. 為什么要保存至package.json？因為node插件包相對來說非常龐大，所以不加入版本管理，將配置信息寫入package.json并將其加入版本管理，其他開發者對應下載即可（命令提示符執行npm install，則會根據package.json下載所有需要的包，npm install --production只下載dependencies節點的包）。

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. 當前目錄已安裝插件：npm list

PS：npm安裝插件過程：從http://registry.npmjs.org下載對應的插件包（該網站服務器位于國外，所以經常下載緩慢或出現異常），解決辦法往下看↓↓↓↓↓↓。
4、選裝cnpm

4.1. 說明：因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，如果npm的服務器在中國就好了，所以我們樂于分享的淘寶團隊干了這事。32個！來自官網：“這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步。”；

4.2. 官方網址：http://npm.taobao.org；

4.3. 安裝：命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安裝完后最好查看其版本號cnpm -v或關閉命令提示符重新打開，安裝完直接使用有可能會出現錯誤；

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

全局安裝gulp

5.1. 說明：全局安裝gulp目的是為了通過她執行gulp任務；

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

5.3. 查看是否正確安裝：命令提示符執行gulp -v，出現版本號即為正確安裝。

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

6.2. 它是這樣一個json文件（注意：json文件內是不能寫注釋的，復制下列內容請刪除注釋）：

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

本地安裝gulp插件

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

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

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

PS：細心的你可能會發現，我們全局安裝了gulp，項目也安裝了gulp，全局安裝gulp是為了執行gulp任務，本地安裝gulp則是為了調用gulp插件的功能。

新建gulpfile.js文件（重要）

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

8.2. 它大概是這樣一個js文件（更多插件配置請查看這里）：

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

9、運行gulp

9.1、說明：命令提示符執行gulp 任務名稱；

9.2、編譯less：命令提示符執行gulp testLess；

9.3、當執行gulp default或gulp將會調用default任務里的所有任務[‘testLess’,’elseTask’]。

總結

安裝nodejs；

新建package.json文件；

全局和本地安裝gulp；

安裝gulp插件；

新建gulpfile.js文件；

通過命令提示符運行gulp任務。

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

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

代碼拆分

Webpack 有兩種組織模塊依賴的方式，同步(默認)和異步（高級）。異步依賴作為分割點，形成一個新的塊。在優化了依賴樹后，每一個異步區塊都作為一個文件被打包。

Loader

Webpack 本身只能處理原生的 JavaScript 模塊，但是 “loader 轉換器”可以將各種類型的資源轉換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。

智能解析

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

插件系統

Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基于這個插件系統運行的，還可以開發和使用開源的 Webpack 插件，來滿足各式各樣的需求。

快速運行

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

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

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

本地安裝

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

簡單使用

1)新建項目（文件夾） 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 主文件(入口文件，第一個被頁面加載的文件） bundle.js 打包后的文件(文件內容包含a.js和a.js依賴的所有文件)

5)頁面使用

注：后面可以用HtmlWebpackPlugin來自動將打包后的js引入，目前只做初步了解，以后有機會再講。

webpack配置文件

webpack.config.js

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

var path = require("path");

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

注：多頁面應用和多入口文件請參考webpack官方中文文檔里有詳解，我在此不再拷貝過來。

運行webpack命令

最簡單的就是直接 使用指令：webpack

由于webpack其實還有很多可以添加配置指令，所以一般都把對應的腳本指令放到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 用于對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似于其他構建工具中“任務(task)”，并提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！

loader模塊加載器

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

style模塊加載器

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

npm install css-loader style-loader --save-dev來安裝這些loader。

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

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

less模塊加載器

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

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

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

url資源加載器

url-loader對圖片的加載器，將采用如果圖片小可以采用base64（內嵌在js中）。 file-loader：對大圖片，默認不（推薦）會嵌入js，所以這個文件會直接拷貝到輸出目錄，需要使用時，直接通過路徑來使用。file-loader就是用來識別文件（在服務器上）的地址

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

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

1. webpack-dev-server

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

安裝webpack-dev-server

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

使用webpack-dev-server

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

或在配置文件里配置

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

具體的參數和如何設置請查看官方文檔的解釋

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

webpack中所有資源（css/img/js）都看為模塊，所以如果一個js中依賴的css,默認情況下會打包到模塊中。 extract-text-webpack-plugin 插件可以把css提取到一個文件，然后通過link引入這個文件即可。 extract-text-webpack-plugin是一個第三方的插件，所以使用之前先要安裝。 安裝：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 鏈接進來
                    use: ["css-loader", "sass-loader"]
                })
            }

plugins: [
        extractSCSS,
    ],

基本的介紹到這，如有一些概念拿不準請去官方文檔看，一些進階的玩法和整體的所有配置，以后有機會可以出一篇作為文章，貼出我自己的配置文件以及注意事項。