前端構(gòu)建工具之gulp的配置與搭建詳解
前言
在如今的前端開發(fā)中，已經(jīng)不再是一些靜態(tài)文件了。
對于很多Web App來說，前端代碼甚至比后端更加復(fù)雜，更加難以管理，這主要來源于一下幾個(gè)方面：
1、許多第三方庫的依賴需要自動(dòng)運(yùn)行
2、獨(dú)立的前端測試需要自動(dòng)運(yùn)行
3、代碼需要發(fā)布時(shí)打包
一、為什么要使用gulp？
在我們的工作流程里，應(yīng)該盡量減少重復(fù)的工作，很多任務(wù)都可以自動(dòng)去執(zhí)行，比如一些相關(guān)文件的操作，自動(dòng)監(jiān)視一些文件的變化，發(fā)生變化以后，就去執(zhí)行事先設(shè)計(jì)好的任務(wù)。
說了這么多，那么gulp到底能做什么？
a.創(chuàng)建項(xiàng)目工程
b.壓縮各類文件
c.文件合并
d.自動(dòng)化監(jiān)視
e.實(shí)時(shí)調(diào)試代碼
f.編譯less,Sass,CoffeeScript......等等
二、gulp是基于node開發(fā)運(yùn)行的，所以我們可以使用npm的包管理工具去安裝它。
要使用npm，就必須安裝node。node安裝很簡單，只需下一步即可，這里不再贅述。
在gulp下載配置前，我們先搭建好本地項(xiàng)目文件：
文件構(gòu)架樹
完成以后，在控制臺cdm調(diào)出控制臺輸入以下命令：
1、npm install -g gulp //-g 代表全局安裝 （ 如果不是全局安裝你是用不了的）
2、cd 你的項(xiàng)目路徑 npm init //package.json
3、npm install gulp --save-dev
配置完成的文件構(gòu)架樹
注：gulpfile.js這個(gè)文件的名字是不能改變的。
三、gulp的配置以及任務(wù)
在gulpfile.js這個(gè)文件中輸入一下：
引入gulp
第一個(gè)實(shí)例
gulp運(yùn)行
到這里基本配置就可以了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，下一篇我們開始說說gulp語法。希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
JavaScript時(shí)間戳與時(shí)間日期間相互轉(zhuǎn)換
今天做項(xiàng)目遇到這樣的問題，要將獲取到的時(shí)間轉(zhuǎn)換為時(shí)間戳，通過查閱相關(guān)資料，問題順利解決，下面小編把具體實(shí)現(xiàn)代碼分享到腳本之家平臺，需要的朋友參考下2017-12-12
JS實(shí)現(xiàn)點(diǎn)擊按鈕自動(dòng)增加一個(gè)單元格的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕自動(dòng)增加一個(gè)單元格的方法,實(shí)例分析了javascript操作表格單元格的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
今天小編就為大家分享一篇Layer+Echarts構(gòu)建彈出層折線圖的方法，具有很的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Extjs4實(shí)現(xiàn)兩個(gè)GridPanel之間數(shù)據(jù)拖拽功能具體方法
這篇文章主要介紹了Extjs4實(shí)現(xiàn)兩個(gè)GridPanel之間數(shù)據(jù)拖拽功能具體方法，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了小程序云開發(fā)數(shù)據(jù)庫，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
js-cookie插件是一個(gè)JS操作cookie的插件，源文件只有3.34 KB，非常輕量級，js-cookie也支持npm和Bower安裝和管理，下面看看js-cookie的具體用法2018-03-03
全面了解addEventListener和on的區(qū)別
下面小編就為大家?guī)硪黄媪私鈇ddEventListener和on的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
JavaScript Canvas實(shí)現(xiàn)井字棋游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas實(shí)現(xiàn)井字棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JavaScript實(shí)現(xiàn)網(wǎng)頁五子棋小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁五子棋小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)帶年月選取效果的日歷，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06