Gulp 介紹與安裝

Gulp 介紹與安裝

Gulp 是前端開發過程當中一種對代碼進行構建的工具，是自動化項目的構建利器。它不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成，使用 Gulp 不只能夠輕鬆的編寫代碼，並且還大大的提升了咱們的工做效率。

Gulp 是基於 Node.js 的自動化任務運行器，它能自動化地完成前端代碼（例如 HTML、CSS、JavaScript、Less、Sass、image 等文件）的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。

Gulp特色

• 易於使用，經過代碼的優質配置策略，使得 gulp 操做簡單任務簡單化，複雜任務管理化。
• 構建快捷，利用 Node.js 的做用咱們能夠更快速的構建項目從而減小頻繁的 IO 操做。
• 簡單易學，用最少的 API 更輕鬆的掌握 gulp。
• 插件高質，gulp 嚴格的插件指南能夠確保咱們的工做更加高質有效。

如何安裝Gulp

在安裝 Gulp 以前，咱們須要先檢查電腦上是否已經正確安裝 node、npm、npx，須要用到的命令以下所示：

node --version
npm --version
npx --version

以下圖所示：
若是上述工具尚未安裝，能夠先點擊進行安裝：https://nodejs.org/en/。

安裝Gulp命令行工具

安裝 Gulp 命令行工具命令以下所示，其中 --global 表示全局安裝：

npm install --global gulp-cli

安裝完成後，能夠建立項目目錄並進入建立好的目錄：

> npx mkdirp my_gulp
> cd my_gulp

以下圖所示：

這樣咱們就在 C:\Users\lu\Desktop 目錄下建立一個名爲 my_gulp 的項目。

建立package.json文件

若是咱們要在項目的根目錄下建立一個 package.json 文件，能夠執行以下所示命令：

> npm init

按下回車後，此命令會指引咱們設置項目名、版本、描述信息等，以下圖所示，若是想要快速建立 package.json 文件，能夠執行 npm init -y 命令。

安裝Gulp

而後在項目根目錄下執行以下命令，安裝 Gulp，做爲開發時依賴項：

npm install --save-dev gulp

安裝完成以後，能夠執行以下命令檢查是否安裝成功：

gulp --version

以下圖所示：

此時項目根目錄下會建立一個 package-lock.json 文件，而且 gulp 會被添加到 package.json 文件的 devDependencies 選項中。

建立 gulpfile 文件

咱們能夠在根目錄下建立一個名爲 gulpfile.js 的文件，文件的內容以下所示：

function defaultTask(cb) {
    cb();
}
exports.default = defaultTask;

而後咱們就能夠開始測試啦，在項目根目錄下執行 gulp 命令：

> gulp

能夠看到默認任務將執行，由於任務爲空，所以沒有實際動做：

如需運行多個任務，能夠執行 gulp <task> <othertask>。