“流式”前端構建工具——gulp.js 簡介
Grunt 一直是前端領域構建工具(任務執行器或許更準確一些,因為前端構建只是此類工具的一部分用途)的王者,然而它也不是毫無缺陷的,近期風頭正勁的 gulp.js 隱隱有取而代之的態勢。那麼,究竟是什麼使得 gulp.js 備受關注呢?
Grunt 之殤
-
外掛很難遵守單一責任原則。因為 Grunt 的 API 設計缺憾,使得許多外掛不得不負責一些和其主要任務無關的事情。比如說要對處理後的檔案進行更名操作,你可能使用的是
uglify
外掛,也有可能使用的是concat
外掛(取決於工作流的最後一個環節是誰)。我的看法:這或許是個問題,對很多人來說 Grunt 外掛多少存在“職責不明”和“越俎代庖”的情況。在我看來,這也是 Grunt 一個設計思想:把對檔案的操作抽象為一個
-
用外掛做一些本來不需要外掛來做的事情。因為 Grunt 提供了統一的 CLI 入口,子任務由外掛定義,由 CLI 命令來呼叫執行,因此哪怕是很簡單的外部命令(比如說執行
karma start
)都得有一個外掛來負責封裝它,然後再變成 Grunt CLI 命令的引數來執行,多此一舉。我的看法:舉雙手雙腳贊成!
-
試圖用配置檔案完成所有事,結果就是混亂不堪。規模較大,構建/分發/部署流程較為複雜的專案,其
Gruntfile
我的看法:對於 node.js 開發者來說這是好事,符合他們的一貫作風;不過對於那些純前端工程師來說(數量不小),這似乎沒有什麼顯著的改善。況且近來 Grunt 社群湧現了不少外掛來幫助開發者組織/管理/簡化臃腫的
Gruntfile
,效果都還不錯。所以關於這一點,就見仁見智吧。 -
落後的流程控制產生了讓人頭痛的臨時檔案/資料夾所導致的效能滯後。這是 gulp.js 下刀子的重點,也是本標題裡“流式構建”所解決的根本問題。流式構建改變了底層的流程控制,大大提高了構建工作的效率和效能,給使用者的直觀感覺就是:更快。
我的看法:關於流式構建,短短几句話無法講清它的來龍去脈,但是在 node.js 的世界裡,
streaming
確實是至關重要的。我推薦一份閱讀材料:Stream Handbook,讀過之後相信心裡就有數了。
作為對比和總結,作者列出了 gulp.js 的五大特點:
- 使用 gulp.js,你的構建指令碼是程式碼,而不是配置檔案;
- 使用標準庫(node.js standard library)來編寫指令碼;
- 外掛都很簡單,只負責完成一件事-基本上都是 20 行左右的函式;
- 任務都以最大的併發數來執行;
- 輸入/輸出(I/O)是基於“流式”的。
gulp.js 之道
gulp.js 的官方文件都在 Github 上,本文是一個簡介,更具體的細節還請自行閱讀文件。在這裡我就 gulp.js 的安裝和使用流程做一個簡述,先一起來領略一下 gulp.js 的風采吧。
第一步:安裝命令列工具
$ npm install -g gulp
第二步:安裝依賴項(需先在專案根目錄建立package.json)
npm install --save-dev gulp gulp-util
第三步:在你的專案下安裝Gulp的外掛,這些外掛同樣也都是 Node 模組,我們同樣使用npm命令來安裝它們
$ cd <YOUR_PROJECT>
$ npm install --save-devl gulp-uglify gulp-concat ...
注意這裡使用--save-dev引數來安裝Gulp依賴和外掛,加上這個引數以後,在安裝這些包的同時,也會把它們新增到我們的包配置檔案package.json
第四步:在專案的根路徑下建立 Gulpfile.js
,初始內容為:
var gulp = require('gulp');
gulp.task('default', function () {
});
第五步:執行!
$ gulp
So far so good! 看起來和 Grunt 沒差太遠吧?的確如此,gulp.js 的學習曲線還是相當平緩的。接下來,為了能夠順利的編寫構建指令碼,我們來學習幾個核心的 API 函式——別擔心,gulp.js 的 API 非常簡單,我們只需要瞭解四個就足以應對絕大多數的指令碼編寫了(而且用過 Grunt 的話,這四個都不是什麼新鮮貨)。
-
gulp.task(name[, deps], fn)
:註冊任務name
是任務名稱;deps
是可選的陣列,其中列出需要在本任務執行要執行的任務;fn
是任務體,這是 gulp.js 的核心了,需要花時間吃透它,詳情見此。 -
gulp.src(globs[, options])
:指明原始檔路徑
用過 Grunt 的話,globs
一定不會陌生,這裡沒什麼變化;options
是可選的,具體請檢視 gulp.js API
範例
我們練習一個最常見的範例,寫一個 node.js 程式時所需要的構建指令碼。為此我們要做三件事情(括號內列出對應外掛的名字,更多外掛請到此處尋找):
- 語法檢查(
gulp-jshint
) - 合併檔案(
gulp-concat
) - 壓縮程式碼(
gulp-uglify
)
另外,我們可能還需要檔案更名操作,所以 gulp-rename
也會很有用。接著我們需要先在專案下安裝這些外掛:
$ npm install <PLUGIN_NAME> --save-dev
最後我們完成所有任務的編寫,完整的程式碼如下:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// 語法檢查
gulp.task('jshint', function () {
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// 合併檔案之後壓縮程式碼
gulp.task('minify', function (){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('dist'));
});
// 監視檔案的變化
gulp.task('watch', function () {
gulp.watch('src/*.js', ['jshint', 'minify']);
});
// 註冊預設任務
gulp.task('default', ['jshint', 'minify', 'watch']);
可以看出,基本上所有的任務體都是這麼個模式:
gulp.task('任務名稱', function () {
return gulp.src('檔案')
.pipe(...)
.pipe(...)
// 直到任務的最後一步
.pipe(...);
});
非常容易理解!獲取要處理的檔案,傳遞給下一個環節處理,然後把返回的結果繼續傳遞給下一個環節……直到所有環節完成。pipe
就是 stream
模組裡負責傳遞流資料的方法而已,至於最開始的 return
則是把整個任務的 stream
物件返回出去,以便任務和任務可以依次傳遞執行。
或許寫成這樣會更直觀:
gulp.task('task_name', function () {
var stream = gulp.src('...')
.pipe(...)
.pipe(...)
// 直到任務的最後一步
.pipe(...);
return stream;
});
至此,你已經可以使用 gulp.js 完成絕大多數的構建工作了。下一步,我也為你準備了幾條建議:
- 花點時間瀏覽一下 gulp.js 外掛庫,大致瞭解下利用已有的外掛你都可以做哪些事情
- 對於常用的外掛,仔細閱讀它們自己的文件,以便發揮出它們最大的功效
- 抽時間學習 gulp.js API,特別是
gulp.task()
裡關於任務體的詳細描述,學會如何執行回撥函式(callback),如何返回promise
等等 - 嘗試編寫適合自己工作流程和習慣的任務,如果它工作良好,把它做成外掛釋出給大家吧!
相關推薦
“流式”前端構建工具——gulp.js 簡介
Grunt 一直是前端領域構建工具(任務執行器或許更準確一些,因為前端構建只是此類工具的一部分用途)的王者,然而它也不是毫無缺陷的,近期風頭正勁的 gulp.js 隱隱有取而代之的態勢。那麼,究竟是什麼使得 gulp.js 備受關注呢? Grunt 之殤 外掛很難
前端構建工具 Gulp.js 上手例項
在軟體開發中使用自動化構建工具的好處是顯而易見的。通過工具自動化執行大量單調乏味、重複性的任務,比如影象壓縮、檔案合併、程式碼壓縮、單元測試等等,可以為開發者節約大量的時間,使我們能夠專注於真正重要的、有意義的工作,比如設計業務邏輯,編寫程式碼等等。 接下來
前端構建工具gulp
pack 合並 項目流程 nload 控制 編譯 插件安裝 pro 目的 前段時間做一個項目,試著用gulp來構建前端代碼。今天簡單總結了一下: 一:安裝gulp環境 1. 安裝node 在node官方文檔下載匹配的版本 我下載的是如下圖的版本。http:/
前端構建工具gulp之實際應用
ocs emp 保留 name 文件路徑 mode 工具 輸出數據 兼容模式 1.gulp的API介紹 gulp.task(name[, deps], fn) ------ 定義要實現的任務 name:必選,任務名稱,自定義名稱,不過註意名稱中不要使用空格
前端構建工具gulp入門教程
css 粘貼 定位 運行時 pac follow scrip 檢查 get 本文假設你之前沒有用過任何任務腳本(task runner)和命令行工具,一步步教你上手Gulp。不要怕,它其實很簡單,我會分為五步向你介紹gulp並幫助你完成一些驚人的事情。那就直接開始吧。 第一
前端構建工具gulp(1)
npm install gulp -g 2本地生成一個package.json的檔案 npm init 3本地專案中需要安裝gulp(專案中需要require) npm install gulp --save-dev
前端構建工具Gulp入門指南(第二篇)
我們上一篇安裝node環境和gulp工具,並簡單介紹了gulp構建工具的使用; 這篇我們重點介紹gulp任務使用方法。 編譯Lass,Autoprefix及縮小化 檢查node環境是否完成安裝成功,執
前端構建工具- gulp
gulp基於流(streaming)的方式構建,首先讀取檔案,編譯壓縮檔案(流的方式),最終將結果生成到配置的檔案目錄下。安裝gulp假設已經安裝了node 和npm (淘寶的cnpm很適合國內使用)。1、首頁全域性安裝gulp。1 npm install --global
前端構建工具gulp超詳細配置, 使用教程(圖文)
流程 1. 輸入命令(可以使用git bash或者命令控制檯cmd) npm install -g gulp 安裝全域性gulp命令 2. 建立一個專案資料夾, 當前專案資料夾下輸入命令npm init 配置package.json檔案, 這一部分看
前端構建工具gulp的使用基礎
gulp.js是一個前端構建工具,與grunt.js相比,gulp.js無需寫一大堆繁雜的配置引數,僅有四個API,都非常簡單,學習起來很容易,而且gulp.js使用的是node.js中stream來讀取和操作資料,其速度更快。如果你還沒有使用過前端構建工具,或者覺得gru
前端構建工具gulp的使用教程集合
基礎教程:http://www.imooc.com/search/article?words=gulp 常用外掛:http://www.mamicode.com/info-detail-517085.html 系列教程:http://www.w3cplus.com/blog
前端構建工具-gulp !(解決瀏覽器快取問題)
一,為啥要用構建工具專案中的js和css屬於靜態檔案,客戶端第一次訪問的時候會快取這些檔案,那就意味著當我們需要改js跟css的時候,即使我們將檔案中的程式碼改了重新發布,那麼客戶端也是看不到,客戶端發現快取中有同樣路徑的檔案,直接讀取。之前做的專案中,專案上線後客戶開啟一看
前端構建工具gulp的詳細介紹以及使用
什麼是 gulp gulp 是一個前端構建工具,它能通過自動執行常見任務,比如編譯預處理 CSS ,壓縮 JavaScript 和重新整理瀏覽器,來改進網站開發的過程,從而使開發更加快速高效。 為什麼要用 gulp 與 grunt 相比,gu
前端自動化構建工具-gulp
出現 ssa uglify 提醒 連接 變化 監聽 前端 復雜 gulp 和grunt這兩個是我知道的自動構建工具,但是說實話都沒在項目中用過,不太清楚自動化構建是什麽意思, 1、grunt和gulp有什麽相同點和不同點? (1)、易於使用:采用代碼優於配置策略,gul
前端構建工具之爭——Webpack vs Gulp 誰會被拍死在沙灘上
解決問題 所有 less hat aps 書寫 支持 瀏覽器 官方 .table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6rem !im
前端自動化構建工具Gulp簡單入門
margin 構建工具 function col 處理 .com order lis web 昨天聽同事分享了Gulp的一些簡單使用,決定自己也試一試。 一、安裝 gulp是基於nodejs的,所以要先下載安裝node(直接搜node,在官網下載就好了) 1、全局安
前端自動構建工具-gulp
tex des 文件 邏輯 交互效果 但是 進行 指定路徑 .json 前言 現在的前端開發已經不再僅僅只是靜態網頁的開發了,日新月異的前端技術已經讓前端代碼的邏輯和交互效果越來越復雜,更加的不易於管理,模塊化開發和預處理框架把項目分成若幹個小模塊,增加了最後發布的困難
前端自動化構建工具——gulp
操作過程: 需要配置檔案後才能執行 $ gulp命令 (1)配置一些基本資訊,執行命令:$ npm init 在git指令中,對下面每一項進行配置,注意:GitHub專案的資訊與配置檔案一一對應,如果先關聯了GitHub專案,那麼下面的基本配置中的GitHub專案資訊將
前端構建工具之爭——Webpack vs Gulp 誰會被拍死在沙灘上(轉載)
文章有點長,總共 1800 字,閱讀需要 18 分鐘。哈哈,沒耐心的直接戳我到高潮部分。 理想的前端開發流程 在說構建工具之前得先說說咱期望的前端開發流程是怎樣的? 寫業務邏輯程式碼(例如 es6,scss,pug 等) 處理成瀏覽器認識的(js,css,html) 瀏覽器自動重新整理看到效果 前端開
前端構建工具------Webpack vs Gulp
理想的前端開發流程 在說構建工具之前得先說說咱期望的前端開發流程是怎樣的? 寫業務邏輯程式碼(例如 es6,scss,pug 等) 處理成瀏覽器認識的(js,css,html) 瀏覽器自動重新整理看到效果 前端開發就是在不斷的 123..123..123.... 迴圈