本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！css

工做中如何使用GULP構建項目？

注意：這篇文章假定你具有較好的JS基礎，能夠獨立完成小規模的項目前端

你甚至應該知道，常見的各類JS函數庫和插件node

同時，你應該具有必定的項目部署的常識，例如知道真正部署在服務器上的文件，跟開發的時候編寫的文件是不一樣的再同時，你必需要具有nodeJS的一些最基本知識。例如使用npm命令安裝軟件等，知道nodeJS如何加載模塊web

若是你用過sass或者less那就更好不過了。npm

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

假設你沒據說過sass甚至不知道node爲什麼物，JQuery不熟，甚至沒用JS寫過項目。windows

不要緊，請點擊瀏覽器右上角的叉號，整個世界都會恢復往日的美好後端

項目構建是什麼？

好比說吧，當項目部署上線時，你全部的JS文件，要不要進行壓縮減少體積，以便於加載的時候速度更快？跨域

嗯，這個確實須要。瀏覽器

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

嗯嗯，這個確實須要。

你編寫的JS代碼使用了ES6語法，爲了不瀏覽器兼容，要不要轉換成ES5？

嗯嗯嗯，這個確實須要。

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

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

你的CSS是否是也要壓縮？

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

開發過程當中，你的頁面跟後臺服務器不在一臺電腦上，你是否須要在本地搭建一個代理服務器以便於解決臨時的跨域問題？

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

以上這些相似的問題，Gulp能夠很輕鬆把它們放在一塊兒完成。

Gulp是一個windows系統下的軟件麼？

很顯然它不是。它是一個NodeJS編寫的軟件，須要咱們先安裝NodeJS的運行環境。

這是nodeJS windows版網盤地址：

https://pan.baidu.com/s/1taPXX2Y01tVcqFUd3eATQQ 密碼：bwf9
複製代碼

版本號： v8.9.3

安裝好NodeJS環境，接下來作什麼？

安裝Gulp v3.9.1

咱們須要使用node提供的一個叫作npm的命令

須要我打開命令行嗎？

否則呢？難不成你想用QQ給NodeJS發個消息？

打開後是否是像這樣？

接下來進入你項目的根目錄，而後輸入命令 npm install gulp

安裝時爲何要進入項目根目錄？難道每一個須要gulp的項目都要裝一遍嗎？

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

注意！在安裝過程當中，因爲網速問題，常常致使安裝失敗。多嘗試幾回就好

若是安裝過程沒有出現任何 Error 提示，那就沒有問題了。

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

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

開始編寫gulp任務文件

這個任務文件是幹什麼的？？

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

好比我如今要壓縮個人js文件，該怎麼編寫gulp任務文件？

如今，咱們假定項目的目錄結構是這樣的：

src 目錄存放咱們的源文件，dist 目錄存放咱們壓縮後的文件

接下來咱們要在項目的根目錄，建立一個 gulpfile.js 文件

gulpfile.js 文件內容以下：

若是你熟悉 nodeJS 那麼下面的代碼理解起來將會很是容易：

若是你不熟悉 nodeJS 那麼下面的代碼理解起來將會很是吃力：

好了，一切準備就緒，準備啓動gulp執行壓縮任務

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

我執行了這個命令，可是遇見了錯誤：

Error: Cannot find module 'gulp-uglify'

由於找不到'gulp-uglify'這個模塊。因此接下來咱們安裝它，輸入命令npm install gulp-uglify

等等，不是已經安裝過gulp了嗎？爲何壓縮文件的模塊還要單獨安裝？

gulp自己不具有壓縮文件的功能。它的主要工做，是定義並執行任務。

而任務的具體內容是咱們本身定的，就像gulpfile.js文件裏寫的那樣。

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

偏偏相反，你仔細想，若是Gulp把功能集成進來，那麼它能提供的功能不管如何是有限的

那樣作還會讓軟件體積變大，不須要的功能也必須強制安裝。並無好處。

正是由於gulp能夠藉助任何其它軟件來執行任務。理論上來講，gulp的功能是無限的。

好像有點道理。

好了，接下來咱們再次執行命令gulp minifyJS

執行了，但又遇見了錯誤：

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

這是由於咱們以前把gulp安裝在了項目裏面。NodeJS運行環境並不能識別gulp命令

那怎麼辦呢？

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

好了，咱們來看看最後生成的效果

dist目錄中的文件所有都是壓縮過的。

目前，你已經掌握了Gulp的原理和最基本用法

Gulp能夠藉助其它模塊產生無窮無盡的用法，篇幅有限，今天暫時只能介紹到這裏

若是你們有什麼建議，能夠給我留言

我相信，萬事「開頭難······

中間難，結尾難！」你們共同加油！！！