gulp基於node流的自動化構建工具

gulp

在我才接觸gulp的時候 看他就是乙個 通過壓縮各種檔案來提公升使用者體驗的開發工具   那是因為  對他的理解並不深    

他真正強大 之處 在於他的     管子.pipe()可以 鏈式呼叫 無數個  厲害的外掛程式

流的概念  我還不太理解  待我再仔細學習  node.js 後再說  現在  就不在這裡 誤導別人了

下面詳細的來說一說gulp關於壓縮檔案的外掛程式

壓縮各種 型別檔案 的操作其實差不多 都是要先 引入 gulp包   再引入 對應要壓縮檔案型別的 npm包

那麼在資料夾裡gitbash 輸入如下

如果 安裝成功可以  gulp -v   看下版本號   能看你就成功了     這個npm 不太好安裝   你可以 使用**映象 來安裝 

安裝**映象   安裝成功之後  把 所有的npm操作 換成 cnpm   會比之前快很多的

package.json 裡預設的入口 main是  gulpfile.js   我們就新建乙個 gulpfile.js 檔案 （你想改main也沒人攔你）

下面來幹正事

壓縮js

gulpfile.js

var gulp = require('

gulp
');　　//請求gulp
var uglify = require('
gulp-uglify
');　　//壓縮js的方法ualify（醜筆？）
gulp.task(
'script
',function
())

這時在gitbash中  

$ npm i -d gulp-uglify   //安裝需要的包

$ gulp script

新生成了乙個 dist資料夾  裡面的js  資料夾裡面 也有乙個 test.js   這個就是壓縮後的js

使用命令列之後 經常會遇到  一類錯誤  

這類錯誤  很容易解決  就是  缺什麼 module  下什麼 module 

npm i ***  即可      下面  所有require 引入的模組 都要 npm 安裝的  下面 包類似的錯誤也是這麼解決哦

我們來分析一下  上面這個栗子的成分    

1.引入 gulp

2.引入要壓縮檔案 需要的  包  （gulp-uglify）

3.gulp任務 （gulp.task）  可以有多個任務哦 就是同時壓縮好幾種型別的檔案

注意：下面這三個 鏈式呼叫的

1）gulp.src()　　要從**找檔案    ./  相對路徑  ，  *.js  任何以.js 結尾的檔案

2）pipe()　　管子  。幹嗎用的呢？ 我也不知道  我感覺就是固定的格式   他要管道給他就好

在這裡面    的是  真正 發揮作用 的    uglify  他把檔案壓縮的

3）pipe()　管子不能停  。。。   (想進行更多的操作  可以 一直  .pipe下去)

在這裡  gulp.dest()　　壓縮完 的東西 放到**

我們再來壓縮乙個 css

gulpfile.js

var gulp = require('

gulp
');　　　　//這個請求過一次就不需要在請求了
var minifycss = require('
gulp-minify-css
');　　//新的變數
gulp.task(
'css
',function
())

這時我們 在gitbash 輸入 gulp css   就可以在 dist 下的 css 裡面生成  壓縮後的檔案

切！ 這玩應好簡單   就是壓縮乙個就要敲一次命令列有點麻煩了

當然有簡單的方法    

watch  持續監聽

default 　設定過之後 你只需要 在命令列敲4個字母   gulp 就行了 

在上面的**的幾乎上   還是 gulpfile.js

gulp.task('

auto
', function
() )
gulp.task(
'default
',['
script
','css
', '
auto
'])

gulp.default('default',['name'],['name'])　 default(預設的)    ,   任務的名字

都是這個套路啊

no   大部分都是這樣的   就是中間那個管道 裡面懂東西需要 改一下      附上神錶

壓縮的檔案型別

中間管的內容

jsgulp-uglify()

cssgulp-minify-css

gulp-imagemin()

less/sass

gulp-less()/gulp-sass()

如果 你跟這 我這個小白打了打  而且  你很善於發現問題   你會發現  在壓縮js 的時候 如果js檔案裡面有  es6的語法    會報錯   

其實 也好解決    在   壓縮  js 的中間管之前  新增  乙個 轉化  es6 到 es5 的  包即可　　babel

//

壓縮有es6 的 js
gulp.task('
script
',function
())

檔案裡面寫上下面的**即可

模組名稱

模組.pipe()

模組的作用

刪除模組       del

.pipe(del)

刪除已有內容

格式檢查模組 gulp-jsgint

.pipe(gulp-jshint).pipe(gulp-jshint.repoter('default'))

檢查**格式錯誤 便於除錯

檔案合併模組 gulp-concat

.pipe(concat(newname.css))

把多個檔案合併成乙個檔案

重新命名模組　 gulp-rename

.pipe(gulp-rename(newname.js))

重新命名檔案

錯誤抑制模組 gulp-plumber

.pipe(gulp-plumber)

即使報錯 gulp 仍然處於掛起狀態

還有 copy 模組  其實  就是  gulp.src  獲取過來 然後    .pipe(gulp.dest())  匯出去    就相當於 copy了  

還有  gulp-livereload 據說是 實時更新   我按照 npm **上的教程打了一下   沒成功

他說 他公升級了 不再 自動監聽了      需要  設定  livereload()　　 然而 他得 例項** 並沒有這麼設定  我自己試了幾下   就算了吧  感覺 用 watch 監聽就夠了  

就囉嗦到這裡了感謝各位大爺  來**   大爺吃好喝好  記得常來啊~~~~

基於gulp的前端自動化方案

最近幾年前端技術發展日新月異，特別是單頁應用的普及。元件化 工程化 自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流，但是一些老古董的專案還是存在的，也有優化的必要，正好公司的老專案需要優化，不多說拿gulp實踐一下。你的專案目錄關係到你的gulp指令碼裡的任務路徑，我指令碼裡寫...

基於gulp的前端自動化方案

最近幾年前端技術發展日新月異，特別是單頁應用的普及。元件化 工程化 自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流，但是一些老古董的專案還是存在的，也有優化的必要，正好公司的老專案需要優化，不多說拿gulp實踐一下。你的專案目錄關係到你的gulp指令碼裡的任務路徑，我指令碼裡寫...

基於gulp的前端自動化方案

最近幾年前端技術發展日新月異，特別是單頁應用的普及。元件化 工程化 自動化成了前端發展的趨勢。webpack已經成為了前端打包構建的主流，但是一些老古董的專案還是存在的，也有優化的必要，正好公司的老專案需要優化，不多說拿gulp實踐一下。你的專案目錄關係到你的gulp指令碼裡的任務路徑，我指令碼裡寫...