Gulp 先容與安裝

Gulp 先容與安裝

Gulp 是前端開發(fā)歷程中一種對代碼舉行構(gòu)建的東西，是主動化項目標(biāo)構(gòu)建利器。它不僅能對網(wǎng)站資源舉行優(yōu)化，并且在開發(fā)歷程中很多反復(fù)的職責(zé)可以使用準(zhǔn)確的東西主動完成，使用 Gulp 不僅可以輕松的編寫代碼，并且還大大的提高了我們的事情聽從。

Gulp 是基于 Node.js 的主動化職責(zé)運轉(zhuǎn)器，它能主動化地完成前端代碼（比如 HTML、CSS、JavaScript、Less、Sass、image 等文件）的測試、反省、兼并、緊縮、格式化、欣賞器主動改造、擺設(shè)文件天生，并監(jiān)聽文件在竄改后反復(fù)指定的這些步調(diào)。

Gulp特點

• 易于使用，經(jīng)過代碼的優(yōu)質(zhì)設(shè)置戰(zhàn)略，使得 gulp 利用簡便職責(zé)簡便化，繁復(fù)職責(zé)辦理化。
• 構(gòu)建快捷，使用 Node.js 的作用我們可以更快速的構(gòu)建項目從而變小經(jīng)常的 IO 利用。
• 簡便易學(xué)，用最少的 API 更輕松的把握 gulp。
• 插件高質(zhì)，gulp 嚴(yán)厲的插件指南可以確保我們的事情愈加高質(zhì)好效。

怎樣安裝Gulp

在安裝 Gulp 之前，我們必要先反省電腦上對否以前準(zhǔn)確安裝 node、npm、npx，必要用到的下令如下所示：

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

如下圖所示：

假如上述東西還沒有安裝，可以先點擊舉行安裝：https://nodejs.org/en/。

安裝Gulp下令行東西

安裝 Gulp 下令行東西下令如下所示，此中 --global 表現(xiàn)全局安裝：

npm install --global gulp-cli

安裝完成后，可以創(chuàng)建項目目次并進入創(chuàng)建好的目次：

> npx mkdirp my_gulp > cd my_gulp

如下圖所示：

如此我們就在 C:\Users\lu\Desktop 目次下創(chuàng)建一個名為 my_gulp 的項目。

創(chuàng)建package.json文件

假如我們要在項目標(biāo)根目次下創(chuàng)建一個 package.json 文件，可以實行如下所示下令：

> npm init

按下回車后，此下令會指引我們設(shè)置項目名、版本、形貌信息等，如下圖所示，假如想要快速創(chuàng)建 package.json 文件，可以實行 npm init -y 下令。

安裝Gulp

然后在項目根目次下實行如下下令，安裝 Gulp，作為開發(fā)時依托項：

npm install --save-dev gulp

安裝完成之后，可以實行如下下令反省對否安裝告捷：

gulp --version

如下圖所示：

此時項目根目次下會創(chuàng)建一個 package-lock.json 文件，并且 gulp 會被添加到 package.json 文件的 devDependencies 選項中。

創(chuàng)建 gulpfile 文件

我們可以在根目次下創(chuàng)建一個名為 gulpfile.js 的文件，文件的內(nèi)容如下所示：

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

然后我們就可以開頭測試?yán)玻陧椖扛看蜗聦嵭?gulp 下令：

> gulp

可以看到默許職責(zé)將實行，由于職責(zé)為空，因此沒有實踐舉措：

如需運轉(zhuǎn)多個職責(zé)，可以實行 gulp <task> <othertask>。