Glup的基本使用

1.作为当下前端构建系统，其核心高效易用，首先在一个空文件进行初始化—yarn init —yes
2.然后在安装gulp作为项目依赖进行安装，yarn add gulp —dev
3.在文件的根路劲下创建一个gulp的入口文件 （比如叫glupfile.js），在命令行终端中进行运行 yarn glup foo，
但是会报一个错误。（foo这个任务还没完成，不要忘记标识这个任务的结束，因为在最新gulp代码中它取消了 同步代码模式，约定每一个任务都是异步的任务，当我们每一个任务结束后必须给一个标识来标识这个任务的结束）

  1. //gulp 的入口文件 glupfile.js
  2. exports.foo=()=>{
  3.     console.log('foo task working');
  4. }
  5. //err :The following tasks did not complete: foo
  6. // Did you forget to signal async completion?
  8. //解决 传入一个形式回调参数，来标识这个任务的结束
  9. exports.foo=done=>{
  10.     console.log('foo task working');
  11.    done();//标识任务完成
  12. }
  14. //默认任务 运行不需要函数名 直接 yarn gulp
  15. exports.default =done=>{
  16.     console.log('defalut task working')
  17.     done();
  18. }
  20. //gulp 4.0 以后 可以使用这种方式来创建一个任务，但是已经被废弃了，比较使用上面这种方式来创建任务
  21. const gulp =require('gulp');
  23. gulp.task('bar',done=>{
  24.     console.log('bar task woring')
  25.     done();
  26. })

glup的组合任务

  1. //串行任务和并行任务
  2. const {series,parallel} = require("gulp")
  4. const task1 = done =>{
  5.    setTimeout(()=>{
  6.     console.log('task1 working')
  7.    },1000)
  8. }
  9. const task2 = done =>{
  10.    setTimeout(()=>{
  11.     console.log('task2 working')
  12.    },1000)
  13. }
  15. const task3 = done =>{
  16.    setTimeout(()=>{
  17.     console.log('task3 working')
  18.    },1000)
  19. }
  20. //创建并行任务和并行任务的时候，在我们实际构建工作流的工程中例如我们编辑css和js 两个任务的时候 ，由于
  21. //两个任务是互不干扰的，我们可以使用并行任务来提高效率.我们部署任务，首先要执行编译任务，可以通过串行
  22. //(parallel)来执行
  23. //串行任务 
  24. exports foo =series(task1,task2,task3)
  25. //并行任务
  26. exports bar = parallel(task1,task2,task3)

gulp的异步任务

  1. //=====================================第一种====================================
  2. exports.callback =done=>{
  3.  console.log('callback task')
  4.  done();
  5. }
  6. //错误回调 如果多个任务同时执行的时候错误优先的原则，如果执行错误回调，其他的任务都会暂停
  7. exports.callback_error =done=>{
  8.  console.log('callback task')
  9.   done(new Error('task failled'))
  10. }
  11. // ==================================第二种====================================
  12. //注意 Promise.resolve() 不用传入任何参数 因为gulp会忽略掉
  13. exports.promise =() =>{
  14.   console.log('promise task')
  15.   return Promise.resolve()
  16. }
  17. exports.promise_error =() =>{
  18.   console.log('promise task')
  19.   return Promise.reject(new Error('task failed'))   //后面的任务都会停止执行
  20. }
  22. // ===================================第三种==================================
  23. const timeout = time =>{
  24.   return new Promise(resolve =>{
  25.    setTimeout(resolve,time)
  26.   })
  27. }
  28. exports.async = async()= >{
  29.  await timeout(1000);
  30.   console.log('async task')
  31. }
  33. // ===============================第四种================================
  34. exports.stream =() =>{
  35.  const readStream =fs.createReadStream('package.json');
  36.   const writeStream =fs.createWriteStream('temp.txt');
  37.   readStream.pipe(writeStream)
  38.   return readStream
  39. }
  40. exports.stream =done =>{
  41.  const readStream =fs.createReadStream('package.json');
  42.   const writeStream =fs.createWriteStream('temp.txt');
  43.   readStream.pipe(writeStream)
  44.   readStream.on('end',()=>{
  45.    done()
  46.   })
  47. }

