gulp 前端自動化打包工具,需要依賴乙個 node 環境
gulp 版本問題
目前市場上流行兩種 gulp 版本
gulp 安裝
gulp 檢測
gulp 解除安裝
gulp 應用
自己手動在專案根目錄下建立乙個 gulpfile.js 檔案,必須是這個名字,在這個檔案中寫我們對這個專案的打包規則
gulpfile.js 配置檔案的書寫
借用一些 gulp 的 api 來幫我們進行打包
準備乙個乙個的書寫 打包規則,因為 css/js/html 的打包規則肯定不一樣
執行各種壓縮**的 方式,都是使用各種第三方模組
gulp-autoprefixer 專門用來給 css 自動新增相容**字首的
del 第三方模組 專門用來刪除目錄的
gulp-webserver 專門用來開啟伺服器的模組
注意:這裡的 gulp 第三方模組是為了打包壓縮用的,不需要上線,所以在 package.json 檔案中分開記錄
我們安裝一些上線以後不需要的依賴,使用另外乙個指令
配置如下:
// 匯入 gulp 模組
const gulp =
require
('gulp');
/*gulp 中提供了很多方法
1. src() 用來找到你要打包的檔案
2. pipe() 用來幫你做事的
語法:pipe('你要做的事情'),返回乙個二進位製流,可以繼續呼叫方法
3. dest() 用來寫入檔案的
語法:gulp.dest('gulp.dest('./dist/css')') 把檔案寫入 ./dist/css 這個目錄
4. parallel() 用來並行執行多個任務
語法:gulp.parallel(任務1, 任務2, ...)
只要這個返回值一執行,就能把你準備好的幾個任務 同時執行
5. series() 用來逐個執行多個任務
語法:gulp.series(任務1, 任務2, ...)
只要這個返回值一執行, 就能把你準備好的幾個任務逐一完成
6. watch() 用來監控檔案是否改變,做出對應的處理
語法:gulp.watch('監聽的檔案',對應的任務)
*/// 匯入 gulp-cssmin 模組,壓縮 css 檔案
const cssmin =
require
('gulp-cssmin');
// 匯入 gulp-autoprefixer 模組 用於 css 自動在瀏覽器 字首
const autoprefixer =
require
('gulp-autoprefixer');
// 匯入 gulp-uglify 模組 , 用於壓縮 js **,但是不會壓縮 es6 語法,所以需要依賴另外乙個包
// gulp-babel ,將 es6 語法 轉換成 es5 語法,這個包有需要兩個包做支撐 @babel/core 和 @babel/preset-env
// babel() ,這個需要配置引數,也可以配置到 package.json 中
// 匯入 gulp-uglify 用來壓縮 js 檔案
const uglify =
require
('gulp-uglify');
// 匯入 gulp-babel 用來 轉換 es6 語法, 這個包匯入後,會自動匯入 @babel/core 和 @babel/preset-env 這兩個包
const babel =
require
('gulp-babel');
// 匯入 gulp-htmlmin 用來壓縮 html 檔案, 這個包需要配置引數
const htmlmin =
require
('gulp-htmlmin'
)// 匯入 del 模組 用來刪除 目錄
const del =
require
('del'
)// 匯入 gulp-webserver 模組 用來開啟乙個服務
const webserver =
require
('gulp-webserver'
)// 壓縮 css 檔案
varcsshandler
=function()
// 壓縮 js 檔案
varjshandler
=function()
)).pipe
(uglify()
)// 壓縮 js **
.pipe
(gulp.
dest
('./dist/js'))
// 將壓縮好的**放入 .
/dist/js 這個目錄下}/
/ 壓縮 html 檔案
varhtmlhandler
=function()
)).pipe
(gulp.
dest
('./dist/html'))
}// 移動 images 裡面的
varimghandler
=function()
// 刪除目錄
vardelhandler
=function()
// 開啟乙個服務
varserverhandler
=function()
]}))
}// 自動監控檔案
varwatchhandler
=function()
module.exports.
default
= gulp.
series
( delhandler,
gulp.
parallel
(csshandler,jshandler,htmlhandler,imghandler)
, serverhandler,
watchhandler
)
關鍵字:gulp 逆戰
深入淺出之STL
c stl 標準模板庫 是一套功能強大的 c 模板類,提供了通用的模板類和函式,這些模板類和函式可以實現多種流行和常用的演算法和資料結構,如向量 鍊錶 佇列 棧。c 標準模板庫的核心包括以下三個元件 元件描述 容器 containers 容器是用來管理某一類物件的集合。c 提供了各種不同型別的容器,...
深入淺出sizeof
int佔 位元組,short佔 位元組 1.0 回答下列問題 答案在文章末尾 1.sizeof char 2.sizeof a 3.sizeof a 4.strlen a 如果你答對了全部四道題,那麼你可以不用細看下面關於sizeof的論述。如果你答錯了部分題目,那麼就跟著我來一起 關於sizeof...
深入淺出ShellExecute
ipconfig c log.txt應如何處理?二樓的朋友,開啟拔號網路這樣 shellexecute null,open c windows rundll32.exe shell32.dll,control rundll c windows system telephon.cpl null,sw ...