當前位置:首頁 » 網頁前端 » 前端gulp
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端gulp

發布時間: 2023-04-08 08:16:59

前端工具裡面gulp和fis,有哪些優缺點

fis 搭建過程相對繁瑣,不過搭建好以後已經集成功能可以更加豐富,例如自帶伺服器環境等,還有一些網路獨有的構建環節插件。

gulp和gruntjs配置和使用類似,主要使用npm倉庫已有的插件進行封裝,生態系統穩定,相對更開放一些。

我自己也開發了一款前端工具,功能可以看做是弱化的fis,但是也有很多獨有的功能,非常適合初中級前端組成團隊的使用,還自帶了比nginx配置方便的代理配置功能。 你可以網路一下 f2e-server.

② 前端構建工具Gulp.js 你知多少..(webpack/gulp/grunt)

@ TOC

閱讀本文章之前,相信你已經對前端構建工具(webpack、gulp、grunt)有一定的認知和了解了,那麼他們之間究竟有什麼區別呢?

gulp文檔上面有這么一句話 ,也就是說 gulp是一個自動化構建工具;
gulp的一些功能如下(包括但不限於):

其實Webpack和另外兩個並沒有太多的可比性

傻瓜式起步照搬官網文檔
1.安裝

2.在項目根目錄下創建一個名為 gulpfile.js 的文件:

3.運行 gulp:

默認的名為 default 的任務(task)將會被運行,在這里,這個任務並未做任何事情。
具體詳情可以查看 gulpjs.com文檔

新建一個項目gulp-test
環境:

1.新建文件以下文件如下

其中 gulpfile.js 是我們gulp的配置文件,啟動gulp默認會找個這個文件並執行;
2.接下來安裝依賴

一直按回車Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁瑣的enter步驟)
此時我們的目錄結構是這樣了

安裝依賴

這里頁面實時刷新只講這個 gulp-connect ,其他詳情可以參照 Browsersync 和文章 gulp-livereload

安裝完依賴後配置gulpfile.js如下:

大概講解一下gulpfile.js:

gulp.task 是gulp的api 定義一個使用 Orchestrator 實現的任務(task)
如上我們定義了 my-task-js my-task-css html clean default watch server 等任務,其中:

my-task-js 是將 符合所提供的匹配模式的js 進行檢測(gulp-jshint)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/js目錄下;

my-task-css 是將 符合所提供的匹配模式的sass進行編譯(gulp-sass)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/css目錄下;

html 是將 符合所提供的匹配模式的html進行監聽,如果有變化則connect.reload()

clean 是如果任務重新啟動時 刪除舊文件;

default gulp默認啟動的任務

watch gulp的api 監視文件,並且可以在文件發生改動時候做一些事情。它總會返回一個 EventEmitter 來發射(emit) change 事件。

server 依賴gulp-connect啟動一個伺服器

配置完gulpfile.js之後,我們給js和css及html加點東西:

首先js/helloworld.js

css/index.scss

index.html

運行gulp

瀏覽器效果:

接下來我們修改helloworld.js來看看是否能實時刷新
修改如下:

按保存之後,終端給我們報了一個錯:

查看js發現我們用了es6語法的聲明語句 但當前gulp無法處理es6語法,有問題解決問題,es6=>es5

解決方案:
安裝gulp-babel babel-core babel-preset-es2015

gulpfile.js修改如下:

運行

依然報上面的錯;找了一些原因發現,雖然安裝了相關依賴,卻沒有配置.babelrc文件,即babel還沒轉化es6

根目錄添加.babelrc文件

重新運行:

查看dist下的js文件

改變helloworld.js檢查頁面是否刷新

保存,頁面的天空藍換成你們喜歡的yellow顏色

修改index.scss 查看是否會刷新頁面

最後修改index.html 查看是否會刷新頁面

今天主要學習了gulp的簡單項目搭建及實時更新配置;其實gulp類似於grunt的弱化版,但更簡單好用,只是插件會少一些,目前主流的項目搭建工具主要是webpack,但依然有不少項目還用著gulp或者grunt

擴展:

下面還有一些樓主的學習筆記:

有興趣的可以多多交流@ 樓主博客

③ nodejs:用ejs模板和gulp實現前端組件化

