gulp打包詳解

gulp 作用

1. 刪除文件中冗余的內容，壓縮文件，減小文件體積
2. 實際項目中運行的都是壓縮完完成后的文件
3. 見效加載響應時間

gulp打包壓縮的對象

1. html、css、js、sass、webserver
2. 音頻，圖片，插件等正常情況下都是打包完成的，直接一如到dist對應文件即可
3. 服務器gulp一起綁定執行的，執行的是打包壓縮好的程序文件

gulp基本配置及文件結構

1、下載全局gulp

npm i -g gulp

2、項目目錄結構

• 源文件(src):
  • pages：存儲HTML
  • css：存儲css
  • sass：存儲sass
  • images：存儲圖片
  • js：存儲js
  • plugin：存儲插件
• 壓縮文件(dist)：
  • 壓縮后的文件存放在dist中
  • 文件名稱與源文件名稱一致
  • 實際項目中為了保持文件名稱路徑一致，不添加多余的文件名后綴min等

3、初始化項目

• 整個項目第一次執行

  npm init -y

• 實際項目中，或者下載的git中的項目
  • 下載package.hson文件，到項目中
  • package.json 中存儲了所有的依賴包信息，以及相關設置
  • 在項目路徑下直接運行 npm install 自動下載依賴包

4、安裝依賴包

如果已經有完整的package.json,將 package.json 復制拷貝到指定的文件夾中,執行 npm install 會自動安裝記錄的依賴包　
安裝依賴包 局部/項目依賴包

安裝命令： npm i -D gulp gulp-cssmin gulp-autoprefixer del gulp-uglify gulp-babel @babel/core @babel/preset-env htmlmin sass gulp-webserver

5、配置gulpfile.js

這里會在下面進行詳細介紹

6、運行項目

打開控制臺窗口window+r cmd 切換到項目目錄下執行命令:

gulp

gulp自帶的功能

gulp.src       指定要執行打包文件的路徑,也就是源文件的路徑
gulp.dest      指定打包壓縮好的文件,存儲的路徑
gulp.watch     監聽模塊
gulp.series    按照順序執行程序,只能添加函數名稱
gulp.parallel  同時執行程序,只能添加函數名稱

gulpfile.js書寫

注意

@babel/core 與 @babel/preset-env 是與gulp-babel配合使用的只需下載，不需要加載

制定打包規范

1. css 打包規范

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
const cssHandler = function(){
    return gulp.src('./src/css/*.css')
        .pipe( autoprefixer() )
        .pipe( cssmin() )
        .pipe( gulp.dest( './dist/css' ) )
}

注意

1. 先添加前綴,再執行打包
2. 設定 瀏覽器兼容版本,在 package.json中設定

   "browserslist": [
       "last 2 versions",
       "IOS > 7",
       "FireFox > 20"
   ]
   

2. js 打包規范

const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const jsHandler = function () {
    return gulp.src('./src/js/*.js')
        .pipe(babel({ presets: ['@babel/env'] }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'))
}

注意

1. babel( {presets:['@babel/env']} ) 以對象的形式定義參數
2. 先將其他語法規范,轉化為 ES5 語法規范,再執行打包壓縮

3. html打包壓縮規范

const htmlmin = require('gulp-htmlmin');
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() 中以對象的形式定義參數

4. 圖片等不需要打包壓縮的,就直接移動至dist文件夾

const imgHandler = function () {
    return gulp.src('./src/images/*.*')
        .pipe(gulp.dest('./dist/images'))
}

5. 制定sass的編譯打包壓縮規范

const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
const sassHandler = function () {
    return gulp.src('./src/sass/*.scss')
        .pipe(sass())                       // 將 sass文件編譯為 css文件
        .pipe(autoprefixer())               // 之后就執行css的打包規范
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))    // 存儲也是存儲在css文件夾中
}

6. 服務器執行規范 調用執行打包壓縮好的文件

