gulp 移動檔案 gulp打包詳解

2021-10-21 08:44:17 字數 4392 閱讀 7263

gulp的作用

刪除檔案中冗餘的內容,壓縮檔案,減小檔案體積

實際專案中執行的都是壓縮完成以後的檔案

減小載入響應時間

gulp打包壓縮物件

html,css,js,sass,webserver

音訊,,外掛程式等正常情況下都是打包完成的,直接移動到dist檔案中就可以

伺服器食慾gulp一起繫結執行的,執行的是打包壓縮好的程式檔案

gulp執行過程

所有執行步驟必須嚴格遵守,尤其是語法規範必須嚴格執行

npm i -g gulp

2、建立專案檔案

原始檔src:

pages    儲存html檔案

css      儲存css檔案

sass      儲存sass檔案

images     儲存

js       儲存js檔案

plug     儲存外掛程式

壓縮檔案 dist:

將壓縮好的檔案存放在dist中

檔名稱與原檔名稱保持一致

實際專案中為了保持檔名稱路徑一致,不新增多餘的檔名字尾min等

3、檔案初始化

整個專案第一次執行

npm init -y

package.json 中 儲存了所有依賴包的資訊 以及 依賴包的相關設定

在專案路徑下,執行 npm install 會自動安裝依賴包

4、如果是第一次執行專案,需要逐一安裝依賴包

如果是已經有完整的 package.json

將 package.json 複製拷貝到指定的資料夾中,執行 npm install 會自動安裝記錄的依賴包

安裝依賴包  區域性/專案依賴包

npm i gulp gulp          依賴包

npm i gulp-cssmin          css壓縮依賴包

npm i gulp-autoprefixer       css新增字首依賴包

npm i gulp-uglify            es5語法壓縮依賴包

npm i gulp-babel           其他語法轉化es5語法規範

npm i @babel/core          與 gulp-babel 配合的依賴包

npm i @babel/preset-env

npm i htmlmin              html壓縮依賴包

npm i webserver           伺服器依賴包

npm i del                 刪除檔案依賴包

npm i sass              sass檔案依賴包

建立 gulpfile.js 檔案,定義gulp打包壓縮程式規範

1、載入所有依賴包

2、制定打包規範

a 、css 打包規範

const csshandler = function() ) )

.pipe( uglify() )

.pipe( gulp.dest( 『./dist/js『 ) )

注意:1, babel(  ) 以物件的形式定義引數

2, 先將其他語法規範,轉化為 es5 語法規範,再執行打包壓縮

c 、 html打包壓縮規範