最近在用nodejs將公司商城的底層重寫。基於nodejs的強大,我從原本的只寫前端變成了寫全棧。
框架採用express,模板用ejs,前端用amazeui. 做完三個頁面後,設計突然說要改UI設計,我勒個去,郁悶地一個個頁面重新調整。下班之後反思一下,覺得花了太多時間在重復勞動上,是時候涉獵一下前端工程化的知識了。
用網路在互聯網暢遊了一番,總結了一下前端工程化的幾個關鍵要素:編碼規范化,結構模塊化,流程自動化。本文所述的方法屬於模塊化,但只是簡單地把dom,css,js拆分,以便更好地管理,而並非像vue框架那樣的組件化,但這種方式可能更易於理解,可以作為過渡。
這是原來的目錄結構

其中public目錄里存放的是靜態資源,按照傳統的做法,css文件夾種存放less文件和css文件,img文件夾中存放圖片資源,js中存放各頁面(views目錄中對應的頁面)的js文件。
當頁面越來越多,會遇到一些重復的部分。像圖中的側邊菜單,頂部搜索框,底部菜單,在幾個頁面都有。如果每個頁面拷貝一份樣式,js,dom,當需求方要更改樣式或者增加功能的時候,徒增工作量。

在一篇文章的啟發下( 前端開發工程化探討 ),我將目錄結構改成如下:

為了標准化,每個組件里的文件命名都相同。以側邊工具欄為例,dom.ejs是一個模板文件:

如果不熟悉ejs模板的語法,可以網路一下。另外,此模板還支持嵌套,並傳入參數。
例如,下面是一個列表容器的dom結構,配合js可以實現上拉載入功能,但列表項的樣式可能不一樣,你可以在使用時再根據傳入的templateName參數決定用哪個模板,非常靈活。

在使用模板時,這樣嵌入頁面。

注意,應使用<%-include()%>,而非<%=include()%>。<%-%>表示內容原樣輸出,不進行運算。而<%=%>會生成運算後的內容。

然後,再來考慮js和css文件應當怎麼處理。如果在頁面中逐個引入組件的js和css文件,維護起來會非常不方便。所以我考慮將某個頁面涉及到的組件,還有頁面本身的js和css打包成一個。這樣做有個缺點,每個頁面的js和css文件會有重復的內容。如果用seajs或requirejs等模塊載入,可以解決重復的問題,但也可能增加項目的復雜度。考慮到打包後的文件只有10K大小,還是暫時使用打包的方法。有興趣的朋友也可以將js模塊化並測試一下性能。
打包涉及到gulp的應用,有許多文章談論到,而我是通過開源項目學習的。
首先我需要寫一個page-config.json文件,告訴gulp我要打包哪些資源:

將文件放在模板目錄的根目錄下面,與src,dist同級。src存放原文件,dist存放生成後的文件。
再寫一個gulpfile.js,用於自動構建。

下面是gulp文件的寫法:

在使用時,要在命令行安裝gulp,切換到gulpfile.js所在的目錄,運行gulp watch,這樣,每次在css和js更改時,會自動重新打包。當然,為了不重復操作,你可以寫一個腳本文件。

④ 前端自動化6部是個車間還是個什麼意思

先來說說為什麼要自動化。凡是要考慮到自動化時,你所做的工作必然是存在很多重復乏味的勞作,很有必要通過程序來完成這些任務。這樣一來就可以解放生產力,將更多的精力和時間投入到更多有意義的事情上。隨著前端開發不再是簡單的作坊式作業,而成為一個復雜的工程時,還涉及到性能優化一系列工作等等,這時自動化已然是迫切的需求。
早期的網站開發

在還沒有前端工程師這種分工如此明確的崗位時,大家所理解的前端工作無非就是製作網頁的人,包括html、css、js等。稍微高級點的可能就是php了,可以讀寫資料庫,可以稱之為動態的網頁。通過近幾年的發展,分工越來越細,在大公司如BAT三家,基本是把前端分開來了,有專門的人寫js,有專門的人寫css。以前一個網頁可以一個人搞定,包括切圖,寫頁面到寫邏輯,無非是幾個資源鏈接拼湊起來。當然邏輯性不強,頁面不重。
最簡單的頁面如下:
<!DOCTYPE html>
<html>
<head>
<style>....</style>
</head>
<body>
hello world
</body>
<script>
....
</script>
</html>