const webserver = require('gulp-webserver');
const webserverHandler = function () {
    return gulp.src('./dist')      // 指定的是運行文件的目錄,也就是要運行的壓縮的文件,所在的文件夾
        .pipe(webserver({
            host: '127.0.0.1',                // 主機域名,當前就是 127.0.0.1 或者 localhost
            port: '8088',                     // 定義監聽端口
            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, 熱啟動 頁面樣式等更新,不用手動刷新,服務器會自動刷新

設置程序監聽

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

   const del = require('del');
   const delHandler = function () {
       return del(['./dist']);
   }
   

2. 設定監聽規范----指定監聽的文件文件夾,如果出現修改,會自動重新打包壓縮

   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);
       gulp.watch('./src/sass/*.scss', sassHandler);
   }
   

   注意

   1. gulp.watch() 第一個參數是,監聽的文件夾文件路徑
      gulp.watch() 第二個參數是,監聽文件內容發生改變時,執行的打包規范
   2. 必須要定義的打包規范的函數名稱
3. 設定導出默認執行程序

   module.exports.default = gulp.series(
       delHandler,
       gulp.parallel(cssHandler, jsHandler, htmlHandler, imgHandler, sassHandler),
       webserverHandler,
       watchHandler,
   )
   

   注意:

   1. 設定 module.exports.default 之后 ,再執行gulp,只要在路徑下輸入 gulp 就可以了
   2. gulp.series() 按照順序執行設定的程序,順序必須正確
   3. gulp.parallel() 是同時執行所有設定的程序
      順序一定是 : 先刪除之前打包壓縮的文件
      在重新壓縮所有需要打包壓縮,移動的文件
      開啟服務器
      執行監聽

完整代碼

// 1 , 加載依賴包

// 加載 項目gulp 依賴包
const gulp = require('gulp');

// 加載 del刪除依賴包
const del = require('del');

// 加載 css相關依賴包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

// 加載 js相關依賴包
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');

// 加載 HTML 相關依賴包
const htmlmin = require('gulp-htmlmin');

// 加載 sass 依賴包
const sass = require('gulp-sass');

// 加載 服務器 相關依賴包
const webserver = require('gulp-webserver');

// 2,定義打包規范

// 2-1,css打包規范
const cssHandler = function(){
    return gulp.src('./src/css/*.css')
           .pipe( autoprefixer() )
           .pipe( cssmin() )
           .pipe( gulp.dest( './dist/css' ) )
}


// 2-2,js打包規范
const jsHandler = function(){
    return gulp.src('./src/js/*.js')
           .pipe( babel( {presets:['@babel/env']} ) )
           .pipe( uglify() )
           .pipe( gulp.dest( './dist/js' ) )
}

// 2-3,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' ) )
}

// 2-4, 圖片等不需要壓縮打包的文件
const imgHandler = function(){
    return gulp.src('./src/images/*.*')
           .pipe( gulp.dest('./dist/images') )
}

// 2-5, sass的編譯 打包壓縮 規范
const sassHandler = function(){
    return gulp.src( './src/sass/*.scss' )
           .pipe( sass() )                       // 將 sass文件編譯為 css文件
           .pipe( autoprefixer() )               // 之后就執行css的打包規范
           .pipe( cssmin() )
           .pipe( gulp.dest( './dist/css' ) )    // 存儲也是存儲在css文件夾中
}

// 2-6, 服務器打包執行規范
// gulp.src定義的是執行打包文件的路徑.執行的是指定文件中打包之后的文件內容     
const webserverHandler = function(){
    return gulp.src('./dist')      // 指定的是運行文件的目錄,也就是要運行的壓縮的文件,所在的文件夾
           .pipe(webserver({
               host:'127.0.0.1',                // 主機域名,當前就是 127.0.0.1 或者 localhost
               port:'8088',                     // 定義監聽端口
               livereload:true,                 // 執行熱啟動,如果程序代碼,改變,自動刷新頁面,不用重啟服務器,不用手動刷新頁面
               open:'./pages/index.html',   // 默認打開的網頁,輸入 127.0.0.1:8080 地址就會直接打開的頁面
                                                // 默認的地址是,gulp.src()設定的文件夾位置,也就是默認是 dist 壓縮文件夾所在的位置,執行的也是壓縮之后的文件
           }))
}


// 3,定義監聽規范

// 3-1,刪除規范
const delHandler = function(){
    return del(['./dist']);
}

// 3-2,監聽規范
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);
    gulp.watch( './src/sass/*.scss' ,  sassHandler);
}

// 3-3,定義默認執行程序
module.exports.default = gulp.series(
    delHandler,
    gulp.parallel( cssHandler , jsHandler , htmlHandler , imgHandler , sassHandler),
    webserverHandler,
    watchHandler,
)