const htmlhandler = function(){

return gulp.src( 『./src/pages/*.html『 )

.pipe(htmlmin({

removeattributequotes : true ,          // 刪除屬性上的雙引號

removecomments : true ,                 // 刪除注釋內容

collapsebooleanattributes : true ,     // 刪除布林屬性的屬性值

collapsewhitespace : true ,            // 刪除標籤之前的空格

minifycss : true ,                       // 壓縮html檔案中的css程式

minifyjs : true ,                          // 壓縮html檔案中的js程式

// 雖然可以壓縮html中的js和css,但是壓縮執行的不完美

// 實際專案中,不要有內部,js和css,都要寫成外部檔案形式

.pipe( gulp.dest( 『./dist/pages『 ) )

注意: 1, htmlmin() 中以物件的形式定義引數

d 、等不需要打包壓縮的,就直接移動至dist資料夾

const imghandler = function(){

return gulp.src(『./src/images/*.*『)

.pipe( gulp.dest(『./dist/images『) )

e , 設定 伺服器執行規範 呼叫執行打包壓縮好的檔案

const webserverhandler = function(){

return gulp.src(『./dist『)      // 指定的是執行檔案的目錄,也就是要執行的壓縮的檔案,所在的資料夾

.pipe(webserver({

host:『127.0.0.1『,                // 主機網域名稱,當前就是 127.0.0.1 或者 localhost

port:『8080『,                     // 定義監聽埠

livereload:true,                 // 執行熱啟動,如果程式**,改變,自動重新整理頁面,不用重啟伺服器,不用手動重新整理頁面

open:『./pages/index.html『,   // 預設開啟的網頁,輸入 127.0.0.1:8080 位址就會直接開啟的頁面

// 預設的位址是,gulp.src()設定的資料夾位置,也就是預設是 dist 壓縮資料夾所在的位置,執行的也是壓縮之後的檔案

注意: 1, gulp.src(『./dist『) 設定執行的打包壓縮檔案,儲存的資料夾路徑

2, open 設定伺服器啟動之後,執行的預設頁面

設定相對路徑的起始位置,是 gulp.src() 設定的資料夾位置

3, livereload:true,  熱啟動 頁面樣式等更新,不用手動重新整理,伺服器會自動重新整理

f、制定sass的編譯打包壓縮規範

const sasshandler = function(){

return gulp.src(『./src/sass/*.scss『)

.pipe( sass() )             // 將sass編譯為css

.pipe( autoprefixer() )     // 之後就是執行css的打包壓縮規範

.pipe( cssmin() )

.pipe( gulp.dest( 『./dist/css『 ) )

設定監聽程式

a , 設定刪除規範,也就是每次執行新的打包壓縮之前,先刪除原始的打包內容

const delhandler = function(){

return del([『./dist『]);

b , 設定監聽規範,指定監聽的檔案資料夾,如果出現修改,會自動重新打包壓縮

const watchhandler = function(){

gulp.watch( 『./src/css/*.css『 ,  csshandler);

gulp.watch( 『./src/js/*.js『 ,  jshandler);

gulp.watch( 『./src/pages/*.html『 ,  htmlhandler);

gulp.watch( 『./src/images/*.*『 ,  imghandler);

注意: 1, gulp.watch() 第乙個引數是,監聽的資料夾檔案路徑

gulp.watch() 第二個引數是,監聽檔案內容發生改變時,執行的打包規範

2, 必須要定義的打包規範的函式名稱

c , 設定匯出預設執行程式

module.exports.default = gulp.series(

delhandler,

gulp.parallel( csshandler , jshandler , htmlhandler , imghandler),

webserverhandler,

watchhandler,

注意: 1,設定 module.exports.default 之後 ,再執行gulp,只要在路徑下輸入 gulp 就可以了

2,gulp.series() 按照順序執行設定的程式,順序必須正確

gulp.parallel() 是同時執行所有設定的程式

順序一定是 : 先刪除之前打包壓縮的檔案

在重新壓縮所有需要打包壓縮,移動的檔案

開啟伺服器

執行監聽

gulp不生成打包檔案 gulp打包詳解

gulp的作用 刪除檔案中冗餘的內容,壓縮檔案,減小檔案體積 實際專案中執行的都是壓縮完成以後的檔案 減小載入響應時間 gulp打包壓縮物件 html,css,js,sass,webserver 音訊,外掛程式等正常情況下都是打包完成的,直接移動到dist檔案中就可以 伺服器食慾gulp一起繫結執行...

gulp不生成打包檔案 gulp打包詳解

gulp的作用 刪除檔案中冗餘的內容,壓縮檔案,減小檔案體積 實際專案中執行的都是壓縮完成以後的檔案 減小載入響應時間 gulp打包壓縮物件 html,css,js,sass,webserver 音訊,外掛程式等正常情況下都是打包完成的,直接移動到dist檔案中就可以 伺服器食慾gulp一起繫結執行...

gulp不生成打包檔案 gulp自動化打包(下)

打包流程簡介 本次打包大致過程是checkout出想要打包的git版本 可以是tag,也可以是branchname 然後依次讀取專案中的html less js進行壓縮合併等操作,複製專案中所用到的第三方庫到輸出目錄 即plugins中的外掛程式,比如lodash echarts等,前邊壓縮合併的j...