前端自動化構建工具--Gulp&&Webpack

　　前端構建工具的做用能夠認爲是對源項目文件或資源進行文件級處理，將文件或資源處理成須要的最佳輸出結構和形式。

　　在處理過程當中，咱們能夠對文件進行模塊化引入、依賴分析、資源合併、壓縮優化、文件嵌入、路徑替換、生成資源包等多種操做，這樣就能完成不少本來須要手動完成的事情，極大地提升開發效率。

1、Gulp

　　Gulp 是一個基於流的自動化構建工具。除了能夠管理任務和執行任務，還支持監聽文件、讀寫文件。Gulp 被設計的很是簡單，只經過下面5個方法就能夠支持幾乎全部構建場景：

• 經過 gulp.task 註冊一個任務；
• 經過 gulp.run 執行任務；
• 經過 gulp.watch 監聽文件變化；
• 經過 gulp.src 讀取文件；
• 經過 gulp.dest 寫完文件。

Gulp 最大的特色是引入了流的概念，同時提供了一系列經常使用插件去處理流，流能夠在插件之間傳遞，大體使用以下：

// 引入 Gulp
var gulp = require("gulp");
// 引入插件
var jshint = require("gulp-jshint");
var sass = require("gulp-sass");
var concat = require("gulp-concat");
....
// 新建SCSS任務
gulp.task('scss', function() {
    // 讀取文件，經過管道餵給插件
    gulp.src('./scss/*.scss')
        // SCSS 插件將 scss 文件編譯成 css
        .piple(sass())
        // 輸出文件
        .piple(guilp.dest('./css'));
});
// 合併壓縮 JavaScript 文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .piple(concat('all.js'))
        .piple(uglify())
        .piple(gulp.dest('./dest'));
});
// 監聽文件變化
gulp.task('watch', function() {
    // 當 SCSS 文件被編輯時執行 SCSS 任務
    gulp.watch('./scss/*.scss', ['sass']);
    gulp.watch('./js/*.js', ['scripts']);
});

　　優勢：好用又不失靈活，既能夠單獨完成構建，也能夠和其餘工具搭配使用。

　　缺點：和Grunt 相似。集成度不高，要寫不少配置後才能夠用，沒法作到開箱即用。

2、Webpack

　　Webpack 是一個打包模塊化的JavaScript的工具，在Webpack裏一切文件皆模塊，經過 loader 轉換文件，經過Plugin 注入鉤子，最後輸出由多個模塊組合成的文件。Webpack 專一於構建模塊化項目。

　　一切文件，如JavaScript、CSS、SCSS、圖片、模板，對於Webpack 來講都是一個個模塊，這樣的好處是能清晰地描繪各個模塊之間的依賴關係，以方便Webpack進行組合和打包，通過Webpack的處理，最終會輸出瀏覽器能使用的靜態資源。

　　Webpack具備很大的靈活性，能配置處理文件的方式，使用方法大體以下：

module.exports = {
    // 全部模塊的入口，webpack從入口開始遞歸解析出全部依賴的模塊
    entry: './app.js',
    output: {
        // 將入口所依賴的全部模塊打包成一個文件 bundle.js 輸出
        filename: 'bundle.js'
    }
}

　　優勢：

• 專一於處理模塊化的項目，能作到開箱即用、一步到位；
• 可經過 Plugin 擴展，完整好用又不失靈活性；
• 使用場景不侷限於Web開發；
• 社區龐大活躍，常常引入緊跟時代發展的新特性，能爲大多數場景找到已有的開源擴展；
• 良好的開發體驗；

　　缺點：只能用於採用模塊化開發的項目。

3、爲何選擇Webpack

　　通過多年的發展，Webpack 已經成爲構建工具中的首選，這是由於：

• 大多數團隊在開發新項目時會採用緊跟時代的技術，這些技術幾乎都會採用「模塊化+新語言+新框架」，Webpack能夠爲這些新項目提供一站式的解決方案；
• Webpack有良好的生態和維護團隊，能提供良好的開發體驗並保證質量；
• Webpack 被全世界大量的Web開發者使用和驗證，能找到各個層面所須要的教程和經驗分享。

4、Gulp與Webpack的區別

　　Gulp強調的是前端開發的工做流程，咱們能夠經過配置一系列的task，定義task處理的事務（例如文件壓縮合並、雪碧圖、啓動server、版本控制等），而後定義執行順序，來讓gulp執行這些task，從而構建項目的整個前端開發流程。 簡單說就一個Task Runner，就是用來跑一個一個任務的。Gulp 不能解決的是 js module 的問題，是你寫代碼時候如何組織代碼結構的問題。Gulp工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務。

 

　　Webpack是一個前端模塊化方案，更側重模塊打包，咱們能夠把開發中的全部資源（圖片、js文件、css文件等）都當作模塊，經過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。

　　相同點：文件合併與壓縮（css,js），sass/less預編譯，啓動server，版本控制。

　　不一樣點：Gulp嚴格上講，模塊化不是他強調的東西，他旨在規範前端開發流程。webpack更是明顯強調模塊化開發，而那些文件壓縮合並、預處理等功能，不過是他附帶的功能。