乾了這杯可樂！Gulp 上手指南

時間 2019-12-05

原文原文鏈接

導讀：有關Gulp的入門教程不少，大同小異。本文主要對它們進行內容上的梳理和引導。前端

What is Gulp?

對網站資源進行優化，並使用不一樣瀏覽器測試並非網站設計過程當中最有意思的部分，可是這個過程當中的不少重複的任務可以使用正確的工具自動完成，從而使效率大大提升，這是讓不少開發者以爲有趣的地方。node

Gulp 是一個構建系統，它能經過自動執行常見任務，好比編譯預處理 CSS，壓縮 JavaScript 和刷新瀏覽器，來改進網站開發的過程。Gulp 是基於 Node.js 構建的，所以 Gulp 源文件和你用來定義任務的 Gulp 文件都被寫進了 JavaScript（或者 CoffeeScript）裏。前端開發工程師還能夠用本身熟悉的語言來編寫任務去 lint JavaScript 和 CSS、解析模板以及在文件變更時編譯 LESS 文件（固然這些只是一小部分例子）。git

Building With Gulp - SMASHING MAGAZINEgithub

Gulp vs Grunt

Grunt 的特色 npm

Grunt 有一個完善的社區，插件豐富json
它簡單易學，你能夠隨便安裝插件並配置它們gulp
你不須要多先進的理念，也不須要任何經驗segmentfault

Gulp 和 Grunt 的異同點 windows

易於使用：採用代碼優於配置策略，Gulp 讓簡單的事情繼續簡單，複雜的任務變得可管理瀏覽器
高效：經過利用 Node.js 強大的流，不須要往磁盤寫中間文件，能夠更快地完成構建
高質量：Gulp 嚴格的插件指導方針，確保插件簡單而且按你指望的方式工做
易於學習：經過把API降到最少，你能在很短的時間內學會 Gulp，構建的工做就像你預想的同樣：是一系列流管道。

Gulp vs Grunt - benben

Grunt 之殤

插件很難遵照單一責任原則
用插件作一些原本不須要插件來作的事情
試圖用配置文件完成全部事，結果就是混亂不堪
落後的流程控制產生了讓人頭痛的臨時文件/文件夾所致使的性能滯後

Gulp 之道

使用 Gulp，你的構建腳本是代碼，而不是配置文件
使用標準庫（node.js standard library）來編寫腳本
插件都很簡單，只負責完成一件事（基本上都是20行左右的函數）
輸入 / 輸出（I/O）是基於「流式」的

"流式"前端構建工具——gulp.js 簡介 - SegmentFault

Getting Started

第一步：安裝Node

Node.js 官網

]

第二步：使用命令行

爲了確保 Node 已經正確安裝，可經過查看版本號來檢驗，以下。

node -v
npm -v

第三步：定位到項目

Linux、OSX的終端（Terminal）

cd 定位到目錄
ls 獲取文件列表

Windows中的命令提示符（Command Prompt）
定位到目錄

盤符: 例如進入D盤 d:
cd 進入當前盤符某個目錄
cd \ 進入當前盤根目錄
cd \windows 進入當前盤windows目錄
cd ..  退到上一級目錄

（注：進入含有特殊字符目錄時須要加引號。例如：cd "c:\program files"。）

獲取文件列表

dir /b

成功進入項目目錄後，咱們開始安裝Gulp。

第四步：安裝 Gulp

NPM 是基於命令行的 node 包管理工具，它能夠將 node 的程序模塊安裝到項目中，，在它的官網中能夠查看和搜索全部可用的程序模塊。

在命令行中輸入

sudo npm install -g gulp

說明：

sudo 是管理員身份執行命令，通常會要求輸入電腦密碼
npm 是安裝 node 模塊的工具，執行 install 命令
-g 表示在全局環境安裝，以便任何項目都能使用它
最後，gulp 是將要安裝的 node 模塊的名字

運行時注意查看命令行有沒有錯誤信息，安裝完成後，可使用下面的命令查看 gulp 的版本號以確保gulp已經被正確安裝。

gulp -v

接下來，咱們須要將gulp安裝到項目本地

npm install --save-dev gulp

說明：

使用--save-dev來更新 package.json 文件，更新 devDependencies 值，以代表項目須要依賴gulp；
dependencies能夠向其餘參與項目的人指明項目在開發環境和生產環境中的 node 模塊依賴關係。想要深刻了解能夠查看 package.json 文檔。

前端構建工具gulp入門教程 - SegmentFault

第五步：新建 Gulpfile 文件，運行 Gulp

安裝好 gulp 後咱們須要告訴它要爲咱們執行哪些任務。因此，咱們首先須要弄清楚項目須要哪些任務。
例如：

檢查JavaScript（gulp-jshint）
合併JavaScript(gulp-concat)
壓縮並重命名合併後的JavaScript(gulp-ugligy、gulp-rename)

1.安裝依賴

根據上面的任務需求，咱們安裝相應的插件。

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

官方 Plugin 庫

2.新建gulpfile文件

插件安裝完畢後，咱們須要新建一個gulpfile.js文件來指定gulp須要爲咱們完成什麼任務。

3.引入插件

// 引入 gulp
var gulp = require('gulp'); 

// 引入插件
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

4.建立任務

// 語法檢查
gulp.task('jshint', function() {
    gulp.src('project/src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 合併文件以後壓縮代碼
gulp.task('minify', function(){
    gulp.src('project/src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('project/dist/js'))
        .pipe(uglify())
        .pipe(rename('all.min.js'))
        .pipe(gulp.dest('project/dist/js'))
});

// 監視文件的變化
gulp.task('watch', function(){
    gulp.watch('project/src/js/*.js', ['jshint', 'minify']);
});

// 默認任務
gulp.task('default', ['jshint', 'minify', 'watch']);