㈠ 前端通過gulp編譯後的文件，怎麼部署到伺服器
伺服器上寫部署腳本，從代碼庫里拉項目代碼，跑gulp自動化。或者打包傳給後端讓他搞。
㈡ 前端自動化構建工具gulp有什麼用
gulpjs是一個前端構建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數，API也非常簡單，學習起來很容易，而且gulpjs使用的是nodejs中stream來讀取和操作數據，其速度更快。如果你還沒有使用過前端構建工具，或者覺得gruntjs太難用的話，那就嘗試一下gulp吧。
㈢ 前端工具裡面gulp和fis，有哪些優缺點
優點和缺點：
gulp輕量級，你的項目可能由於歷史原因，或者其他原因，fis的一些基礎要求可能和你項目有沖突。比如你可能只想處理整個項目中的一個模塊，或者你不太想在本地開發使用絕對路徑，或者你的項目和程序員分工頁面模板（jsp，php等）和前端資源不在同一個資源位置。這個時候你更適合使用gulp來定製自己的解決方案。
但是gulp使用者來說，並不是每個人都有非常強的處理錯誤能力，如果遇到插件bug（當然這種情況很少見），需要聯系作者，這個是一件非常棘手的事情。但是這種風險是存在的。
fis相對來說因為有專門的QQ群天天為用戶答疑解惑收集bug處理bug，壓根就不用擔心太多問題。另外fis的一些解決方案確實是目前前端優化裡面會需要真實考慮面對的。接觸fis會讓你對整個前端的優化和載入管理有更深入的了解，當然如果你已經了解很透徹了。我相信對於選擇gulp 和fis這種困惑應該也不會存在。
㈣ 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更改時，會自動重新打包。當然，為了不重復操作，你可以寫一個腳本文件。
㈤ 前端構建工具和打包工具有啥區別
Webpack是一個前端模塊化方案，更側重模塊打包。我們可以把開發中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（載入器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。
Webpack就是需要通過其配置文件（Webpack.config.js）中 entry 配置的一個入口文件（JS文件），然後在解析過程中，發現其他的模塊，如scss等文件，再調用配置的loader或者插件對相關文件進行解析處理。
兩者區別
雖然Gulp 和 Webpack都是前端自動化構建工具，但看2者的定位就知道不是對等的。Gulp嚴格上講，模塊化不是他強調的東西，旨在規范前端開發流程。Webpack更明顯的強調模塊化開發，而那些文件壓縮合並、預處理等功能，不過是他附帶的功能。
以上就是介紹的前端構建工具 Gulp 和 Webpack，以及兩者之間的區別。如今互聯網發展迅速，Web前端人員也應該與時俱進的不斷學習。
㈥ 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.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
擴展:
下面還有一些樓主的學習筆記:
有興趣的可以多多交流@ 樓主博客
㈧ 前端小萌新必知必會 之 實現自定義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
㈨ 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"]);
應該就好了
㈩ 前端項目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中給予提示