Gulp 和 webpack 入門

Gulp

Gulp 是什麼？

gulp是一個基於流的構建工具，能夠自動執行指定的任務，簡潔且高效

Gulp 能作什麼？

1. 開發環境下，想要可以按模塊組織代碼，監聽實時變化
2. css/js預編譯，postcss等方案，瀏覽器前綴自動補全等
3. 條件輸出不一樣的網頁，好比app頁面和mobile頁面
4. 線上環境下，我想要合併、壓縮 html/css/javascritp/圖片，減小網絡請求，同時下降網絡負擔
5. 等等...

安裝 Gulp

npm install -g gulp     //全局安裝
npm install --save-dev gulp //安裝到當前項目並在package.json中添加依賴複製代碼

核心 API 介紹

gulp.task task(name[, deps], fn)

task()方法用於定義任務，傳入名字、依賴任務數組、函數便可，gulp會先執行任務數組，結束後調用定義的函數，能夠經過此手段控制任務的執行順利。

例子：要定義一個任務build來執行css、js、imgs這三個任務，咱們能夠經過指定一個任務數組而不是函數來完成。

gulp.task('build', ['css', 'js', 'imgs']);複製代碼

gulp.src src(globs[, options])

src()方法輸入一個glob或者glob數組，而後返回一個能夠傳遞給插件的數據流

Gulp使用node-glob來從你指定的glob裏面獲取文件：

• app.js 精確匹配
• *.js 能匹配js後綴的文件
• **/*.js 能匹配多級目錄下的js文件（也包含當前目錄下）
• !js/app.js 精確排除

例子：js目錄下包含了壓縮和未壓縮的js文件，咱們想要壓縮尚未被壓縮的文件

gulp.src(['js/**/*.js', '!js/**/*.min.js'])
複製代碼

gulp.dest dest(path[, options])

dest()方法用來寫文件，第一個參數表示最終輸出的目錄名。注意，它沒法容許咱們指明最終輸出的文件名，只能指定輸出文件夾名，並且在文件夾不存在的狀況下會自動建立。

例子：把開發目錄src下的js文件輸出到部署目錄dist下

gulp.src('src/**/*.js')
  .pipe(gulp.dest('dist'))複製代碼

gulp.watch watch(globs[, opts], cb) or watch(globs[, opts], tasks)

watch()方法能夠監聽文件，它接受一個glob或者glob數組以及一個任務數組來執行回調
// 當templates目錄下的模板文件發生變化，自動執行編譯任務

gulp.task('watch', function (event) {
  gulp.watch('templates/*.tmpl.html', ['artTemplate']);
  console.log('Event type: ' + event.type); // added, changed, or deleted 
  console.log('Event path: ' + event.path); // The path of the modified file
});
複製代碼

Gulp.watch()的另外一個很是好的特性是返回watcher對象

• watcher對象能夠監聽不少事件:
  • change 文件變化時觸發
  • end 在watcher結束時觸發
  • error 在出現error時觸發
  • ready 在文件被找到並正被監聽時觸發
  • nomatch 在glob沒有匹配到任何文件時觸發
• Watcher對象也包含了一些能夠調用的方法：
  • watcher.end() 中止watcher
  • watcher.files() 返回watcher監聽的文件列表
  • watcher.add(glob) 將與指定glob相匹配的文件添加到watcher（也接受可選的回調當第二個參數）
  • watcher.remove(filepath) 從watcher中移除個別文件

