摘要：所以出現了各種前端構建化工具也應運而生等已經成為現在前端開發工程師的必備技能之一。結語今天的分享就告一段落啦希望能對大家有所幫助。

在互聯網告訴發展的今天，自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

好啦，現在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
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/歡迎點贊關注澆水哦~
公眾號二維碼：