❶ 前端構建工具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怎麼樣配置前端目錄結構
因為我們現在不是前後端分離的，都是前端做好頁面讓後端套的模板，所以不太懂，如果分離後的話，通過gulp等流程工具導出的文件，怎麼部署到伺服器呢？放在哪裡呢？這一塊沒有接觸過，求幫忙解答一下，謝謝大家
❸ 前端小萌新必知必會 之 實現自定義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
❹ 為什麼做web前端開發要學像gulp這樣構建工具啊，webpack這些是什麼意思，為什麼要用這些
術業專攻吧？gulp負責流程化的構建過程任務，webpack負責最後的打包
❺ 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更改時，會自動重新打包。當然，為了不重復操作，你可以寫一個腳本文件。
❻ 前端自動化構建工具gulp有什麼用
gulpjs是一個前端構建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數，API也非常簡單，學習起來很容易，而且gulpjs使用的是nodejs中stream來讀取和操作數據，其速度更快。如果你還沒有使用過前端構建工具，或者覺得gruntjs太難用的話，那就嘗試一下gulp吧。
❼ gulp+webpack怎麼實現前端模塊化
gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
gulp是基於Nodejs的自動任務運行器， 她能自動化地完成
javascript/coffee/sass/less/html/image/css
等文件的的測試、檢查、合並、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。通過本文，我們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。
gulp 和 grunt 非常類似，但相比於 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構建工作。
webpack
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模塊進行代碼分隔，等到實際需要的時候再非同步載入。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
**當然個人還是喜歡webpack的模塊化優秀
廢話不多說現在開始gulp之旅
初始化項目(此處已經認為node環境已經安裝)
建立文件夾 名字自己隨便取 比如 gulpText，然後輸入以下命令
$ cd gulpText
$ mkdir images //建立存放圖片文件夾
$ mkdir src // 存放 js 以及css
$ mkdir index.html //主頁
$ mkdir gulpfile.js //編寫gulp 任務文件
$ mkdir mock //mock數據
然後輸入以下命令 然後一路點下去生成json文件
$npm init
打開json文件看到這樣的
1474889102536.png
全局安裝gulp以便我們運行gulp進行打包等操作
$npm install gulp -g
如果感覺npm安裝比較慢可以切換至cnpm下載，代碼如下
$npm install cnpm -g
安裝gulp包，方便我們引用gulp
$npm install gulp
成功截圖
1474889517162.png
編寫gulp任務
引入 gulp
//引入gulp
var gulp = require('gulp');
拷貝Index.html
//html
gulp.task('-index',function () {
gulp.src('./index.html')
.pipe(gulp.dest('./build'));
})
執行命令
$ gulp -index
1474890843877.png]( http://upload-images.jianshu.io/upload_images/2905209-c00d640651bde279.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
1474890828271.png
拷貝images
// images
gulp.task('-images',function () {
gulp.src('./images**/*')
.pipe(gulp.dest('./build/'));
})
執行命令
$ gulp -iamges
1474891076408.png
1474891039689.png
css預處理
現在我們在src目錄里創建文件styles放我們的scss代碼，需要把scss代碼編譯到/build/prd/styles/下
$ cd src
$ mkdir styles
$ cd styles
$ touch app.scss
$ touch common.scss
app.scss項目代碼
@charset "UTF-8";
@import "./common.scss";
body{
background-color: $base-color;
color: #000;
font-size: 20px;
font-weight: 800;
}
html{
width: 100%;
height: 100%;
}
html{
width: 100%;
height: 100%;
}
.lsds{
width: 100px;
height: 100px;
}
common.scss代碼
$base-color:yellow;
安裝css預編譯包
$ npm install gulp-sass //sass編輯包
$ npm install gulp-minify-css'); //css壓縮包
//引入css預處理模塊
var sass= require('gulp-sass');
//引入css壓縮模塊
var minifyCSS = require('gulp-minify-css');
//css預處理
var cssFiles=[
'./src/styles/app.scss'
];
gulp.task('scss',function () {
gulp.src(cssFiles)
.pipe(sass().on('error',sass.logError))
.pipe(minifyCSS())
.pipe(gulp.dest('./build/prd/styles/'))
})
編輯scss
$ gulp scss
開啟服務
安裝server包
$ npm install gulp-webserver
//引入gulp-webserver 模塊
var server = require('gulp-webserver');
gulp.task('server',function () {
gulp.src('./')
.pipe(server({
host:'127.0.0.1', //ip
port:80, //埠
directoryListing:{
enable:true,
path:'./'
},
livereload:true,
}));
})
❽ gulp構建工具的幾個使用技巧
這里並不講什麼 gulp 及其其插件的安裝，此前的文章已經提到過了。這里主要用來記錄一下，gulp構建工具的一些簡單常用的用法。
最有用的Gulp插件匯總
1）假如我們想使用gulp壓縮js文件並合並js文件，應如何操作呢？
使用gulp-uglify和gulp-concat插件，gulpfile.js 大致如下：
/**
* Created by DreamBoy on 2016/8/19.
*/
var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('concat', function() {
// 你的默認的任務代碼放在這
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./build'));
});
gulp.task('default', ['concat']);
// 在命令行中運行 gulp
/*
默認的名為default的任務（task）將會被運行，在這里，這個任務並未做任何事情。
想要單獨執行特定的任務（task），請輸入gulp <task> <othertask>。
*/
更加詳細的用法可以參考：gulp教程之gulp-uglify
❾ 前端工具裡面gulp和fis，有哪些優缺點
優點和缺點：
gulp輕量級，你的項目可能由於歷史原因，或者其他原因，fis的一些基礎要求可能和你項目有沖突。比如你可能只想處理整個項目中的一個模塊，或者你不太想在本地開發使用絕對路徑，或者你的項目和程序員分工頁面模板（jsp，php等）和前端資源不在同一個資源位置。這個時候你更適合使用gulp來定製自己的解決方案。
但是gulp使用者來說，並不是每個人都有非常強的處理錯誤能力，如果遇到插件bug（當然這種情況很少見），需要聯系作者，這個是一件非常棘手的事情。但是這種風險是存在的。
fis相對來說因為有專門的QQ群天天為用戶答疑解惑收集bug處理bug，壓根就不用擔心太多問題。另外fis的一些解決方案確實是目前前端優化裡面會需要真實考慮面對的。接觸fis會讓你對整個前端的優化和載入管理有更深入的了解，當然如果你已經了解很透徹了。我相信對於選擇gulp 和fis這種困惑應該也不會存在。
❿ 前端構建工具和打包工具有啥區別
Webpack是一個前端模塊化方案，更側重模塊打包。我們可以把開發中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（載入器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。
Webpack就是需要通過其配置文件（Webpack.config.js）中 entry 配置的一個入口文件（JS文件），然後在解析過程中，發現其他的模塊，如scss等文件，再調用配置的loader或者插件對相關文件進行解析處理。
兩者區別
雖然Gulp 和 Webpack都是前端自動化構建工具，但看2者的定位就知道不是對等的。Gulp嚴格上講，模塊化不是他強調的東西，旨在規范前端開發流程。Webpack更明顯的強調模塊化開發，而那些文件壓縮合並、預處理等功能，不過是他附帶的功能。
以上就是介紹的前端構建工具 Gulp 和 Webpack，以及兩者之間的區別。如今互聯網發展迅速，Web前端人員也應該與時俱進的不斷學習。