Grunt、Gulp和Webpack區別

一、Grunt

　　Grunt 的出現早於 Gulp，Gulp 是後起之秀。他們本質都是經過 JavaScript 語法實現了 shell script 命令的一些功能。好比利用 jshint 插件實現 JavaScript 代碼格式檢查這一功能。早期須要手動在命令行中輸入  jshint test.js，而 Grunt 則經過 Gruntfile.js 進行配置

// Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    // js格式檢查任務
    jshint: {
      src: 'src/test.js'
    }
    //  代碼壓縮打包任務
    uglify: {}
  });
  // 導入任務插件
  grunt.loadnpmTasks('grunt-contrib-uglify');
  // 註冊自定義任務, 若是有多個任務能夠添加到數組中
  grunt.regusterTask('default', ['jshint'])
}

二、Gulp

　　Gulp 吸收了 Grunt 的優勢，擁有更簡便的寫法，經過流（stream）的概念來簡化多任務之間的配置和輸出，讓任務更加簡潔和容易上手。Gulp 仍是工具鏈、構建工具，能夠配合各類插件作js壓縮，css壓縮，less編譯，替代手工實現自動化工做。經過配置 gulpfile.js 文件來實現，一個簡單的 gulpfile.js 配置以下

// gulpfile.js
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');

// 代碼檢查任務 gulp 採起了pipe 方法，用流的方法直接往下傳遞
gulp.task('lint', function() {
  return gulp.src('src/test.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// 壓縮代碼任務
gulp.task('compress'， function() {
  return gulp.src('src/test.js')
    .pipe(uglify())
    .pipe(gulp.dest('build'));
});

// 將代碼檢查和壓縮組合，新建一個任務
gulp.task('default', ['lint', 'compress']);

　　好多人以爲，規則和結構都比較像，其實 gulp 自己就是借鑑了grunt 的經驗進行升級和加入一些新特性。正由於流管理多任務配置輸出方式的提升，人們逐漸選擇使用 gulp 而放棄 grunt

三、browserify

　　browserify 是早期的模塊打包工具，是先驅者，踏實的瀏覽器端使用 CommonJS 規範的格式組織代碼成爲可能。在這以前，由於 CommonJS 與瀏覽器特性的不兼容問題，更多使用的是 AMD 規範，固然後來又發展了ES6模塊規範

　　假設有以下模塊 add.js 和文件 test.js，test.js 使用 CommonJS 規範導入了模塊 add.js

// add.js
module.exports = function(a, b) {
  return a + b
};

// test.js
var add = require('./add.js');
console.log(add(1, 2));  // 3

 

　　咱們知道，若是直接執行是執行不成功的，由於瀏覽器沒法識別 CommonJS 語法，而 browserify就是用來處理這個問題的，他將 CommonJS 語法進行裝換，在命令行執行以下

browserify test.js > bundle.js

　　生成的 bundle.js 就是已經處理完畢，可供瀏覽器執行使用的文件，只須要將它插入到<script>中便可。

四、webpack

　　webpack 是後起之秀，它支持了 AMD 和 CommonJS 類型，經過 loader 機制也可使用 ES6 模塊格式。還有強大的 code splitting 。webpack 仍是文件打包工具，能夠把項目的各類js文、css文件等打包合併成一個或多個文件，主要用於模塊化方案，預編譯模塊的方案。webpack 是一個十分強大的工具，它正在向一個全能型的構建工具發展。

　　webpack 經過配置文件 webpack.config.js 進行功能配置，一個配置案例以下：

'use strict'
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const utils = require('./utils')

var config = {
  // 入口
  entry: {
    app: './src/main.js'
  },
  // 出口
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  // 加載器配置（須要加載器轉化的模塊類型）
  module: {
    rules: [
      {
        test: '/\.css$/',
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
  // 插件
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
  ]

}

module.exports = config

 

　　一個相對比較全面的配置主要包含五個部分：入口、出口、加載器、插件、模式、分別指定了開始讀取文件的位置，編譯後輸出文件的路徑，ES6語法轉化加載器，更復雜功能的插件及指定執行的環境變量。

區別：

　　Gulp 應該和 Grunt比較，他們的區別我就不說了，說說用處吧。Gulp / Grunt 是一種工具，可以優化前端工做流程。好比自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來講，就是使用Gulp/Grunt，而後配置你須要的插件，就能夠把之前須要手工作的事情讓它幫你作了。

　　說到 browserify / webpack ，那還要說到 seajs / requirejs 。這四個都是JS模塊化的方案。其中seajs / require 是一種類型，browserify / webpack 是另外一種類型。

　　seajs / requirejs：是一種在線「編譯」模塊的方案，至關於在頁面加載一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、module 這些東西，也就實現了模塊化。

　　browserify / webpack：是一種預編譯模塊的方案，相比較上面，這個方案更加智能。沒用過 browserify，這裏以 webpack 爲例。首先，它是預編譯的，不須要在瀏覽器中加載解釋器。另外，你在本地直接寫 JS ，不論是 AMD/CMD/ES6 風格的模塊化，它都能認識而且編譯成瀏覽器認識的 JS。