這樣幾個html標簽就能展示成網頁了。順便寫幾個邏輯,填寫幾個表單就差不多了。這就是早期的網頁。
javascript庫

有一次需求你做了一個頁面,然後第二次需求,你領導又讓你做了頁面,只是這次與上次的邏輯都差不多,就改改樣式皮膚,修改圖片等等。這樣你就要從原來的地方拷貝一份代碼過來。如果有一天發現一個bug,你就需要修改兩處地方,這使得你非常的惱火,於是就把公共的邏輯抽取出來,兩個頁面都引用這段代碼,這樣就很好的解決了這個問題。以後有第三個第四個頁面,你也不會擔心了。漸漸的公共的代碼越來越大,又是個獨立的文件,這個文件就成為了一個庫文件了,就像jquery等等。
模塊化

隨著業務的不斷擴大,頁面越來越多,邏輯越來越重,之前你提取出來的庫文件越來越大,功能越來越多。A頁面只引用了其中的一部分函數,B頁面C頁面同樣如此,後來你決定將庫文件拆分成更小的模塊,由各自的功能決定應該在哪個模塊。這樣一來前端開發就此演化為模塊化開發方式。你開發的產品就像搭建積木一樣,將各個模塊組裝在一起。
網頁優化

好了,現在你的工程很龐大了,文件數量新增了非常的多,JS模塊也很多,這時候一個頁面也能載入了上十個js文件或者好幾個樣式文件。用戶訪問你的網頁的時候需要把這些資源從伺服器下載下來,所以理論上來說,想要加快你的網站,比必須減少下載的時間。可以從下載的數量和下載的大小出發,在不做大改變的前提下就是減少HTTP請求數以及壓縮文件大小。雅虎的網頁優化十四條軍規中很大一部分是針對這種情況進行優化,如:
1、合並請求
2、使用雪碧圖
3、壓縮js、css代碼(除去空格,混淆等等)
4、延遲載入
在PC時代,這些問題可能不是那麼尖銳。移動互聯網的興起,對網頁速度提出了更高的要求,因為網速相對比較慢。也有新的優化措施出現,比如緩存js文件等。可是要做到這些,並不是很容易。假如你的頁面引入十個JS文件,這樣發布出去顯然是不好的,所以你要手動合並,將十個JS文件合並成一個,或者幾個。然後還要將合並後的文件進行壓縮。發出去之後產品經理發現有個小問題需要優化一下,這時候你又要重復剛才的工作。如果這樣的事情發生三次,或者更多次,你會變得惱火。當然這只是令你惱火的一點點因素而已,更多的還有合並雪碧圖等等。
經歷過幾次痛苦之後,你會發現性能優化與工程本身之前存在一些矛盾的地方。就是在優雅的開發的同時,兼顧性能方面的考慮實在難以做到。這時自動化工具太有必要了,將開發與發布隔離開來。按照優化的准則,利用構建工具,在發布的時候輕松一鍵搞定,這將是最理想化的作業方式。
一些構建工具

