gulp和webpack入門介紹

時間  2019-11-16
標籤 gulp webpack 入門 介紹 欄目 JavaScript 简体版
原文   原文鏈接

gulp

前言

衆所周知目前比較火的工具就是gulp和webpack，但webpack和gulp卻有所不一樣，本人二者的底層研究不是很深，因此本篇只作入門，只介紹各自環境下的環境配置和對應能實現的效果。javascript

各自特性和特色

gulp

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

特色

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

快速入門

在學習前，先談談大體使用gulp的步驟，給讀者以初步的認識。首先固然是安裝nodejs，經過nodejs的npm全局安裝和項目安裝gulp，其次在項目裏安裝所須要的gulp插件，而後新建gulp的配置文件gulpfile.js並寫好配置信息（定義gulp任務），最後經過命令提示符運行gulp任務便可。前端

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

  1. 安裝nodejsnode

1.1. 說明：gulp是基於nodejs，理所固然須要安裝nodejs；webpack

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

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

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

2.2. 注：以後操做都是在windows系統下；

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

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

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

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

dir列出文件列表；

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

  1. npm介紹

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

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

3.2.1. <name>：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 <name> [-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 <name> [-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下載對應的插件包（該網站服務器位於國外，因此常常下載緩慢或出現異常），解決辦法往下看↓↓↓↓↓↓。
四、選裝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）。

  1. 全局安裝gulp

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

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

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

  1. 新建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"
  }
}

  1. 本地安裝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插件的功能。

  1. 新建gulpfile.js文件（重要）

8.一、說明：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]) 處理完後文件生成路徑

九、運行gulp

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

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

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

  1. 總結

  • 安裝nodejs；

  • 新建package.json文件；

  • 全局和本地安裝gulp；

  • 安裝gulp插件；

  • 新建gulpfile.js文件；

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

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

webpack

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 可以以使人難以置信的速度快速增量編譯。

快速入門

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

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

  1. 本地安裝

全局安裝至關於只是安裝了webpack命令，若是須要在咱們的項目中使用， 那麼還須要本地安裝（項目中安裝） 安裝：npm i webpack --save-dev 安裝穩定版本（大多都是最新版） npm i webpack@2.1.0-beta.11 --save-dev

  1. 簡單使用

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)頁面使用

<script src="scripts/bundle.js"></script>

注：後面能夠用HtmlWebpackPlugin來自動將打包後的js引入，目前只作初步瞭解，之後有機會再講。

  1. 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官方中文文檔裏有詳解，我在此再也不拷貝過來。

  1. 運行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文件！

  1. loader模塊加載器

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

  1. 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");

  1. 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,開始打包。

  1. 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,
    ],

基本的介紹到這，若有一些概念拿不許請去官方文檔看，一些進階的玩法和總體的全部配置，之後有機會能夠出一篇做爲文章，貼出我本身的配置文件以及注意事項。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程