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"
  }

仅供参考!