Gulp 先容與安裝

Gulp 先容與安裝

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

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

Gulp特點(diǎn)

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

怎樣安裝Gulp

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

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

如下圖所示：

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

安裝Gulp下令行東西

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

npm install --global gulp-cli

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

> npx mkdirp my_gulp > cd my_gulp

如下圖所示：

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

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

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

> npm init

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

安裝Gulp

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

npm install --save-dev gulp

安裝完成之后，可以實(shí)行如下下令反省對(duì)否安裝告捷：

gulp --version

如下圖所示：

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

創(chuàng)建 gulpfile 文件

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

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

然后我們就可以開頭測(cè)試?yán)玻陧?xiàng)目根目次下實(shí)行 gulp 下令：

> gulp

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

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