webpack+gulp安裝指南

 

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

Webpack是一款用戶打包前端模塊的工具，它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。主要是用來打包在瀏覽器端使用的javascript的。同時也能轉換、捆綁、打包其餘的靜態資源，包括css、image、font file、template等

概念性的東西很少說，直接安裝

（先從安裝gulp開始！！！！！！！）

一、安裝nodejs

1.一、說明：gulp是基於nodejs，理所固然須要安裝nodejs；

1.二、安裝：打開nodejs官網，點擊碩大的綠色Download按鈕，它會根據系統信息選擇對應版本（.msi文件）。而後像安裝QQ同樣安裝它就能夠了（安裝路徑隨意）。

二、使用命令行（若是你熟悉命令行，能夠直接跳到第3步）

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

npm -v查看npm的版本號，npm是在安裝nodejs時一同安裝的nodejs包管理器

三、npm介紹

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

3.二、使用npm安裝插件：命令提示符執行npm install <name> [-g] [--save-dev]；

3.2.一、<name>：node插件名稱。例：npm install gulp-less --save-dev

3.2.二、-g：全局安裝。將會安裝在C:\Users\Administrator\AppData\Roaming\npm，而且寫入系統環境變量；  非全局安裝：將會安裝在當前定位目錄；  全局安裝能夠經過命令行在任何地方調用它，本地安裝將安裝在定位目錄的node_modules文件夾下，經過require()調用；

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

3.2.四、-dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；

3.2.五、爲何要保存至package.json？由於node插件包相對來講很是龐大，因此不加入版本管理，將配置信息寫入package.json並將其加入版本管理，其餘開發者對應下載便可（命令提示符執行npm install，則會根據package.json下載全部須要的包）。

3.四、使用npm卸載插件：npm uninstall <name> [-g] [--save-dev]  PS：不要直接刪除本地插件包

3.五、使用npm更新插件：npm update <name> [-g] [--save-dev]

3.六、查看npm幫助：npm help

3.七、當前目錄已安裝插件：npm list

四、全局安裝gulp

5.一、說明：全局安裝gulp目的是爲了經過她執行gulp任務；

5.二、安裝：命令提示符執行npm install gulp -g；

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

五、新建package.json文件

5.一、說明：package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件；

5.二、它是這樣一個json文件（注意：json文件內是不能寫註釋的，複製下列內容請刪除註釋）：

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

{   "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"   } }

5.三、固然咱們能夠手動新建這個配置文件，可是做爲一名有志青年，咱們應該使用更爲效率的方法：命令提示符執行npm init

六、本地安裝gulp插件

6.一、安裝：定位目錄命令後提示符執行npm install --save-dev；

6.二、本示例以gulp-less爲例（編譯less文件），命令提示符執行npm install gulp-less --save-dev；

6.三、將會安裝在node_modules的gulp-less目錄下，該目錄下有一個gulp-less的使用幫助文檔README.md；

6.四、爲了能正常使用，咱們還得本地安裝gulp：npm install gulp --save-dev；

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

七、新建gulpfile.js文件（重要）

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

7.二、它大概是這樣一個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']); //定義默認任務

//gulp.task(name[, deps], fn) 定義任務  name：任務名稱 deps：依賴任務名稱 fn：回調函數
//gulp.src(globs[, options]) 執行任務處理的文件  globs：處理的文件路徑(字符串或者字符串數組) 
//gulp.dest(path[, options]) 處理完後文件生成路徑

八、運行gulp

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

8.二、編譯less：命令提示符執行gulp testLess；

8.三、當執行gulp default或gulp將會調用default任務裏的全部任務[‘testLess’,’elseTask’]。

九、總結

9.一、安裝nodejs；

9.二、新建package.json文件；

9.三、全局和本地安裝gulp；

9.四、安裝gulp插件；

9.五、新建gulpfile.js文件；

9.六、經過命令提示符運行gulp任務。

 

接下來安裝webpack

用npm 安裝webpack

$ npm install webpack -g

此時 Webpack 已經安裝到了全局環境下，能夠經過命令行 webpack -h 查看相關指令

一般咱們會將webpack安裝到項目依賴，這樣就可使用本地版本的webpack

//進入項目目錄
//肯定已有package.json，沒有就npm init 建立
$ npm install webpack --save-dev

//查看webpack 版本信息
$ npm info webpack
//安裝指定版本
$ npm install webpack@1.31.x --save-dev

若是要使用webpack開發工具，要單獨安裝 webpack-dev-server

$ npm install webpack-dev-server --save-dev

經常使用命令

webpack

構建命令，webpack的經常使用參數

$ webpack --config webpack.min.js //另外一份配置文件

$ webpack --display-error-details //顯示異常信息

$ webpack --watch   //監聽變更並自動打包
 
$ webpack -p    //壓縮混淆腳本，這個很是很是重要！
 
$ webpack -d    //生成map映射文件，告知哪些模塊被最終打包到哪裏了

搞定！！！！