nodejs的出現,給前端開發帶來了一些改變。在沒有任何語言障礙的情況下,前端同學可以轉為後台開發,nodejs帶來另外的一個福音便是構建工具。之前的壓縮合並工具大多是由java編寫的,像雅虎的yui compressor,但對沒有java基礎的前端開發來說,至少要走不少彎路。然後最近一兩年比較火的是國外的grunt和gulp,以及國內的FIS。相比而言,國外總是走在前頭,在探索更好的開發方式,做出了很多探索。
grunt
之前在鳥廠的時候,在組內也嘗試推廣過模塊化的開發方式,主要是用seajs模塊載入器,關於這個的好處我這里就不展開說明了。這種方式從11年開始到現在基本已經得到了認可,或者說是未來的趨勢,ECMAScript 6已經將模塊化加入了規范。等到瀏覽器支持應該是幾年之後的事情。這種模式主要是參考了nodejs,將其思想運用到瀏覽器上。seajs模塊化的詬病之處便是網路請求,上線前面臨的一個問題就是模塊太多,有十幾個文件,需要合並和壓縮,而且還不能簡單的將文件合並在一起。有一套他自己的規則。
在開發的時候,一個模塊對應一個文件,如下:
// a.js
define(function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define(function(require, export, mole){
// xxxxx
})

如果上線前簡單的將這兩個文件合並在一起,那麼a模塊是不能找到b模塊,因此這樣的做法是行不通。一個規則是根據文件的路徑,給每個模塊加上一個唯的id,id的值就是該模塊的路徑:
// a.js
define('a', function(require, export, mole){
require('./b')
// xxxxx
});
//b.js
define('b', function(require, export, mole){
// xxxxx
})

所以在自動化的過程中,需要提取模塊的唯一ID,然後再進行合並。
grunt的插件很多,也非常的成熟,能夠滿足各式各樣的需求。作為新手,我是琢磨了大概半個月的時間才大概了解了其配置文件的意思,但也只是知道用,不明白個所以然。grunt的運作方式就是根據配置文件載入相應的插件,完成相應的任務(task)。當時中文資料比較少,英文也比較晦澀,尤其是配置文件中各配置項的意思不太明白。而當文件多起來了,構建的效率明顯跟不上。加上組內也不太重視,所以就沒怎麼去折騰了。轉去鵝廠之後,grunt就無疾而終了。
gulp
沒有在實戰項目中運用過,暫不說明
組內的構建工具
剛來到鵝廠時,也有自己的一套構建工具,比較單一,項目不大。主要是將上文提到的seajs所帶來的文件解決掉,提取模塊ID,合並之。隨著業務的發展,越來越不滿足實際的需求,後來索性放棄了它,轉而投向網路的FIS。
FIS構建工具
放棄之前的構建工具是因為一個尖銳的問題引起的,就是在發布的時候,有一段時間將會引起外網報錯,就是頁面已經出去,js文件卻還是舊的,即使你在文件後面加上了查詢參數也不太起作用。加上瀏覽器和CDN本身的緩存,這個問題一時之間找不到好的解決方案,唯一的辦法就是採用新的文件,文件加上自身的hash值作為文件名。這樣一來就瞄準了網路的FIS,它能夠簡單的實現我們所需要的功能。
核心思想是文件的定位,也就是在開發測試的階段並不需要將文件hash,只需要在上線的那一刻來做這步。找到原有文件的依賴,將其替換為新的文件名。
理想都很美好,但現實真的很殘酷。FIS上手相對於grunt是要簡單些,但其一點也不簡單。需要理解整體的思想才能去實施,而且小白用戶基本不會使用,除非是一些簡單的合並需求。但復雜的業務場景FIS是滿足不了的。包括前面提到的模塊ID的提取,seajs模塊文件的合並等都需要進行二次開發才能夠做到。
很多頁面是嵌入到APP內部的,APP本身也可以做一次緩存,根據特定的文件名規進行緩存,徹底消滅了304請求,如果每次都是新文件,在伺服器端也可以配置更長久的緩存期,所以這里也需要定製開發。
FIS最值得詬病的地方就是全局構建,這一點不僅使得構建速度快不起來,而且生成的新文件特別多,導致發布的時候去挑選文件。在多人協作開發的時候,會產生沖突,發布的過程極其的痛苦,不知道網路內部的人是怎麼使用的。望著文件夾滿是hash的文件名,瞬間就奔潰了。這是小組內部使用FIS後,血的教訓。
後來決定大刀闊斧的對FIS進行改造。在構建的時候只生成相關的資源文件,核心是找到該文件所依賴的所有的資源文件。當然還是全局構建,只是在生成文件的時候不生成其他不相關的。
這樣發布工作變得非常輕松,一目瞭然。然後配合現在的發布工具,基本上整個開發發布流程也比較順暢了。那天小組會議討論,構建工具的理想目標是什麼,這個問題我也沒有細想過,總之就是要從重復的勞動中解放出來,把時間花在值得的地方。或許可以採用一鍵發布,這可能就是理想,也是後期可以考慮再優化的地方。
現在組內所採用的構建工具,已經和FIS本身有很大的差別了。進行了很多地方的改造,後面有機會進行整體的開發發布流程分享,以及我的一些構建思路。

iamaddy
關注

1

0

0

專欄目錄

4款前端自動化構建工具的介紹與對比.zip_java自動化框架
01-07
4款前端自動化構建工具的介紹與對比.zip 大家都知道webpack是當人不讓的前端自動化構建工具,但是除了它還有其它常用的前端打包工具存在,現在我們來比較4款
前端自動化構建工具(Grunt,、Gulp、 Webpack)
01-02
<span style="color:#404040;">使用構建工具去對 JS、CSS、HTML、LESS、IMG 等進行合並壓縮構建到最後實現自動化構建項目。是前端工程師必備的技能之一。 本套視頻主要講解當前開發中最流行的三種自動化構建工具: Grunt, Gulp, webpack。從理解什麼是構建工具,為什麼要用構建工具,到如何去使用構建工具。 學習本套視頻之前 建議先學習 JS 模塊化。</span>
如何實現自動化前端開發?
CSDN資訊
7051
IDE不僅是文本編輯器,還是編譯器、生成器、調試器和集成器。 作者 |Nicolus Rotich 譯者 |彎月,責編 | 郭芮 出品 | CSDN(ID:CSDNnews) 以下為譯文: 每一行代碼都可以表示為字元串變數,無論代碼本身執行了哪些操作。 這就是我們使用文本文件(即集成開發環境,IDE)向計算機發布指令的根本原因,我知道你一定在想:文本編輯器的名字也太高級了吧。...

前端自動化發布實戰總結
weixin_34418883的博客
163
為什麼要做 今年4月份,開始自己的第二份工作,習慣了老東家如絲般的發布體驗,一下子感覺來到了「原始社會」。 首先這是一篇長文,主要介紹自己在做自動發布這個過程的一些思考。 引用玉伯的Web研發模式演變來說,現在我們處於 - Web1.0時代: 前後端代碼耦合 java環境對前端過於復雜 缺乏工具和規范,代碼難維護 內嵌代碼:html內嵌js,j...
前端項目自動化部署
最新發布
@SCY
392
本文主要內容為三個方面: 一、使用Git倉庫來管理項目 二、如何使用雲伺服器 三、使用Jenkins進行自動化部署
如何實現Web前端自動化?讓這些工具幫助你
xiaoxijing的博客
1569
隨著前端技術的發展,前端開發從靜態網頁的開發到復雜的前後端交互再到基於node.js的全棧開發,前端需要做的事情越來也多,前端代碼的邏輯和交互效果越來越復雜,越來越不易於管理。模塊化開發和預處理框架把項目分成若干個小模塊,增加了最後發布的困難,沒有一個統一的標准,讓前端的項目結構千奇百怪。在新技術不斷湧入的多元化發展模式中,Web前端工程師的工作量也越來越大。前端自動化構建在整個項目開發中越來越重...
前端工程化實戰 - 自動化構建工具
每天進步一點點
496
最典型的運用場景就是在去開發網頁應用時就可以使用: main.scss index.html package.json 安裝 Sass 模塊 安裝完成後,在 node_moles 下有一個 .bin 目錄,這個目錄下有一個 Sass 的命令文件,可以使用指令打開幫助信息 將 Sass 文件轉換成 CSS 使用 或 啟動 實現自動化構建 (1)安裝 browser-sync 模塊,用於啟動一個測試伺服器,去運行項目 (2)在 scripts 中添加 serve 命令,通過 br
前端自動化部署
qq_41206257的博客
2689
名詞解釋 集成:在推送或者 merge 代碼後自動進行構建打包 交付:將上一步生成的代碼包發布至測試、生產等環境 需求 在 git 代碼倉庫發生變化後,自動執行打包腳本,並且發布至伺服器。 解決的問題 在之前每次開發完畢需要上線之前,需要手動執行 bash 命令打包,並且將打包後的代碼人為的拖動至上傳應用(FlileZilla Pro)。 手動執行構建腳本消耗時間人力 而拖動代碼文件會存在拖拽錯誤,覆蓋之前的其他項目代碼等難以預料的問題 工具選擇 gitlab/github/gitee Jenki
前端自動化介紹
張營的技術博客
1815
文章目錄DevOps介紹前端自動化自動化相關概念問題提出常見現象最佳實踐 DevOps介紹 相信大家或多或少的聽過這個詞DevOps,而且看起來很高大上,其實這個是敏捷開發的一種執行流程表現,先來一張經典的DevOps流程圖: 具體的流程為: 先是計劃plan,編碼code,然後編譯build,測試test(Dev) 然後發布release,部署deploy,運維operate,監控monitor(Ops) 然後發現問題或有新的需求,就重新計劃plan。。。如此循環 這就是完整的DevOps流程。 下
前端項目自動部署
weixin_29005819的博客
1190
一、實現的最終效果 點擊一下,即可實現 項目打包 文件壓縮(便於上傳到伺服器) 連接伺服器 備份 上傳打包的文件 解壓 完成部署 二、原理及需要的插件 原理: 執行shell腳本 需要的npm依賴包:archiver(壓縮),ssh2(執行腳本:如連接伺服器,解壓等操作) 三、詳細步驟 3.1 安裝包 yarn add archiver ssh2 3.2 引入包和編寫配置文件 const archiver = require('C:\\Users\\Administrator\\AppDa
前端自動化測試詳解
wdquan19851029的專欄
2405
這篇文章主要向大家介紹前端自動化測試詳解,主要內容包括基礎應用、實用技巧、原理機制等方面,希望對大家有所幫助。 1 前言 文章研究了四個問題:什麼是自動化測試、為何要自動化測試、什麼項目適合自動化測試、自動化測試具體要怎麼作。在尋找這四個問題答案的過程當中,梳理了一套完整的前端自動化測試方案,包括:單元測試、介面測試、功能測試、基準測試。 2 什麼是自動化測試 維基網路是這樣定義的html 在軟體測試中,測試自動化(英語:Test automation)是一種測試方法,使用特定的軟體,去控制測試
Gitlab-ci:從零開始的前端自動化部署
大灰狼的小綿羊哥哥的博客
2669
前言 本文為首發原創,同時轉載至公眾號「全棧前端精選「和「廣發證券金融科技」中 目錄 一.概念介紹 1.1 gitlab-ci && 自動化部署工具的運行機制 1.2 自動化部署給我們帶來的好處 二.知識預備 2.1 gitlab-ci涉及的抽象概念(Runner/PipeLine/Executor/Job ) 2.2 YML文件的基本語法規則 2.3 .gitlab-ci.yml配置的特定關鍵字 三.CI實戰 3.1 編寫一個gitlab-ci的「he
vue前端用伺服器上路徑的圖片展示_談談前端性能自動化
weixin_39968640的博客
1445
前述:前段時間出了性能分析的需求,需要對前端頁面性能做一套自動化測試工具。領導都發話了,那咱說干就干。花了一周時間去找資料以及匹配優秀並且合適的開源插件。花了一個月的時間(斷斷續續,需求也要做的~)完成了這個工具的建設和開發。目前也搭建了一套平台來支撐這樣的工具使用。前端用的VUE,後端用的node(由於本人較熟悉前端),資料庫用的是mangoDB。好了,話不多說,上才藝~設計背景 & 前...
實現前端項目自動化部署(webpack+nodejs)
winne雪
2097
前言: 一般來說,我們前端是不需要關心部署的事情的,只需要把打包後的文件直接丟給後台去部署就可以了。但是呢,如果頻繁修改一點東西就要叫後台進行部署,這樣後台會很煩(畢竟人家還有其他工作嘛),我們也會很不好意思。 或許有些公司會給前端配置可視化操作伺服器文件的軟體(FTP客戶端),這時我們就可以打包後自己到伺服器上部署了,如果不同環境需要部署到不同伺服器,此時我們又需要區分打包再手動上傳到伺服器上。 這時我們就會想,有沒有直接一句命令就能自動化部署到不同伺服器上,根本不需要打開軟體來手動上傳的??? 答案:必
前端項目自動化部署——超詳細教程(Jenkins、Github Actions)
q411020382的博客
1374
參考資料 Docker 入門教程
常用的前端自動化構建工具gulp/grunt/fis --簡介
杜杜的博客
235
常用的前端自動化構建工具 之前我們自動化構建將入門級別使用的 NPM Scripts自動化構建工具對於相對復雜的項目構建會比較吃力,那麼我們會了解 Gulp Grunt fIS 用法基本相同:都是通過一些簡單的代碼,組織一些插件的使用,然後就可以用工具代替我們一些重復的工作,增強開發效率。 Grunt 是基於內磁碟實現的 最早的自動化構建工具 Grunt(點擊可進入官網查看) 優點: 它的插件幾乎可以幫助我們完成任何我們想要做的事情, 缺點: 由於工作過程是基於臨時文件去實現的,所以構建速度較慢。 下
前端自動化部署項目到伺服器 -- 一行命令搞定,摒棄傳統的手工部署 npm run build
一個來自外太空的遊客
2353
傳統的前端代碼手工部署流程如下: 傳統的手工部署需要經歷: 1.打包,本地運行npm run build打包生成dist文件夾。 2.ssh連接伺服器,切換路徑到web對應目錄下。 3.上傳代碼到web目錄,一般通過xshell或者xftp完成。 傳統的手工部署存在以下缺點: 1.每次都需要打開xshell軟體與伺服器建立連接。 2.當負責多個項目且每個項目都具有測試環境和線上環境時,容易引起部署錯誤。 (個人之前非常悲劇地遇到過一次,由於同時負責四個項目,八個環境。一天同時可能修改多個項目,
「相關推薦」對你有幫助么?

非常沒幫助

沒幫助

一般

有幫助

非常有幫助
©️2022 CSDN 皮膚主題:大白 設計師:CSDN官方博客 返回首頁
關於我們
招賢納士
商務合作
尋求報道

400-660-0108

[email protected]

在線客服
工作時間 8:30-22:00
公安備案號11010502030143
京ICP備19004658號
京網文〔2020〕1039-165號
經營性網站備案信息
北京互聯網違法和不良信息舉報中心
家長監護
網路110報警服務
中國互聯網舉報中心
Chrome商店下載
賬號管理規范
版權與免責聲明
版權申訴
出版物許可證
營業執照
©1999-2023北京創新樂知網路技術有限公司

iamaddy
碼齡8年
暫無認證
3
原創
42萬+
周排名
115萬+
總排名
8683
訪問

等級
122
積分
2
粉絲
3
獲贊
0
評論
1
收藏
私信
關注

熱門文章
聊聊前端自動化 3903
扒一扒前端構建工具FIS的內幕 3474
web前端性能優化–緩存 1306
分類專欄

javascript
3篇

技術
3篇
您願意向朋友推薦「博客詳情頁」嗎?

強烈不推薦

不推薦

一般般

推薦

強烈推薦
最新文章
扒一扒前端構建工具FIS的內幕
web前端性能優化–緩存
2015年1篇2014年2篇

舉報

————————————————
版權聲明:本文為CSDN博主「iamaddy」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/iamaddy/article/details/42364137

⑤ 前端通過gulp編譯後的文件,怎麼部署到伺服器

伺服器上寫部署腳本,從代碼庫里拉項目代碼,跑gulp自動化。或者打包傳給後端讓他搞。

⑥ gulp怎麼樣配置前端目錄結構

裝merge-stream吧,npm install --save-dev merge-stream,然後代碼改改:
var gulp = require("gulp");
var sass = require("gulp-sass");
var merge = require('merge-stream');
// 復制靜態資源
var staticfolder = [];
var fonts = {
dist: "dist/fonts/",
src: "src/fonts/**/*"
}
var img = {
dist: "dist/img/",
src: "src/img/**/*"
}
staticfolder = [fonts, img];
gulp.task("static", function () {
var streams = staticfolder.map(function (item) {
return gulp.src(item.src).pipe(gulp.dest(item.dist));
})
return merge.apply(null, streams);
});
gulp.task("static:watch", function () {
var folder = staticfolder.map(function (item) {
return item.src
});
gulp.watch(folder, ["static"])
})
gulp.task("default", ["static:watch"]);
應該就好了

⑦ webpack和前端的一些構造工具,如gulp有什麼不同

Gulp應該和Grunt比較,他們的區別我就不說了,說說用處吧。Gulp / Grunt 是一種工具,能夠優化前端工作流程。比如自動刷新頁面、combo、壓縮css、js、編譯less等等。簡單來說,就是使用Gulp/Grunt,然後配置你需要的插件,就可以把以前需要手工做的事情讓它幫你做了。

說到 browserify / webpack ,那還要說到 seajs / requirejs 。這四個都是JS模塊化的方案。其中seajs / require 是一種類型,browserify / webpack 是另一種類型。

seajs / require : 是一種在線"編譯" 模塊的方案,相當於在頁面上載入一個 CMD/AMD 解釋器。這樣瀏覽器就認識了 define、exports、mole 這些東西。也就實現了模塊化。

browserify / webpack : 是一個預編譯模塊的方案,相比於上面 ,這個方案更加智能。沒用過browserify,這里以webpack為例。首先,它是預編譯的,不需要在瀏覽器中載入解釋器。另外,你在本地直接寫JS,不管是 AMD / CMD / ES6 風格的模塊化,它都能認識,並且編譯成瀏覽器認識的JS。
這樣就知道,Gulp是一個工具,而webpack等等是模塊化方案。Gulp也可以配置seajs、requirejs甚至webpack的插件。

⑧ 前端項目gulp編譯工具打包慢怎麼辦

下面幾個插件,按需索取哈,反正我是都有了。
有多文件用的,有對dev-watch時用的,都有效果。

https://www.npmjs.com/package/gulp-cache

https://www.npmjs.com/package/gulp-cached
https://www.npmjs.com/package/gulp-remember

https://www.npmjs.com/package/happypack

先上圖

等views下面業務模塊有50+,widget目錄下面有20個左右。。。那編譯一次真的是呵呵呵
所以我們增加了一個.localBuildConfig.js

讓同學們只編譯/監聽自己想要的文件即可,同時在編譯log中給予提示

⑨ 前端工具裡面gulp和fis,有哪些優缺點

優點和缺點:
gulp輕量級,你的項目可能由於歷史原因,或者其他原因,fis的一些基礎要求可能和你項目有沖突。比如你可能只想處理整個項目中的一個模塊,或者你不太想在本地開發使用絕對路徑,或者你的項目和程序員分工頁面模板(jsp,php等)和前端資源不在同一個資源位置。這個時候你更適合使用gulp來定製自己的解決方案。
但是gulp使用者來說,並不是每個人都有非常強的處理錯誤能力,如果遇到插件bug(當然這種情況很少見),需要聯系作者,這個是一件非常棘手的事情。但是這種風險是存在的。
fis相對來說因為有專門的QQ群天天為用戶答疑解惑收集bug處理bug,壓根就不用擔心太多問題。另外fis的一些解決方案確實是目前前端優化裡面會需要真實考慮面對的。接觸fis會讓你對整個前端的優化和載入管理有更深入的了解,當然如果你已經了解很透徹了。我相信對於選擇gulp 和fis這種困惑應該也不會存在。

⑩ 前端小萌新必知必會 之 實現自定義Gulp插件

隨著 node 的出現, javascript 的舞台越來越大,能做的事情越來越來。

本篇,我們來聊一聊前端工程化構建工具 Gulp , 並定製符合特定需求的 Gulp 插件 。

Gulp是一個自動化和增強工作流的工具包利用Gulp和JavaScript的靈活性來自動化緩慢、重復的工作流,並將它們組合成高效的構建管道。

廢話說完,接下來,都是干貨啦!

完全展開以後是這樣的

注意, 如果希望 gulpfile 文件也能寫es6 語法, 需要裝個庫: yarn add @babel/register。所有已配好,此處用的是 gulp.babel.js

下面一個一個來分解:
package.json
先用 yanr install 裝一下需要用到的包

1. 關於 gulp 的pipe
pipe 意味管道, 很好理解,文件流通過 pipe 管道, 那麼就可以在這個過程中對文件流進行操作,定製自己的需求。 所有的處理都是在 pipe 中進行的。例如上圖中的例子,

!!那麼同理: 我們也可以加入自己寫的 gulp 插件 對文件流進行處理
2.實現
我們先來實現一個很簡單的功能, 比如 在所有的 js 文件里添加註釋 this is js, 在所有css 文件里添加註釋 this is css, 在所有其他類型的文件里添加 this is other。 具體實現如下:

selfPlugin.js