注意：?這篇文章假定你具備較好的JS基礎(chǔ)，可以獨立完成小規(guī)模的項目

你甚至應該知道，常見的各種JS函數(shù)庫和插件

同時，你應該具備一定的項目部署的常識，例如知道真正部署在服務器上的文件，跟開發(fā)的時候編寫的文件是不同的

再同時，你必須要具備nodeJS的一些最基本知識。例如使用npm命令安裝軟件等，知道nodeJS如何加載模塊

如果你用過sass或者less那就更好不過了。

最重要的，就是你需要知道常見的命令行操作，例如cd、cd ..

假設(shè)你沒聽說過sass甚至不知道node為何物，JQuery不熟，甚至沒用JS寫過項目。

沒關(guān)系，請點擊瀏覽器右上角的叉號，整個世界都會恢復往日的美好?

項目構(gòu)建是什么？

比如說吧，當項目部署上線時，你所有的JS文件，要不要進行壓縮減小體積，以便于加載的時候速度更快？

嗯，這個確實需要。

圖片要不要壓縮處理，以獲得更好的加載速度？

嗯嗯，這個確實需要。

你編寫的JS代碼使用了ES6語法，為了避免瀏覽器兼容，要不要轉(zhuǎn)換成ES5？

嗯嗯嗯，這個確實需要。

你編寫的scss源文件，要不要編譯生成css？

嗯嗯嗯嗯，這個確實需要。

你的CSS是不是也要壓縮？

嗯嗯嗯嗯嗯，這個確實需要。

開發(fā)過程中，你的頁面跟后臺服務器不在一臺電腦上，你是否需要在本地搭建一個代理服務器以便于解決臨時的跨域問題？

嗯嗯嗯嗯嗯嗯，這個確實需要。

以上這些類似的問題，Gulp可以很輕松把它們放在一起完成。

Gulp是一個windows系統(tǒng)下的軟件么？

很顯然它不是。它是一個NodeJS編寫的軟件，需要我們先安裝NodeJS的運行環(huán)境。

這是nodeJS windows版網(wǎng)盤地址：

鏈接：https://pan.baidu.com/s/1DDhSotzVvrBxtD9I2O8s_w?
提取碼：oc6x


版本號： v14.17.1

安裝好NodeJS環(huán)境，接下來做什么？

安裝Gulp v3.9.1

我們需要使用node提供的一個叫做npm的命令

需要我打開命令行嗎？

不然呢？ 難不成你想用QQ給NodeJS發(fā)個消息？

打開后是不是像這樣？

接下來進入你項目的根目錄，然后輸入命令?npm install gulp

安裝時為什么要進入項目根目錄？難道每個需要gulp的項目都要裝一遍嗎？

沒錯，是這樣的。因為每個項目使用gulp的功能不同，版本可能也不一樣。這樣每個項目的gulp相互獨立。

注意 ！在安裝過程中，由于網(wǎng)速問題，經(jīng)常導致安裝失敗。 多嘗試幾次就好

如果安裝過程沒有出現(xiàn)任何?Error?提示，那就沒有問題了。

項目中多出了一個node_modules文件夾，這就是我下載的gulp軟件？

是的，不要修改、移動或刪除這個文件夾

開始編寫gulp任務文件

這個任務文件是干什么的？？

簡單的說，就是寫一個任務列表，告訴gulp具體要做什么。

比如我現(xiàn)在要壓縮我的js文件，該怎么編寫gulp任務文件？

現(xiàn)在，我們假定項目的目錄結(jié)構(gòu)是這樣的：(可點擊展開目錄)

目錄存放我們的源文件，dist?目錄存放我們壓縮后的文件

接下來我們要在項目的根目錄，創(chuàng)建一個?gulpfile.js?文件

gulpfile.js?文件內(nèi)容如下：

如果你熟悉?nodeJS?那么下面的代碼理解起來將會非常容易：

如果你不熟悉?nodeJS?那么下面的代碼理解起來將會非常吃力：

好了，一切準備就緒，準備啟動gulp執(zhí)行壓縮任務

我們回到命令行，仍然在項目的根目錄下，輸入命令?gulp minifyJS

我執(zhí)行了這個命令，但是碰見了錯誤：

Error: Cannot find module 'gulp-uglify'

因為找不到'gulp-uglify'這個模塊。所以接下來我們安裝它，輸入命令npm install gulp-uglify

等等，不是已經(jīng)安裝過gulp了嗎？ 為什么壓縮文件的模塊還要單獨安裝？

gulp本身不具備壓縮文件的功能。它的主要工作，是定義并執(zhí)行任務。

而任務的具體內(nèi)容是我們自己定的，就像gulpfile.js文件里寫的那樣。

為什么gulp不把壓縮js的功能集成進來，這樣看來gulp其實沒什么用了？

恰恰相反， 你仔細想，如果Gulp把功能集成進來，那么它能提供的功能無論如何是有限的

那樣做還會讓軟件體積變大，不需要的功能也必須強制安裝。并沒有好處。

正是因為gulp可以借助任何其它軟件來執(zhí)行任務。理論上來說，gulp的功能是無限的。

好像有點道理。

好了，接下來我們再次執(zhí)行命令gulp minifyJS

執(zhí)行了，但又碰見了錯誤：

'gulp' 不是內(nèi)部或外部命令，也不是可運行的程序或批處理文件。

這是因為我們之前把gulp安裝在了項目里面。NodeJS運行環(huán)境并不能識別gulp命令

那怎么辦呢？

再把gulp全局安裝一次npm install gulp -g

好了，我們來看看最后生成的效果

目錄中的文件全部都是壓縮過的。

目前，你已經(jīng)掌握了Gulp的原理和最基本用法

Gulp可以借助其它模塊產(chǎn)生無窮無盡的用法，篇幅有限，今天暫時只能介紹到這里

如果大家有什么建議，可以給我留言

我相信，萬事"開頭"難，所以接下來你的自學之路，將會無比的順暢。