gulp 深入淺出之專案配置

2021-10-03 23:23:55 字數 3050 閱讀 4731

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 ...