gulp打包詳解

gulp 作用

1. 刪除文件中冗余的內(nèi)容，壓縮文件，減小文件體積
2. 實(shí)際項(xiàng)目中運(yùn)行的都是壓縮完完成后的文件
3. 見效加載響應(yīng)時(shí)間

gulp打包壓縮的對象

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

gulp基本配置及文件結(jié)構(gòu)

1、下載全局gulp

npm i -g gulp

2、項(xiàng)目目錄結(jié)構(gòu)

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

3、初始化項(xiàng)目

• 整個(gè)項(xiàng)目第一次執(zhí)行

  npm init -y

• 實(shí)際項(xiàng)目中，或者下載的git中的項(xiàng)目
  • 下載package.hson文件，到項(xiàng)目中
  • package.json 中存儲了所有的依賴包信息，以及相關(guān)設(shè)置
  • 在項(xiàng)目路徑下直接運(yùn)行 npm install 自動下載依賴包

4、安裝依賴包

如果已經(jīng)有完整的package.json,將 package.json 復(fù)制拷貝到指定的文件夾中,執(zhí)行 npm install 會自動安裝記錄的依賴包　
安裝依賴包 局部/項(xiàng)目依賴包

安裝命令： 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

這里會在下面進(jìn)行詳細(xì)介紹

6、運(yùn)行項(xiàng)目

打開控制臺窗口window+r cmd 切換到項(xiàng)目目錄下執(zhí)行命令:

gulp

gulp自帶的功能

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

gulpfile.js書寫

注意

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

制定打包規(guī)范

1. css 打包規(guī)范

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. 先添加前綴,再執(zhí)行打包
2. 設(shè)定 瀏覽器兼容版本,在 package.json中設(shè)定

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

2. js 打包規(guī)范

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']} ) 以對象的形式定義參數(shù)
2. 先將其他語法規(guī)范,轉(zhuǎn)化為 ES5 語法規(guī)范,再執(zhí)行打包壓縮

3. html打包壓縮規(guī)范

const htmlmin = require('gulp-htmlmin');
const htmlHandler = function () {
    return gulp.src('./src/pages/*.html')
        .pipe(htmlmin({
            removeAttributeQuotes: true,       // 刪除屬性上的雙引號
            removeComments: true,              // 刪除注釋內(nèi)容
            collapseBooleanAttributes: true,   // 刪除布爾屬性的屬性值
            collapseWhitespace: true,          // 刪除標(biāo)簽之前的空格
            minifyCSS: true,                   // 壓縮html文件中的css程序 
            minifyJS: true,                    // 壓縮html文件中的js程序
            // 雖然可以壓縮HTML中的js和css,但是壓縮執(zhí)行的不完美
            // 實(shí)際項(xiàng)目中,不要有內(nèi)部,js和css,都要寫成外部文件形式
        }))
        .pipe(gulp.dest('./dist/pages'))
}

注意

1. htmlmin() 中以對象的形式定義參數(shù)

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

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

5. 制定sass的編譯打包壓縮規(guī)范

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())               // 之后就執(zhí)行css的打包規(guī)范
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))    // 存儲也是存儲在css文件夾中
}

6. 服務(wù)器執(zhí)行規(guī)范 調(diào)用執(zhí)行打包壓縮好的文件

const webserver = require('gulp-webserver');
const webserverHandler = function () {
    return gulp.src('./dist')      // 指定的是運(yùn)行文件的目錄,也就是要運(yùn)行的壓縮的文件,所在的文件夾
        .pipe(webserver({
            host: '127.0.0.1',                // 主機(jī)域名,當(dāng)前就是 127.0.0.1 或者 localhost
            port: '8088',                     // 定義監(jiān)聽端口
            livereload: true,                 // 執(zhí)行熱啟動,如果程序代碼,改變,自動刷新頁面,不用重啟服務(wù)器,不用手動刷新頁面
            open: './pages/index.html',   // 默認(rèn)打開的網(wǎng)頁,輸入 127.0.0.1:8080 地址就會直接打開的頁面
            // 默認(rèn)的地址是,gulp.src()設(shè)定的文件夾位置,也就是默認(rèn)是 dist 壓縮文件夾所在的位置,執(zhí)行的也是壓縮之后的文件
        }))
}

注意

1. gulp.src('./dist') 設(shè)定執(zhí)行的打包壓縮文件,存儲的文件夾路徑
2. open 設(shè)定服務(wù)器啟動之后,執(zhí)行的默認(rèn)頁面
   設(shè)定相對路徑的起始位置,是 gulp.src() 設(shè)定的文件夾位置
3. livereload:true, 熱啟動 頁面樣式等更新,不用手動刷新,服務(wù)器會自動刷新

設(shè)置程序監(jiān)聽

1. 設(shè)定刪除規(guī)范----也就是每次執(zhí)行新的打包壓縮之前,先刪除原始的打包內(nèi)容

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

2. 設(shè)定監(jiān)聽規(guī)范----指定監(jiān)聽的文件文件夾,如果出現(xiàn)修改,會自動重新打包壓縮

   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() 第一個(gè)參數(shù)是,監(jiān)聽的文件夾文件路徑
      gulp.watch() 第二個(gè)參數(shù)是,監(jiān)聽文件內(nèi)容發(fā)生改變時(shí),執(zhí)行的打包規(guī)范
   2. 必須要定義的打包規(guī)范的函數(shù)名稱
3. 設(shè)定導(dǎo)出默認(rèn)執(zhí)行程序

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

   注意:

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

完整代碼

// 1 , 加載依賴包

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

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

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

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

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

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

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

// 2,定義打包規(guī)范

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


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

// 2-3,html打包規(guī)范
const htmlHandler = function(){
    return gulp.src( './src/pages/*.html' )
           .pipe(htmlmin({
               removeAttributeQuotes : true ,       // 刪除屬性上的雙引號
               removeComments : true ,              // 刪除注釋內(nèi)容
               collapseBooleanAttributes : true ,   // 刪除布爾屬性的屬性值
               collapseWhitespace : true ,          // 刪除標(biāo)簽之前的空格
               minifyCSS : true ,                   // 壓縮html文件中的css程序 
               minifyJS : true ,                    // 壓縮html文件中的js程序
                                                    // 雖然可以壓縮HTML中的js和css,但是壓縮執(zhí)行的不完美
                                                    // 實(shí)際項(xiàng)目中,不要有內(nèi)部,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的編譯 打包壓縮 規(guī)范
const sassHandler = function(){
    return gulp.src( './src/sass/*.scss' )
           .pipe( sass() )                       // 將 sass文件編譯為 css文件
           .pipe( autoprefixer() )               // 之后就執(zhí)行css的打包規(guī)范
           .pipe( cssmin() )
           .pipe( gulp.dest( './dist/css' ) )    // 存儲也是存儲在css文件夾中
}

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


// 3,定義監(jiān)聽規(guī)范

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

// 3-2,監(jiān)聽規(guī)范
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,定義默認(rèn)執(zhí)行程序
module.exports.default = gulp.series(
    delHandler,
    gulp.parallel( cssHandler , jsHandler , htmlHandler , imgHandler , sassHandler),
    webserverHandler,
    watchHandler,
)