摘要：所以出現(xiàn)了各種前端構(gòu)建化工具也應(yīng)運(yùn)而生等已經(jīng)成為現(xiàn)在前端開發(fā)工程師的必備技能之一。結(jié)語今天的分享就告一段落啦希望能對(duì)大家有所幫助。

在互聯(lián)網(wǎng)告訴發(fā)展的今天，自node出現(xiàn)后，我們前端也越來越大（心里美美噠~），同樣帶來的Web業(yè)務(wù)日益復(fù)雜化和多元化，模式也都想webPage模式轉(zhuǎn)向webApp模式，拼幾個(gè)頁面搞幾個(gè)jquery的插件就能搞一個(gè)完成一個(gè)項(xiàng)目的日子已經(jīng)是很久遠(yuǎn)的曾經(jīng)了，而且從前要實(shí)現(xiàn)壓縮代碼，壓縮圖片，上傳到服務(wù)器等等等需要各種工具才能實(shí)現(xiàn)的功能，用起來很麻煩。所以出現(xiàn)了各種前端構(gòu)建化工具也應(yīng)運(yùn)而生：grunt,gulp,webpack等已經(jīng)成為現(xiàn)在前端開發(fā)工程師的必備技能之一。最新的Parcel也大出風(fēng)頭，因?yàn)閃ebpack 提供的“零配置”的進(jìn)展緩慢和混沌不清，不過現(xiàn)在webpack4.0已經(jīng)發(fā)布了，還不清楚未來的走向~
好，說了這么多，該說說今天的主角了，雖然已經(jīng)不是前沿的技術(shù)了，但是用起來非常的簡(jiǎn)單方便人性化，下面就來簡(jiǎn)單介紹介紹基礎(chǔ)用法啦~

在確保你的電腦里裝了node的情況下，打開命令行執(zhí)行以下代碼：

 npm install --global gulp

全局安裝gulp，打開命令行輸入gulp -v有版本號(hào)則證明安裝成功啦
然后創(chuàng)建一個(gè)文件夾，名字隨你啦~我們接下來的操作都在這個(gè)文件夾中進(jìn)行啦~
我創(chuàng)建的文件夾叫gulpexample，如果你的電腦中安裝了git請(qǐng)進(jìn)入這個(gè)文件夾然后右鍵選擇git bash here，如果沒有安裝那就進(jìn)入cmd然后進(jìn)入相應(yīng)的文件目錄啦~然后~

執(zhí)行npm init之后會(huì)讓你填名字啊 作者啊 描述啊 之類的 剩下的你就一頓回車，之后你的文件夾中就會(huì)自動(dòng)生成一個(gè)package.json文件

然后在命令行中執(zhí)行npm instal gulp --save-dev在當(dāng)前項(xiàng)目中安裝gulp

好啦，現(xiàn)在gulp就安裝完畢了~接下來我們可以騷操作了

在根目錄創(chuàng)建一個(gè)文件命名為gulpfile.js（必須是這個(gè)，不能變哦）

在根目錄穿件一個(gè)文件夾src

簡(jiǎn)單的介紹一下gulp的api

/*
*
*  gulp.task -- 定義任務(wù)
*       gulp.task("任務(wù)名，命名隨你啦",fn);
*  gulp.src  -- 找到需要執(zhí)行任務(wù)的文件
*       gulp.src("要執(zhí)行的文件的目錄").pipe(要執(zhí)行的api)
*  gulp.dest -- 執(zhí)行任務(wù)的文件的去處
*       gulp.dest("文件的去處目錄（若沒有回創(chuàng)建文件夾）")
*  gulp.watch -- 觀察文件是否變化
*       gulp.watch("要監(jiān)控的文件目錄下的文件","變化后要執(zhí)行的task")
*
* */

然后我們簡(jiǎn)單的應(yīng)用一下感受一下gulp的用法

打開gulpfile.js輸入如下代碼：

var gulp = require("gulp");
// 定義任務(wù)
gulp.task("message",function(){
    return console.log("gulp is running!");
});

然后再當(dāng)前文件夾目錄下的命令行中執(zhí)行 gulp message

可以看到gulp is running證明任務(wù)已經(jīng)執(zhí)行了

接下來為大家簡(jiǎn)單介紹一下：拷貝文件，壓縮合并js，sass編譯，壓縮圖片的用法。
首先來安裝上述功能相對(duì)應(yīng)的插件(同樣也是在相應(yīng)的目錄下執(zhí)行哦)

npm install gulp-sass gulp-concat gulp-uglify gulp-imagemin --save-dev

安裝可能會(huì)有些慢，如果實(shí)在受不了的話可以安裝淘寶的鏡像cnpm 然后用cnpm執(zhí)行哦~
cnpm的安裝如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完gulp的插件后在項(xiàng)目根目錄新建文件夾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"); // 代碼合并

