您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關前端構建工具之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下載配置前,我們先搭建好本地項目文件:
文件構架樹
完成以后,在控制臺cdm調出控制臺輸入以下命令:
1、npm install -g gulp //-g
代表全局安裝 ( 如果不是全局安裝你是用不了的)
2、cd 你的項目路徑 npm init //package.json
3、npm install gulp --save-dev
配置完成的文件構架樹
注:gulpfile.js這個文件的名字是不能改變的。
三、gulp的配置以及任務
在gulpfile.js這個文件中輸入一下:
引入gulp
第一個實例
gulp運行
到這里基本配置就可以了。
關于“前端構建工具之gulp怎么用”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。