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>。