Gulp:基於流的自動化構建工具

時間 2019-11-11

標籤 gulp 基於自動化構建工具欄目 JavaScript 简体版

原文原文鏈接

前言

先說說爲何會使用gulp。css

當你沉醉於擼代碼之時，是否想過正規的前端代碼須要走哪些流程，複雜的不說了，有幾點想必你也思考過，好比：前端

一、代碼的壓縮合並、圖片壓縮怎麼搞；

二、代碼校驗，是否規範；

三、Less是什麼鬼？咋用呢？

做爲一名新世紀富有朝氣的九零後大軍一員，雖爲碼農，心卻蓬勃啊。對於新技術和新工具必然有着極大的興趣，gulp在當下已不算太新鮮的技術，這次正逢機會，必然拿來練練手。node

咱們第四迭代構建工具用的是Grunt，此次第五迭代採用gulp，相對於前者，gulp屬於晚輩，易於使用，配置簡單，上手快，速度快。git

一、什麼是Gulp

Gulp.js是一種基於流，代碼優於配置的新一代構建工具。官網給出的解釋是：一、自動化；二、平臺移植性；三、富生態系統；四、簡單，詳細的解釋咱們後面講。github

二、Gulp特性

· 易於使用

遵循代碼優於配置策略，維護Gulp更像是寫代碼，Gulp可讓簡單的任務簡單，複雜的任務更可管理；正則表達式

· 構建快速

優於Gulp基於Node.js，經過流式操做，減小頻繁的IO操做，更快構建項目（Grunt即是頻繁IO）；npm

· 插件高質

Gulp 有嚴格的插件指導策略，確保插件能簡單高質的工做。而且你可使用NPM享用超過2000個插件，甚至能夠本身開發併發布；json

· 易於學習

構建就像流管道同樣，輕鬆加愉快。少許的API，使用起來so easy；gulp

三、Gulp安裝和使用

一、Gulp是基於Node.js的，因此先安裝Node.js，這裏不作贅述，經過英文官網下載或者中文網下載安裝。

二、確保正確安裝了Nodejs環境，而後用如下命令全局方式安裝Gulp：

$ npm install gulp -g

三、若是想在安裝的時候把gulp寫進項目package.json文件的依賴中，則能夠加上-save-dev：

$ npm install --save-dev gulp

四、在項目根目錄建立gulpfile.js文件：

var gulp = require('gulp');

gulp.task('default', function() {

    console.log('hello world');

});

五、運行Gulp：

$ gulp

默認任務（名爲'default'）將被執行，控制檯輸出 hello world。api

若是須要運行指定任務，使用 gulp taskname命令。

四、Gulp API

使用gulp僅需知道4個API便可：gulp.task()，gulp.src()，gulp.dest()，gulp.watch()，因此很容易就能掌握，下面針對這四種作一個簡單介紹：

gulp.src(globs[, options])

gulp.src() 方法正是用來獲取流的，但要注意這個流裏的內容不是原始的文件流，而是一個虛擬文件對象流，這個虛擬文件對象中存儲着原始文件的路徑、文件名、內容等信息，本文暫不對文件流進行展開，你只需簡單的理解能夠用這個方法來讀取你須要操做的文件就好了，globs 參數是文件匹配模式(相似正則表達式)，用來匹配文件路徑(包括文件名)，固然這裏也能夠直接指定某個具體的文件路徑。當有多個匹配模式時，該參數能夠爲一個數組。 options 爲可選參數。一般狀況下咱們不須要用到，暫不考慮。

gulp.dest(path[,options])

gulp.dest() 方法是用來寫文件的，path 爲寫入文件的路徑，options 爲一個可選的參數對象，一般咱們不須要用到，暫不考慮。

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

gulp.task 方法用來定義任務， name 爲任務名， deps 是當前定義的任務須要依賴的其餘任務，爲一個數組。當前定義的任務會在全部依賴的任務執行完畢後纔開始執行。若是沒有依賴，則可省略這個參數， fn 爲任務函數，咱們把任務要執行的代碼都寫在裏面。該參數也是可選的。

gulp.watch(glob[, opts], tasks)

gulp.watch() 用來監視文件的變化，當文件發生變化後，咱們能夠利用它來執行相應的任務，例如文件壓縮等。 glob 爲要監視的文件匹配模式，規則和用法與 gulp.src() 方法中的glob相同。opts 爲一個可選的配置對象，一般不須要用到，暫不考慮。 tasks 爲文件變化後要執行的任務，爲一個數組。