Gulp 构建过程的核心工作原理

  1. //这是node环境
  2. const fs =require('fs');
  3. const {Transform} =require('stream');
  5. export.default = () =>{
  6.  //文件读取流
  7.   const read =fs.createReadStream('normalize.css');
  8.   //文件的写入流
  9.   const write =fs.createWriteStream('normalize.min.css');
  10.   //文件转换流
  11.   const transform =new Transform({
  12.     transform:(chunk,encoding,callback)=>{
  13.     // 核心转换过程的实现
  14.     // chunk => 读取流中读取到的内容
  15.       const input = chunk.toString();
  16.       const output = input.replace(/\s+/g,"").replace(/\/\*.+?\*\//g,'')
  17.       callback(null,output)
  18.     }
  19.   })
  20.   //把读取出来的文件流导入写入文件流
  21.   read.pipe(transform) //转换
  22.       .pipe(write) //写入
  23.   return read
  24. }

Gulp 操作文件API

  1. const {src, dest} =require('gulp');
  2. const cleanCss =require('gulp-clean-css')
  3. const rename = require('gulp-rename')
  4. exports.default =()=>{
  5.   // src 可以理解成为读取流，后面接的是目标路劲
  6.   //return src('src/normalize.css')
  7.   //也可以使用通配符的方式
  8.   return src('src/*.css')
  9.   //同时构建过程就是文件的转换，可以安装一个插件，这个插件可以压缩css
  10.   // 代码的转换 yarn add gulp-clean-css --dev 的方式安装这个插件
  11.   .pipe(cleanCss())
  12.   //如果你还想就行其他转换 就是对css 就行压缩，并重命名以.min.css为文件名 但是需要 
  13.    //yarn add gulp remane --dev
  14.   .pipe(rename({{extname:'.min.css'}))
  15.   // pipe 导出 dest写入流 后面接的是目标目录
  16.          .pipe(dest('dest'))
  17. }

Gulp样式编译

  1. const {src,dest} =require('gulp');
  2. const sass =requrie('gulp-sass')
  3. const style =()=>{
  4.   //return src('src/assets/style/*.scss')  //这种会在dest目录下只生成scss文件 没有其他的目录结构
  5.   return src('src/assets/style/*.scss',{base:'src'})  //这种会还有asssets、style目录
  6.   //同时还有对文件进行转换 这里要安装yarn add gulp-sass --dev
  7.   .pipe(sass())
  8.   .pipe(dest('dist'))
  9. }
  11. module.exports= {
  12.  style
  13. }

gulp的脚步编译

  1. const {src,dest} =require('gulp');
  2. const sass =requrie('gulp-sass')
  3. const babel =require('gulp-babel')
  4. const style =()=>{
  5.   //return src('src/assets/style/*.scss')  //这种会在dest目录下只生成scss文件 没有其他的目录结构
  6.   return src('src/assets/style/*.scss',{base:'src'})  //这种会还有asssets、style目录
  7.   //同时还有对文件进行转换 这里要安装yarn add gulp-sass --dev
  8.   .pipe(sass())
  9.   .pipe(dest('dist'))
  10. }
  12. const script =()=>{
  14.   return src('src/assets/style/*.js',{base:'src'})  //
  15.   //同时还有对文件进行转换 这里要安装yarn add gulp-babel --dev
  16.   .pipe(babel({presets:['@babel/preset-env']})) //运行后 会报一个错误 cannot find module '@babel/core' 
  17.   // 需要手动安装这个模块 yarn add @babel/core @babel/preset-env --dev
  18.   .pipe(dest('dist'))
  19. }
  21. module.exports= {
  22.  style,
  23.   script
  24. }

gulp页面模板的编译

  1. const {src,dest,parallel} =require('gulp');
  2. const sass =requrie('gulp-sass')
  3. const babel =require('gulp-babel')
  4. const swig  =require('gulp-swig')
  6. const style =()=>{
  7.   //return src('src/assets/style/*.scss')  //这种会在dest目录下只生成scss文件 没有其他的目录结构
  8.   return src('src/assets/style/*.scss',{base:'src'})  //这种会还有asssets、style目录
  9.   //同时还有对文件进行转换 这里要安装yarn add gulp-sass --dev
  10.   .pipe(sass())
  11.   .pipe(dest('dist'))
  12. }
  14. const script =()=>{
  16.   return src('src/assets/style/*.js',{base:'src'})  //
  17.   //同时还有对文件进行转换 这里要安装yarn add gulp-babel --dev
  18.   .pipe(babel({presets:['@babel/preset-env']})) //运行后 会报一个错误 cannot find module '@babel/core' 
  19.   // 需要手动安装这个模块 yarn add @babel/core @babel/preset-env --dev
  20.   .pipe(dest('dist'))
  21. }
  22. const page =()=>{
  24.   return src('src/*.html',{base:'src'})  //
  25.   //同时还有对文件进行转换 这里要安装yarn add gulp-swig--dev
  26.      .pipe(swig())
  27.   .pipe(dest('dist'))
  28. }
  30. const compile = parallel(style,script,page)
  31. module.exports= {
  32.  compile
  33. }

图片和字体文件转换

  1. const {src,dest,parallel} =require('gulp');
  2. const sass =requrie('gulp-sass')
  3. const babel =require('gulp-babel')
  4. const swig  =require('gulp-swig')
  6. const style =()=>{
  7.   //return src('src/assets/style/*.scss')  //这种会在dest目录下只生成scss文件 没有其他的目录结构
  8.   return src('src/assets/style/*.scss',{base:'src'})  //这种会还有asssets、style目录
  9.   //同时还有对文件进行转换 这里要安装yarn add gulp-sass --dev
  10.   .pipe(sass())
  11.   .pipe(dest('dist'))
  12. }
  14. const script =()=>{
  16.   return src('src/assets/style/*.js',{base:'src'})  //
  17.   //同时还有对文件进行转换 这里要安装yarn add gulp-babel --dev
  18.   .pipe(babel({presets:['@babel/preset-env']})) //运行后 会报一个错误 cannot find module '@babel/core' 
  19.   // 需要手动安装这个模块 yarn add @babel/core @babel/preset-env --dev
  20.   .pipe(dest('dist'))
  21. }
  22. const page =()=>{
  24.   return src('src/*.html',{base:'src'})  //
  25.   //同时还有对文件进行转换 这里要安装yarn add gulp-swig--dev
  26.      .pipe(swig())
  27.   .pipe(dest('dist'))
  28. }
  29. const imgage =()=>{
  31.   return src('src/assets/image/**',{base:'src'})  //
  32.   //同时还有对文件进行转换 这里要安装yarn add gulp-imagemin--dev
  33.      .pipe(imagemin())
  34.   .pipe(dest('dest'))
  35. }
  36. //字体文件
  37. const font =()=>{
  39.   return src('src/assets/font/**',{base:'src'})  //
  40.   //同时还有对文件进行转换 这里要安装yarn add gulp-imagemin--dev
  41.      .pipe(imagemin())
  42.   .pipe(dest('dist'))
  43. }
  44. const compile = parallel(style,script,page，font，imgage)
  45. module.exports= {
  46.  compile,
  47. }

其他文件及其他文件的清除

  1. const {src,dest,parallel,series} =require('gulp');
  2. const sass =requrie('gulp-sass')
  3. const babel =require('gulp-babel')
  4. const swig  =require('gulp-swig')
  5. const del =require('del') //这里需要安装 del 可以在gulp 那里使用 yarn add del --dev
  7. const style =()=>{
  8.   //return src('src/assets/style/*.scss')  //这种会在dest目录下只生成scss文件 没有其他的目录结构
  9.   return src('src/assets/style/*.scss',{base:'src'})  //这种会还有asssets、style目录
  10.   //同时还有对文件进行转换 这里要安装yarn add gulp-sass --dev
  11.   .pipe(sass())
  12.   .pipe(dest('dist'))
  13. }
  15. const script =()=>{
  17.   return src('src/assets/style/*.js',{base:'src'})  //
  18.   //同时还有对文件进行转换 这里要安装yarn add gulp-babel --dev
  19.   .pipe(babel({presets:['@babel/preset-env']})) //运行后 会报一个错误 cannot find module '@babel/core' 
  20.   // 需要手动安装这个模块 yarn add @babel/core @babel/preset-env --dev
  21.   .pipe(dest('dist'))
  22. }
  23. const page =()=>{
  25.   return src('src/*.html',{base:'src'})  //
  26.   //同时还有对文件进行转换 这里要安装yarn add gulp-swig--dev
  27.      .pipe(swig())
  28.   .pipe(dest('dist'))
  29. }
  30. const imgage =()=>{
  32.   return src('src/assets/image/**',{base:'src'})  //
  33.   //同时还有对文件进行转换 这里要安装yarn add gulp-imagemin--dev
  34.      .pipe(imagemin())
  35.   .pipe(dest('dist'))
  36. }
  37. //字体文件
  38. const font =()=>{
  40.   return src('src/assets/font/**',{base:'src'})  //
  41.   //同时还有对文件进行转换 这里要安装yarn add gulp-imagemin--dev
  42.      .pipe(imagemin())
  43.   .pipe(dest('dist'))
  44. }
  45. // 其他的文件
  46. const extra =()=>{
  48.   return src('public/**',{base:'public'})  //
  51.   .pipe(dest('dist'))
  52. }
  53. const clean = ()=>{
  54.  return del(['dist'])
  55. }
  56. const compile = parallel(style,script,page,font,imgage);
  57. const build =series(clean,parallel(compile,extra))
  58. module.exports= {
  59.  compile,
  60.   build
  61. }

自动加载插件

  1. const {src,dest,parallel,series} =require('gulp');
  3. const del =require('del') //这里需要安装 del 可以在gulp 那里使用 yarn add del --dev
  4. const loadPlugins =require('gulp-load-plugins');
  5. const plugins =loadPlugins()
  7. const style =()=>{
  8.   //return src('src/assets/style/*.scss')  //这种会在dest目录下只生成scss文件 没有其他的目录结构
  9.   return src('src/assets/style/*.scss',{base:'src'})  //这种会还有asssets、style目录
  10.   //同时还有对文件进行转换 这里要安装yarn add gulp-sass --dev
  11.   .pipe(sass())
  12.   .pipe(dest('dist'))
  13. }
  15. const script =()=>{
  17.   return src('src/assets/style/*.js',{base:'src'})  //
  18.   //同时还有对文件进行转换 这里要安装yarn add gulp-babel --dev
  19.   .pipe(babel({presets:['@babel/preset-env']})) //运行后 会报一个错误 cannot find module '@babel/core' 
  20.   // 需要手动安装这个模块 yarn add @babel/core @babel/preset-env --dev
  21.   .pipe(dest('dist'))
  22. }
  23. const page =()=>{
  25.   return src('src/*.html',{base:'src'})  //
  26.   //同时还有对文件进行转换 这里要安装yarn add gulp-swig--dev
  27.      .pipe(plugins.swig())
  28.   .pipe(dest('dist'))
  29. }
  30. const imgage =()=>{
  32.   return src('src/assets/image/**',{base:'src'})  //
  33.   //同时还有对文件进行转换 这里要安装yarn add gulp-imagemin--dev
  34.      .pipe(plugins.imagemin())
  35.   .pipe(dest('dist'))
  36. }
  37. //字体文件
  38. const font =()=>{
  40.   return src('src/assets/font/**',{base:'src'})  //
  41.   //同时还有对文件进行转换 这里要安装yarn add gulp-imagemin--dev
  42.      .pipe(plugins.imagemin())
  43.   .pipe(dest('dist'))
  44. }
  45. // 其他的文件
  46. const extra =()=>{
  48.   return src('public/**',{base:'public'})  //
  51.   .pipe(dest('dist'))
  52. }
  53. const clean = ()=>{
  54.  return del(['dist'])
  55. }
  56. const compile = parallel(style,script,page,font,imgage);
  57. const build =series(clean,parallel(compile,extra))
  58. module.exports= {
  59.  compile,
  60.   build
  61. }

Gulp的热更新

  1. //1.首先 安装yarn add browser-sync --dev 这个模块
  2. const {src,dest,parallel,series} =require('gulp');
  4. //然后单独引入这个模块
  5. const browserSync =require('browser-sync')
  7. const del =require('del') 
  8. const loadPlugins =require('gulp-load-plugins');
  9. const plugins =loadPlugins();
  10. //创建一个开发服务器
  11. const bs = browserSync.create();
  13. const style =()=>{
  14.   //return src('src/assets/style/*.scss') 
  15.   return src('src/assets/style/*.scss',{base:'src'})  
  17.   .pipe(sass())
  18.   .pipe(dest('dist'))
  19. }
  21. const script =()=>{
  23.   return src('src/assets/style/*.js',{base:'src'})  //
  25.   .pipe(babel({presets:['@babel/preset-env']})) 
  27.   .pipe(dest('dist'))
  28. }
  29. const page =()=>{
  31.   return src('src/*.html',{base:'src'})  //
  33.      .pipe(plugins.swig())
  34.   .pipe(dest('dist'))
  35. }
  36. const imgage =()=>{
  38.   return src('src/assets/image/**',{base:'src'})  //
  40.      .pipe(plugins.imagemin())
  41.   .pipe(dest('dist'))
  42. }
  43. //字体文件
  44. const font =()=>{
  46.   return src('src/assets/font/**',{base:'src'})  
  48.      .pipe(plugins.imagemin())
  49.   .pipe(dest('dist'))
  50. }
  51. // 其他的文件
  52. const extra =()=>{
  54.   return src('public/**',{base:'public'})  //
  57.   .pipe(dest('dist'))
  58. }
  59. const clean = ()=>{
  60.  return del(['dist'])
  61. }
  62. const serve =() =>{
  63.  bs.init({
  64.    notify:false, // 关闭提示（xxxx is not connet）
  65.    port:2080,
  66.    open:false, //是否自动打开浏览器
  67.    files:'dist/**', //当dist 改变的时候页面自动改变
  68.    server:{
  69.      //baseDir 指的是网站的根目录
  70.      baseDir:'dist',
  71.      //routes这个优先级比baseDir还有高
  72.      routes:{
  73.       '_node/modules':'node_modules'
  74.      }
  76.    }
  77.  })
  78. }
  79. const compile = parallel(style,script,page,font,imgage);
  80. const build =series(clean,parallel(compile,extra))
  81. module.exports= {
  82.  compile,
  83.   serve，
  84.   build
  85. }

监听变化以及构建优化

  2. const {src,dest,parallel,series,watch} =require('gulp');
  5. const browserSync =require('browser-sync')
  7. const del =require('del') 
  8. const loadPlugins =require('gulp-load-plugins');
  9. const plugins =loadPlugins();
  11. const bs = browserSync.create();
  13. const style =()=>{
  14.   //return src('src/assets/style/*.scss') 
  15.   return src('src/assets/style/*.scss',{base:'src'})  
  17.   .pipe(sass())
  18.   .pipe(dest('dist'))
  19.   .pipe(bs.reload({stream:true}))
  20. }
  22. const script =()=>{
  24.   return src('src/assets/style/*.js',{base:'src'})  //
  26.   .pipe(babel({presets:['@babel/preset-env']})) 
  28.   .pipe(dest('dist'))
  29.   .pipe(bs.reload({stream:true}))
  30. }
  31. const page =()=>{
  33.   return src('src/*.html',{base:'src'})  //
  35.      .pipe(plugins.swig())
  36.   .pipe(dest('dist'))
  37.   .pipe(bs.reload({stream:true}))
  38. }
  39. const imgage =()=>{
  41.   return src('src/assets/image/**',{base:'src'})  //
  43.      .pipe(plugins.imagemin())
  44.   .pipe(dest('dist'))
  45. }
  46. //字体文件
  47. const font =()=>{
  49.   return src('src/assets/font/**',{base:'src'})  
  51.      .pipe(plugins.imagemin())
  52.   .pipe(dest('dist'))
  53. }
  54. // 其他的文件
  55. const extra =()=>{
  57.   return src('public/**',{base:'public'})  //
  60.   .pipe(dest('dist'))
  61. }
  62. const clean = ()=>{
  63.  return del(['dist'])
  64. }
  65. const serve =() =>{
  66.  watch('src/assets/style/*.scss',style)
  67.   watch('src/assets/style/*.js',script)
  68.   watch('src/*.html',page)
  69.   watch(['src/assets/image/**','src/assets/font/**','public/**',],bs.reload)
  70.   //watch('src/assets/image/**',imgage)
  71.   //watch('src/assets/font/**',font)
  72.    //watch('public/**',extra)
  73.  bs.init({
  74.    notify:false, 
  75.    port:2080,
  76.    open:false, 
  77.    //files:'dist/**', 
  78.    server:{
  80.      baseDir:['dist','src','public'],
  81.      routes:{
  82.       '_node/modules':'node_modules'
  83.      }
  85.    }
  86.  })
  87. }
  88. const compile = parallel(style,script,page);
  90. const build =series(clean,parallel(compile,font,imgage,extra))
  91. const develop =series(compile,serve)
  92. module.exports= {
  93.   clean,
  94.  compile,
  96.   serve，
  97.   develop
  98. }

useref文件引用处理

  1. //安装useref yarn add useref --dev
  2. const {src,dest,parallel,series,watch} =require('gulp');
  5. const browserSync =require('browser-sync')
  7. const del =require('del') 
  8. const loadPlugins =require('gulp-load-plugins');
  9. const plugins =loadPlugins();
  11. const bs = browserSync.create();
  13. const style =()=>{
  14.   //return src('src/assets/style/*.scss') 
  15.   return src('src/assets/style/*.scss',{base:'src'})  
  17.   .pipe(sass())
  18.   .pipe(dest('dist'))
  19.   .pipe(bs.reload({stream:true}))
  20. }
  22. const script =()=>{
  24.   return src('src/assets/style/*.js',{base:'src'})  //
  26.   .pipe(babel({presets:['@babel/preset-env']})) 
  28.   .pipe(dest('dist'))
  29.   .pipe(bs.reload({stream:true}))
  30. }
  31. const page =()=>{
  33.   return src('src/*.html',{base:'src'})  //
  35.      .pipe(plugins.swig())
  36.   .pipe(dest('dist'))
  37.   .pipe(bs.reload({stream:true}))
  38. }
  39. const imgage =()=>{
  41.   return src('src/assets/image/**',{base:'src'})  //
  43.      .pipe(plugins.imagemin())
  44.   .pipe(dest('dist'))
  45. }
  46. //字体文件
  47. const font =()=>{
  49.   return src('src/assets/font/**',{base:'src'})  
  51.      .pipe(plugins.imagemin())
  52.   .pipe(dest('dist'))
  53. }
  54. // 其他的文件
  55. const extra =()=>{
  57.   return src('public/**',{base:'public'})  //
  60.   .pipe(dest('dist'))
  61. }
  62. const clean = ()=>{
  63.  return del(['dist'])
  64. }
  65. const serve =() =>{
  66.  watch('src/assets/style/*.scss',style)
  67.   watch('src/assets/style/*.js',script)
  68.   watch('src/*.html',page)
  69.   watch(['src/assets/image/**','src/assets/font/**','public/**',],bs.reload)
  70.   //watch('src/assets/image/**',imgage)
  71.   //watch('src/assets/font/**',font)
  72.    //watch('public/**',extra)
  73.  bs.init({
  74.    notify:false, 
  75.    port:2080,
  76.    open:false, 
  77.    //files:'dist/**', 
  78.    server:{
  80.      baseDir:['dist','src','public'],
  81.      routes:{
  82.       '_node/modules':'node_modules'
  83.      }
  85.    }
  86.  })
  87. }
  88. const useref=() =>{
  89.   return src('dist/*.html',{base:'dist'})
  91.          .pipe(plugins.useref({searchPath:['dist','.']}))
  92.          // 压缩css、js 、html 这需要yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
  93.          //对三种不同文件不同的操作 需要 yarn add gulp-if --dev
  94.          .pipe(plugins.if(/\.js$/,plugins.uglify()))
  95.          //压缩css
  96.          .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
  97.           //压缩html
  98.          .pipe(plugins.if(/\.html$/,plugins.htmlmin({collapseWhitespace:true,minifyCSS:true,minifyJS:true})))
  99.          .pipe(dest('release'))
  100. }
  101. const compile = parallel(style,script,page);
  103. const build =series(clean,parallel(compile,font,imgage,extra))
  104. const develop =series(compile,serve)
  105. module.exports= {
  106.   clean,
  107.  compile,
  109.   serve，
  110.   develop
  111. }

重新规划构建过程

  1. //安装useref yarn add useref --dev
  2. const {src,dest,parallel,series,watch} =require('gulp');
  5. const browserSync =require('browser-sync')
  7. const del =require('del') 
  8. const loadPlugins =require('gulp-load-plugins');
  9. const plugins =loadPlugins();
  11. const bs = browserSync.create();
  13. const style =()=>{
  14.   //return src('src/assets/style/*.scss') 
  15.   return src('src/assets/style/*.scss',{base:'src'})  
  17.   .pipe(sass())
  18.   .pipe(dest('temp'))
  19.   .pipe(bs.reload({stream:true}))
  20. }
  22. const script =()=>{
  24.   return src('src/assets/style/*.js',{base:'src'})  //
  26.   .pipe(babel({presets:['@babel/preset-env']})) 
  28.   .pipe(dest('temp'))
  29.   .pipe(bs.reload({stream:true}))
  30. }
  31. const page =()=>{
  33.   return src('src/*.html',{base:'src'})  //
  35.      .pipe(plugins.swig())
  36.   .pipe(dest('temp'))
  37.   .pipe(bs.reload({stream:true}))
  38. }
  39. const imgage =()=>{
  41.   return src('src/assets/image/**',{base:'src'})  //
  43.      .pipe(plugins.imagemin())
  44.   .pipe(dest('dist'))
  45. }
  46. //字体文件
  47. const font =()=>{
  49.   return src('src/assets/font/**',{base:'src'})  
  51.      .pipe(plugins.imagemin())
  52.   .pipe(dest('dist'))
  53. }
  54. // 其他的文件
  55. const extra =()=>{
  57.   return src('public/**',{base:'public'})  //
  60.   .pipe(dest('dist'))
  61. }
  62. const clean = ()=>{
  63.  return del(['dist','temp'])
  64. }
  65. const serve =() =>{
  66.  watch('src/assets/style/*.scss',style)
  67.   watch('src/assets/style/*.js',script)
  68.   watch('src/*.html',page)
  69.   watch(['src/assets/image/**','src/assets/font/**','public/**',],bs.reload)
  70.   //watch('src/assets/image/**',imgage)
  71.   //watch('src/assets/font/**',font)
  72.    //watch('public/**',extra)
  73.  bs.init({
  74.    notify:false, 
  75.    port:2080,
  76.    open:false, 
  77.    //files:'dist/**', 
  78.    server:{
  80.      baseDir:['temp','src','public'],
  81.      routes:{
  82.       '_node/modules':'node_modules'
  83.      }
  85.    }
  86.  })
  87. }
  88. const useref=() =>{
  89.   return src('temp/*.html',{base:'dist'})
  91.          .pipe(plugins.useref({searchPath:['dist','.']}))
  92.          // 压缩css、js 、html 这需要yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
  93.          //对三种不同文件不同的操作 需要 yarn add gulp-if --dev
  94.          .pipe(plugins.if(/\.js$/,plugins.uglify()))
  95.          //压缩css
  96.          .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
  97.           //压缩html
  98.          .pipe(plugins.if(/\.html$/,plugins.htmlmin({collapseWhitespace:true,minifyCSS:true,minifyJS:true})))
  99.          .pipe(dest('dist'))
  100. }
  101. const compile = parallel(style,script,page);
  103. const build =series(clean,parallel(series(compile,useref),font,imgage,extra))
  104. const develop =series(compile,serve)
  105. module.exports= {
  106.   clean,
  107.  compile,
  109.   serve，
  110.   develop
  111. }

gulp的补充

  1. //安装useref yarn add useref --dev
  2. const {src,dest,parallel,series,watch} =require('gulp');
  5. const browserSync =require('browser-sync')
  7. const del =require('del') 
  8. const loadPlugins =require('gulp-load-plugins');
  9. const plugins =loadPlugins();
  11. const bs = browserSync.create();
  13. const style =()=>{
  14.   //return src('src/assets/style/*.scss') 
  15.   return src('src/assets/style/*.scss',{base:'src'})  
  17.   .pipe(sass())
  18.   .pipe(dest('temp'))
  19.   .pipe(bs.reload({stream:true}))
  20. }
  22. const script =()=>{
  24.   return src('src/assets/style/*.js',{base:'src'})  //
  26.   .pipe(babel({presets:['@babel/preset-env']})) 
  28.   .pipe(dest('temp'))
  29.   .pipe(bs.reload({stream:true}))
  30. }
  31. const page =()=>{
  33.   return src('src/*.html',{base:'src'})  //
  35.      .pipe(plugins.swig())
  36.   .pipe(dest('temp'))
  37.   .pipe(bs.reload({stream:true}))
  38. }
  39. const imgage =()=>{
  41.   return src('src/assets/image/**',{base:'src'})  //
  43.      .pipe(plugins.imagemin())
  44.   .pipe(dest('dist'))
  45. }
  46. //字体文件
  47. const font =()=>{
  49.   return src('src/assets/font/**',{base:'src'})  
  51.      .pipe(plugins.imagemin())
  52.   .pipe(dest('dist'))
  53. }
  54. // 其他的文件
  55. const extra =()=>{
  57.   return src('public/**',{base:'public'})  //
  60.   .pipe(dest('dist'))
  61. }
  62. const clean = ()=>{
  63.  return del(['dist','temp'])
  64. }
  65. const serve =() =>{
  66.  watch('src/assets/style/*.scss',style)
  67.   watch('src/assets/style/*.js',script)
  68.   watch('src/*.html',page)
  69.   watch(['src/assets/image/**','src/assets/font/**','public/**',],bs.reload)
  70.   //watch('src/assets/image/**',imgage)
  71.   //watch('src/assets/font/**',font)
  72.    //watch('public/**',extra)
  73.  bs.init({
  74.    notify:false, 
  75.    port:2080,
  76.    open:false, 
  77.    //files:'dist/**', 
  78.    server:{
  80.      baseDir:['temp','src','public'],
  81.      routes:{
  82.       '_node/modules':'node_modules'
  83.      }
  85.    }
  86.  })
  87. }
  88. const useref=() =>{
  89.   return src('temp/*.html',{base:'dist'})
  91.          .pipe(plugins.useref({searchPath:['dist','.']}))
  92.          // 压缩css、js 、html 这需要yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
  93.          //对三种不同文件不同的操作 需要 yarn add gulp-if --dev
  94.          .pipe(plugins.if(/\.js$/,plugins.uglify()))
  95.          //压缩css
  96.          .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
  97.           //压缩html
  98.          .pipe(plugins.if(/\.html$/,plugins.htmlmin({collapseWhitespace:true,minifyCSS:true,minifyJS:true})))
  99.          .pipe(dest('dist'))
  100. }
  101. const compile = parallel(style,script,page);
  103. const build =series(clean,parallel(series(compile,useref),font,imgage,extra))
  104. const develop =series(compile,serve)
  105. module.exports= {
  106.   clean,
  107.  build，
  108.   develop
  109. }

封装工作流

  1. //安装useref yarn add useref --dev
  2. const {src,dest,parallel,series,watch} =require('gulp');
  5. const browserSync =require('browser-sync')
  7. const del =require('del') 
  8. const loadPlugins =require('gulp-load-plugins');
  9. const plugins =loadPlugins();
  11. const bs = browserSync.create();
  12. const cwd = process.cwd();
  13. let config ={
  14.   build:{
  15.   src:'scr',
  16.   dist:'dist',
  17.   temp:'temp',
  18.   public:'public',
  19.   paths:{
  20.    styles:'assets/style/*.scss',
  21.      script:'assets/style/*.js',
  22.      page:'*.html',
  23.      image:'assets/image/**',
  24.      font:'assets/font/**',
  25.   }
  27.   }
  28. }
  29. try{
  30.  const loadConfig =require(`${cwd}\pages.config.js`)
  31.  congif =Object.assign({},config,loadConfig)
  32. }
  34. const style =()=>{
  35.   //return src('src/assets/style/*.scss') 
  36.   return src(config.build.paths.styles,{base:config.bulid.src,cwd:config.bulid.src})  
  38.   .pipe(sass({outputStyle:'expanded'}))
  39.   .pipe(dest(config.build.temp))
  40.   .pipe(bs.reload({stream:true}))
  41. }
  43. const script =()=>{
  45.   return src(config.build.paths.script,{base:config.bulid.src,cwd:config.bulid.src})  
  47.   .pipe(babel({presets:[require('@babel/preset-env')]})) 
  49.   .pipe(dest(config.build.temp))
  50.   .pipe(bs.reload({stream:true}))
  51. }
  52. const page =()=>{
  54.   return src(config.build.paths.page,{base:config.bulid.src,cwd:config.bulid.src})   //
  56.      .pipe(plugins.swig({data:config.data}))
  57.   .pipe(dest(config.build.temp))
  58.   .pipe(bs.reload({stream:true}))
  59. }
  60. const imgage =()=>{
  62.   return src(config.build.paths.imgage,{base:config.bulid.src,cwd:config.bulid.src})  //
  64.      .pipe(plugins.imagemin())
  65.   .pipe(dest(config.build.dist))
  66. }
  67. //字体文件
  68. const font =()=>{
  70.   return src(config.build.paths.font,{base:config.bulid.src,cwd:config.bulid.src})
  72.      .pipe(plugins.imagemin())
  73.   .pipe(dest(config.build.dist))
  74. }
  75. // 其他的文件
  76. const extra =()=>{
  78.   return src('**',{base:config.bulid.public,cwd:config.bulid.public})  //
  81.   .pipe(dest(config.build.dist))
  82. }
  83. const clean = ()=>{
  84.  return del([config.bulid.dist,config.bulid.temp])
  85. }
  86. const serve =() =>{
  87.  watch(config.build.paths.styles,{cwd:config.bulid.src},style)
  88.   watch(config.build.paths.script,{cwd:config.bulid.src},script)
  89.   watch(config.build.paths.page,{cwd:config.bulid.src},page)
  90.   watch([config.build.paths.image,config.build.paths.font],        {cwd:config.build.src},bs.reload)
  91.   watch('**',{cwd:config.build.public},bs.reload)
  92.   //watch('src/assets/image/**',imgage)
  93.   //watch('src/assets/font/**',font)
  94.    //watch('public/**',extra)
  95.  bs.init({
  96.    notify:false, 
  97.    port:2080,
  98.    open:false, 
  99.    //files:'dist/**', 
  100.    server:{
  102.      baseDir:[config.build.temp,config.build.src,config.build.public],
  103.      routes:{
  104.       '_node/modules':'node_modules'
  105.      }
  107.    }
  108.  })
  109. }
  110. const useref=() =>{
  111.   return src(config.build.paths.page,{base:config.build.temp,cwd:config.bulid.src})
  113.          .pipe(plugins.useref({searchPath:[config.build.temp,'.']}))
  114.          // 压缩css、js 、html 这需要yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
  115.          //对三种不同文件不同的操作 需要 yarn add gulp-if --dev
  116.          .pipe(plugins.if(/\.js$/,plugins.uglify()))
  117.          //压缩css
  118.          .pipe(plugins.if(/\.css$/,plugins.cleanCss()))
  119.           //压缩html
  120.          .pipe(plugins.if(/\.html$/,plugins.htmlmin({collapseWhitespace:true,minifyCSS:true,minifyJS:true})))
  121.          .pipe(dest(config.build.dist))
  122. }
  123. const compile = parallel(style,script,page);
  125. const build =series(clean,parallel(series(compile,useref),font,imgage,extra))
  126. const develop =series(compile,serve)
  127. module.exports= {
  128.   clean,
  129.  build，
  130.   develop
  131. }