第二步，定義任務(wù)

我們先來定義個(gè)簡(jiǎn)單的任務(wù)來再次熟悉一下gulp的用法~ 下面定義一個(gè)拷貝html的任務(wù)

// 任務(wù)：拷貝html
gulp.task("copyHtml",function(){
    // 選取到src目錄下的所有html文件 （為了測(cè)試效果，請(qǐng)自己再src目錄下隨便創(chuàng)建兩個(gè)html文件咯）
    gulp.src("src/*.html")
        .pipe(gulp.dest("dist")); // 將html拷貝到dist目錄下，沒有dist會(huì)自動(dòng)生成
});

在命令行里執(zhí)行 gulp copyHtml 就可以啦，趕緊去看看你的文件夾里成功拷貝了么？

準(zhǔn)備工作：在src目錄下新建images文件夾，在里面隨便放幾張圖片

// 任務(wù)： 圖片壓縮
gulp.task("imagemin",function(){
    gulp.src("src/images/*")
        .pipe(imagemin()) // 調(diào)用插件imagemin
        .pipe(gulp.dest("dist/image")) // 壓縮后的圖片輸出目錄
});

同樣命令行執(zhí)行 gulp imagemin 即可完成輸出，
現(xiàn)在你應(yīng)該基本了解gulp的任務(wù)寫法了，接下來的幾個(gè)任務(wù)我就不細(xì)說了，直接上代碼

// sass 編譯 src目錄下件文件夾sass然后在里面新建一個(gè)sass文件，按照sass的語法寫一些樣式
gulp.task("sass",function(){
    gulp.src("src/sass/*") // 獲取sass文件（*.scss）
        .pipe(sass().on("error",sass.logError)) // 執(zhí)行sass插件，并檢查錯(cuò)誤
        .pipe(gulp.dest("dist/css")); // 輸出css文件的路徑
});

// 合并壓縮代碼，src目錄下新建文件夾js然后在里面創(chuàng)建幾個(gè)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")) // 輸出合并壓縮后的文件路徑
});

現(xiàn)在4個(gè)api我們已經(jīng)用了3個(gè)了，還有一個(gè)監(jiān)聽的watch沒有用，簡(jiǎn)單介紹一下，字面意思監(jiān)聽相應(yīng)目錄下的文件是否發(fā)生改變，如果改變執(zhí)行某個(gè)任務(wù)，即一個(gè)參數(shù)為監(jiān)聽目錄，另一個(gè)參數(shù)為要執(zhí)行的任務(wù)，（watch是一個(gè)持續(xù)執(zhí)行的任務(wù)結(jié)束的話是不會(huì)停止的哦）代碼如下：

// 監(jiān)聽文件是否發(fā)生變化
gulp.task("watch",function(){
    gulp.watch("src/js/*.js",["scripts"]); // 監(jiān)聽src/js/下的所有js文件，如果發(fā)生變化則執(zhí)行任務(wù)scripts,下面同理
    gulp.watch("src/sass/*",["sass"]);
    gulp.watch("src/*.html",["copyHtml"]);
    gulp.watch("src/images/*",["imageMin"]);
});

現(xiàn)在就已經(jīng)有了5個(gè)任務(wù)了（算上最開始的message就6個(gè)了）每一個(gè)任務(wù)都要執(zhí)行一遍命令行是不是很麻煩。如果任務(wù)更多了那就更煩了，不要擔(dān)心，gulp為我們準(zhǔn)備了默認(rèn)任務(wù)default

// 定義默認(rèn)任務(wù) , 這里的默認(rèn)任務(wù)default不能隨便定義 只能是default,后面接受一個(gè)數(shù)組作為參數(shù)，傳入默認(rèn)執(zhí)行的任務(wù)，后面還可以接受一個(gè)回調(diào)函數(shù)用以執(zhí)行默認(rèn)任務(wù)代碼這里就不給做展示了
gulp.task("default",["message","copyHtml","sass","scripts","imageMin","watch"]);

定義好默認(rèn)任務(wù)如上后，在命令行中輸入gulp回車即可按照參數(shù)中的任務(wù)順序全部執(zhí)行。

今天的gulp分享就告一段落啦~希望能對(duì)大家有所幫助。本次分享只是入門教程，簡(jiǎn)單的介紹了基礎(chǔ)用法，實(shí)際項(xiàng)目中更復(fù)雜的用法日后會(huì)陸續(xù)分享給大家噠~如果喜歡給點(diǎn)個(gè)贊啦（比心心），后續(xù)預(yù)告本周還會(huì)出webpack的相關(guān)入門分享給大家，同樣本文發(fā)表在segmentfault、個(gè)人微信公眾號(hào)Mopecat及個(gè)人博客https://mopecat.cn/歡迎點(diǎn)贊關(guān)注澆水哦~
公眾號(hào)二維碼：