在網際網路告訴發展的今天，自node出現後，我們前端也越來越大（心裡美美哒~），同樣帶來的Web業務日益複雜化和多元化，模式也都想webPage模式轉向webApp模式，拼幾個頁面搞幾個jquery的插件就能搞一個完成一個項目的日子已經是很久遠的曾經了，而且從前要實作壓縮代碼，壓縮圖檔，上傳到伺服器等等等需要各種工具才能實作的功能，用起來很麻煩。是以出現了各種前端建構化工具也應運而生：
grunt,gulp,webpack
等已經成為現在前端開發工程師的必備技能之一。最新的
Parcel
也大出風頭，因為Webpack 提供的“零配置”的進展緩慢和混沌不清，不過現在
webpack4.0
已經釋出了，還不清楚未來的走向~
好，說了這麼多，該說說今天的主角了，雖然已經不是前沿的技術了，但是用起來非常的簡單友善人性化，下面就來簡單介紹介紹基礎用法啦~
安裝
在確定你的電腦裡裝了node的情況下，打開指令行執行以下代碼：
npm install --global gulp
全局安裝gulp，打開指令行輸入
gulp -v
有版本号則證明安裝成功啦
然後建立一個檔案夾，名字随你啦~我們接下來的操作都在這個檔案夾中進行啦~
我建立的檔案夾叫
gulpexample
，如果你的電腦中安裝了git請進入這個檔案夾然後右鍵選擇
git bash here
，如果沒有安裝那就進入
cmd
然後進入相應的檔案目錄啦~然後~
- 執行
npm init
package.json
- 然後在指令行中執行
npm instal gulp --save-dev
好啦，現在gulp就安裝完畢了~接下來我們可以騷操作了
- 在根目錄建立一個檔案命名為
gulpfile.js
- 在根目錄穿件一個檔案夾
src
簡單的介紹一下gulp的api
/*
*
* gulp.task -- 定義任務
* gulp.task('任務名，命名随你啦',fn);
* gulp.src -- 找到需要執行任務的檔案
* gulp.src('要執行的檔案的目錄').pipe(要執行的api)
* gulp.dest -- 執行任務的檔案的去處
* gulp.dest('檔案的去處目錄（若沒有回建立檔案夾）')
* gulp.watch -- 觀察檔案是否變化
* gulp.watch('要監控的檔案目錄下的檔案','變化後要執行的task')
*
* */
然後我們簡單的應用一下感受一下gulp的用法
- 打開
gulpfile.js
var gulp = require('gulp');
// 定義任務
gulp.task('message',function(){
return console.log('gulp is running!');
});
- 然後再目前檔案夾目錄下的指令行中執行 gulp message
可以看到
gulp is running
證明任務已經執行了
接下來為大家簡單介紹一下：拷貝檔案，壓縮合并js，sass編譯，壓縮圖檔的用法。
首先來安裝上述功能相對應的插件(同樣也是在相應的目錄下執行哦)
npm install gulp-sass gulp-concat gulp-uglify gulp-imagemin --save-dev
安裝可能會有些慢，如果實在受不了的話可以安裝淘寶的鏡像cnpm 然後用cnpm執行哦~
cnpm的安裝如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝完gulp的插件後在項目根目錄建立檔案夾
src
，打開
gulpfile.js
開始配置~；
- 第一步，引入插件
// 引入gulp及插件
var gulp = require('gulp');
var imagemin = require('gulp-imagemin'); // 圖檔壓縮
var uglify = require('gulp-uglify'); // js壓縮
var sass = require('gulp-sass');// sass編譯
var concat = require('gulp-concat'); // 代碼合并
- 第二步，定義任務
我們先來定義個簡單的任務來再次熟悉一下
gulp
的用法~ 下面定義一個拷貝html的任務
任務一， 拷貝html
// 任務：拷貝html
gulp.task('copyHtml',function(){
// 選取到src目錄下的所有html檔案 （為了測試效果，請自己再src目錄下随便建立兩個html檔案咯）
gulp.src('src/*.html')
.pipe(gulp.dest('dist')); // 将html拷貝到dist目錄下，沒有dist會自動生成
});
在指令行裡執行 gulp copyHtml 就可以啦，趕緊去看看你的檔案夾裡成功拷貝了麼？
任務二， 圖檔壓縮
準備工作：在src目錄下建立images檔案夾，在裡面随便放幾張圖檔
// 任務： 圖檔壓縮
gulp.task('imagemin',function(){
gulp.src('src/images/*')
.pipe(imagemin()) // 調用插件imagemin
.pipe(gulp.dest('dist/image')) // 壓縮後的圖檔輸出目錄
});
同樣指令行執行 gulp imagemin 即可完成輸出，
現在你應該基本了解gulp的任務寫法了，接下來的幾個任務我就不細說了，直接上代碼
// sass 編譯 src目錄下件檔案夾sass然後在裡面建立一個sass檔案，按照sass的文法寫一些樣式
gulp.task('sass',function(){
gulp.src('src/sass/*') // 擷取sass檔案（*.scss）
.pipe(sass().on('error',sass.logError)) // 執行sass插件，并檢查錯誤
.pipe(gulp.dest('dist/css')); // 輸出css檔案的路徑
});
// 合并壓縮代碼，src目錄下建立檔案夾js然後在裡面建立幾個js檔案
gulp.task('scripts',function(){
gulp.src('src/js/*.js') // 擷取js檔案
.pipe(concat('main.js')) // 合并檔案為main.js
.pipe(uglify()) // 壓縮js代碼
.pipe(gulp.dest('dist/js')) // 輸出合并壓縮後的檔案路徑
});
現在4個api我們已經用了3個了，還有一個監聽的
watch
沒有用，簡單介紹一下，字面意思監聽相應目錄下的檔案是否發生改變，如果改變執行某個任務，即一個參數為監聽目錄，另一個參數為要執行的任務，（watch是一個持續執行的任務結束的話是不會停止的哦）代碼如下：
// 監聽檔案是否發生變化
gulp.task('watch',function(){
gulp.watch('src/js/*.js',['scripts']); // 監聽src/js/下的所有js檔案，如果發生變化則執行任務scripts,下面同理
gulp.watch('src/sass/*',['sass']);
gulp.watch('src/*.html',['copyHtml']);
gulp.watch('src/images/*',['imageMin']);
});
現在就已經有了5個任務了（算上最開始的
message
就6個了）每一個任務都要執行一遍指令行是不是很麻煩。如果任務更多了那就更煩了，不要擔心，
gulp
為我們準備了預設任務
default
// 定義預設任務 , 這裡的預設任務default不能随便定義 隻能是default,後面接受一個數組作為參數，傳入預設執行的任務，後面還可以接受一個回調函數用以執行預設任務代碼這裡就不給做展示了
gulp.task('default',['message','copyHtml','sass','scripts','imageMin','watch']);
定義好預設任務如上後，在指令行中輸入
gulp
回車即可按照參數中的任務順序全部執行。
結語
今天的gulp分享就告一段落啦~希望能對大家有所幫助。本次分享隻是入門教程，簡單的介紹了基礎用法，實際項目中更複雜的用法日後會陸續分享給大家哒~如果喜歡給點個贊啦（比心心），後續預告本周還會出webpack的相關入門分享給大家，同樣本文發表在segmentfault、個人微信公衆号Mopecat及個人部落格https://mopecat.cn/歡迎點贊關注澆水哦~
公衆号二維碼：
