溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

前端構建工具之gulp怎么用

發(fā)布時間:2021-07-13 14:50:40 來源:億速云 閱讀:158 作者:小新 欄目:web開發(fā)

這篇文章將為大家詳細講解有關前端構建工具之gulp怎么用,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

前言

在如今的前端開發(fā)中,已經不再是一些靜態(tài)文件了。

對于很多Web App來說,前端代碼甚至比后端更加復雜,更加難以管理,這主要來源于一下幾個方面:

      1、許多第三方庫的依賴需要自動運行

      2、獨立的前端測試需要自動運行

      3、代碼需要發(fā)布時打包

一、為什么要使用gulp?

在我們的工作流程里,應該盡量減少重復的工作,很多任務都可以自動去執(zhí)行,比如一些相關文件的操作,自動監(jiān)視一些文件的變化,發(fā)生變化以后,就去執(zhí)行事先設計好的任務。

說了這么多,那么gulp到底能做什么?

      a.創(chuàng)建項目工程

      b.壓縮各類文件

      c.文件合并

      d.自動化監(jiān)視

      e.實時調試代碼

      f.編譯less,Sass,CoffeeScript......等等

二、gulp是基于node開發(fā)運行的,所以我們可以使用npm的包管理工具去安裝它。

要使用npm,就必須安裝node。node安裝很簡單,只需下一步即可,這里不再贅述。

在gulp下載配置前,我們先搭建好本地項目文件:

前端構建工具之gulp怎么用
文件構架樹

完成以后,在控制臺cdm調出控制臺輸入以下命令:

      1、npm install -g gulp //-g 代表全局安裝 ( 如果不是全局安裝你是用不了的)

      2、cd 你的項目路徑 npm init //package.json

      3、npm install gulp --save-dev

前端構建工具之gulp怎么用
配置完成的文件構架樹

注:gulpfile.js這個文件的名字是不能改變的。

三、gulp的配置以及任務

在gulpfile.js這個文件中輸入一下:

前端構建工具之gulp怎么用
引入gulp

前端構建工具之gulp怎么用

第一個實例

前端構建工具之gulp怎么用

gulp運行

到這里基本配置就可以了。

關于“前端構建工具之gulp怎么用”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。

AI