任務會讓全部的文件匹配js/*.js，而且執行JSHint，而後打印輸出結果，取消文件縮進，最後把他們合併起來，保存爲build/app.js，整個過程以下圖所示：

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});複製代碼

Webpack 

webpack 是什麼？

webpack是模塊化管理工具，使用webpack能夠對模塊進行壓縮、預處理、按需打包、按需加載等。

webpack 有哪些重要特徵？

插件化：webpack自己很是靈活，提供了豐富的插件接口。基於這些接口，webpack開發了不少插件做爲內置功能。
速度快：webpack使用異步IO以及多級緩存機制。因此webpack的速度是很快的，尤爲是增量更新。
豐富的Loaders：loaders用來對文件作預處理。這樣webpack就能夠打包任何靜態文件。
高適配性：webpack同時支持AMD/CommonJs/ES6模塊方案。webpack會靜態解析你的代碼，自動幫你管理他們的依賴關係。此外，webpack對第三方庫的兼容性很好。
代碼拆分：webpack能夠將你的代碼分片，從而實現按需打包。這種機制能夠保證頁面只加載須要的JS代碼，減小首次請求的時間。
優化：webpack提供了不少優化機制來減小打包輸出的文件大小，不只如此，它還提供了hash機制，來解決瀏覽器緩存問題。
開發模式友好：webpack爲開發模式也提供了不少輔助功能。好比SourceMap、熱更新等。
使用場景多：webpack不只適用於web應用場景，也適用於Webworkers、Node.js場景

webpack 如何最佳配置？

webpack官方提供的配置方法是經過module.exports返回一個json，可是這種場景不靈活，不能適配多種場景。
好比要解決：production模式和development模式，webpack的配置是有差別的，大體有兩種思路。
一、兩份配置文件webpack.config.production.js/webpack.config.development.js，而後不一樣場景下，使用不一樣的配置文件。
二、經過module.exports返回函數，該函數能接受參數。

相對來講，第一種更簡單，可是重複配置多；第二種更靈活，推薦第二種方式。
那麼，按返回函數的方式的配置代碼架子以下：

module.exports = function(env) {
    return {
        context: config.context,
        entry: config.src,
        output: {
            path: path.join(config.jsDest, project),
            filename: '[name].js',
            chunkFilename: '[name].[chunkhash:8].js',
            publicPath: '/assets/' + project + '/'
        },
        devtool: "eval",
        watch: false,
        profile: true,
        cache: true,
        module: {
            loaders: getLoaders(env)
        },
        resolve: {
            alias: getAlias(env)
        },
        plugins: getPlugins(env)
    };
}
複製代碼

其中關鍵的配置這兒簡單介紹以下，後續的系列博客會根據每一個點詳細介紹。
context：上下文。
entry：入口文件，是全部依賴關係的入口，webpack從這個入口開始靜態解析，分析模塊之間的依賴關係。
output：打包輸出的配置。
devtools：SourceMap選項，便於開發模式下調試。
watch：監聽模式，增量更新，開發必備！
profile：優化。
cache：webpack構建的過程當中會生成不少臨時的文件，打開cache可讓這些臨時的文件緩存起來，從而更快的構建。
module.loaders：如前文介紹，loaders用來對文件作預處理。這樣webpack就能夠打包任何靜態文件。
resolve.alias：模塊別名，這樣能夠更方便的引用模塊。
plugins：如前文介紹，webpack的一些內置功能均是以插件的形式提供。

webpack和gulp的區別

gulp是基於流的構建工具：all in one的打包模式，輸出一個js文件和一個css文件，優勢是減小http請求，萬金油方案。
webpack是模塊化管理工具，使用webpack能夠對模塊進行壓縮、預處理、打包、按需加載等。

相關面試題

1. 說一下gulp？

gulp是一種自動化構建工具，前端工程化開發的一種工具，加強開發流程，使用方便；

npm 安裝，新建 gulpfile.js, 導入 gulp 模塊，let gulp = require('gulp')

經過 default 任務去定義工做流，最後在終端執行 gulp 來進行自動化操做

npm install gulp-cli -g  //npm全局安裝Gulp
npm init  //在項目根目錄下建立 package.json文件
npm install gulp -save-dev  //安裝 Gulp 依賴包複製代碼

在項目根目錄下，建立 gulpfile.js 文件：

let gulp = require("gulp");
gulp.task("default", function() { //定義名稱爲default的任務
    console.log("this is default task"); //此處定義default任務處理過程
});複製代碼

api很簡單隻有四種

• gulp.task 建立任務 ：參數任務名稱，前置任務數組，回調函數
• gulp.src 尋找文件：經過路徑找到一個或多個文件
• gulp.dest 輸出到指定目錄：若是沒有就新建一個
• gulp.watch 監聽文件變化，執行任務
• pipe具體不清楚，總之，除了gulp.src以外，其餘執行條件都要放在.pipe()中

webpack 和 gulp對比

Gulp 就是爲了規範前端開發流程，實現先後端分離、模塊化開發、版本控制、文件合併與壓縮、mock數據等功能的一個前端自動化構建工具。說的形象點，「Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上咱們能夠對產品進行管理。」 另外，Gulp是經過task對整個開發過程進行構建。

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffee、LESS 等。

Gulp和Webpack功能實現對比：從基本概念、啓動本地Server、sass/less預編譯、模塊化開發、文件合併與壓縮、mock數據、版本控制、組件控制八個方面對Gulp和Webpack進行對比。

基本概念

首先從概念上，咱們能夠清楚地看出，Gulp 和 Webpack 的側重點是不一樣的。

Gulp 側重於前端開發的整個過程的控制管理（側重於流水線），咱們能夠經過給 Gulp 配置不一樣的 task（經過 Gulp 中的 Gulp.task() 的方法的配置，好比啓動 serve、sass/less 預編譯、文件的合併壓縮等等）來讓 Gulp 來實現不一樣的功能，從而構建整個前端開發的流程。

Webpack 有人稱之爲模塊打包機，由此能夠看出 Webpack 更側重於模塊打包，固然咱們能夠把開發中的全部資源（圖片，js文件，css文件等）均可以當作模塊。最初Webpack自己就是爲了前端 js 代碼打包而設計的，後來被擴展到其餘資源的打包處理。Webpack 是經過loader（加載器）和 pluging（插件）對資源進行處理的。

另外咱們知道 Gulp 是對整個過程進行控制，因此在其配置文件（gulpfile.js）中配置的每個task 對該項目中該 task 配置路徑下的全部資源均可以管理。

模塊化開發

所謂模塊化開發，個人理解就是，在開發的時候，把不一樣的開發文件按照他的具體用途進行分類管理，在使用的時候利用 CommonJ、AMD、CMD 將這些資源文件按照必定的要求進行壓縮耦合再加上版本控制處理。

可能這樣的理解或者說發值得商榷，可是我的以爲模塊化就是對內容的管理，是爲了瞭解耦合。

webpack打包文件太大怎麼辦?

webpack 把咱們全部的文件都打包成一個 JS 文件，這樣即便你是小項目，打包後的文件也會很是大。能夠從去除沒必要要的插件，提取第三方庫，代碼壓縮，代碼分割，設置緩存幾個方面着手優化。