gulp涉及的自動化構建的插件gulp-load-plugins,gulp-sass,gulp-imagemin等以及啓動服務browser-sync相關操作

學習的過程中,給我最明顯的感受就是如果版本過新,會導致很多不必須要的麻煩(各種缺modules以及依賴),把趟過的路記錄一下,以及一個工程的規劃設計

工程想要使用gulp,需要gulpfile.js的入口文件,先建個,之後初始化工程yarn init --dev

直接把gulpfile的文件提上,註釋啥的都在裏面了,以及需要注意的

const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const plugins = require('gulp-load-plugins')()//都用plugins了 省的單獨引用各個部分
//sass不知道用plugins調用會報錯,還是用這種單獨調用吧,網上沒搜到這樣的問題,估計各個版本兼容有問題,建議別用最新的版本
const sass = require('gulp-sass')(require('sass'));//這麼寫了???,還得下個yarn add  sass --dev
//下載新版本gulp sass不再自帶默認的sass編譯器，所以要自己手動下載一個sass編譯器的包。手動下載sass編譯器包：npm i sass -D 或者 yarn add sass --dev,想用插件plugins的,但是,關聯不上,只能單獨引用gulp-sass來使用了
// const babel = require('gulp-babel')
// const swig = require('gulp-swig')
// const imagemin = require('gulp-imagemin')
// const del = require('del')
//web服務器
const browserSync = require('browser-sync')
const bs = browserSync.create()
//yarn add del@^5.1.0 --dev
const clean = () => {
  return del(['dist', 'temp'])
}

//yarn add gulp-sass --dev
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src'})
    .pipe(sass())
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

//yarn add gulp-babel --dev
//yarn add @babel/core @babel/preset-env --dev
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src'})
    .pipe(plugins.babel({presets: ['@babel/preset-env']}))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))//這麼寫,也是修改更新變換的,可以替代bs中server的files: 'dist/**'
}
//yarn add gulp-swig --dev
const page = () => {
  return src('src/*.html', { base: 'src'})
    .pipe(plugins.swig({ data }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

//yarn add gulp-imagemin@^7 --dev  得鎖定版本,要不一堆問題,坑死了
const image = () => {
  return src('src/assets/images/**', { base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

//字體
const font = () => {
  return src('src/assets/fonts/**', { base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public'})
    .pipe(dest('dist'))
}

//yarn add browser-sync --dev  服務器
const serve = () => {

  //監視,有修改就更新
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/scripts/*.js', script)
  watch('src/*.html', page)
  //圖片字體,以及其他,一直監控耗費資源,可以在baseDir中配置數組,分別按次序取文件baseDir: ['dist', 'src', 'public']
  // watch('src/assets/images/**', image)
  // watch('src/assets/fonts/**', font)
  // watch('public/**', extra)
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)//bs.reload也是檢測更新

   bs.init({
    notify: false,
    // port: 3000,//端口號,默認3000
    // open: false,//這個是啓動直接彈出瀏覽器,默認是彈
    // files: 'dist/**',//監控文件改動,自動更新
    server: {
      // baseDir: 'dist',
      baseDir: ['temp', 'src', 'public'],//優化一下
      routes: {
        '/node_modules': 'node_modules'//映射路由替換
      }
    }  
   }
    
   )
}

// yarn add gulp-useref --dev  
//對html註釋了<!-- build:js assets/scripts/vendor.js --><!-- endbuild -->裏面的引用路徑,單獨打包一個文件裏
const useref = () => {
  return src('temp/*.html', { base: 'temp' })
  //yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
  //對html js css進行壓縮
    .pipe(plugins.useref({ searchPath: ['temp', '.']}))
    // yarn add gulp-if --dev
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    })))
    .pipe(dest('release'))
} 


const compile = parallel( style, script, page )
//上線前用
const build = series(clean, parallel( series( compile, useref), extra, font, image ))
//開發用的
const develop = series(compile, serve)

module.exports = {
  clean,
  compile,
  develop
}

下面是我對應package.json對應的依賴版本號,僅供參考,可以根據在安裝是  yarn gulp-sass@^對應的版本號 --dev 即可

devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "browser-sync": "^2.27.10",
    "del": "^5.1.0",
    "gulp": "^4",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^6.1.0",
    "gulp-load-plugins": "^2.0.1",
    "gulp-sass": "^5.1.0",
    "gulp-swig": "^0.9.1",
    "gulp-uglify": "^3.0.2",
    "gulp-useref": "^5.0.0",
    "node-sass": "^8.0.0",
    "sass": "^1.56.1"
  }

下面是不是最新的,但是也好用的gulp各個插件的版本號

"devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "browser-sync": "^2.26.7",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^6.1.0",
    "gulp-load-plugins": "^2.0.1",
    "gulp-sass": "^4.0.2",
    "gulp-swig": "^0.9.1",
    "gulp-uglify": "^3.0.2",
    "gulp-useref": "^3.1.6"
  }

僅供參考!