Gulp自动化构建案例---监视变化以及构建优化

1、使用watch监视开发过程中的变化

const {src,dest,parallel,series,watch} = require('gulp');

2、在serve任务中使用

//serve任务
//notify：页面右上角browserSync的小提示，开着有时候会影响页面调试
//port：端口号，默认3030,，可以自己修改
//routes将node_module路径下的链接自动映射到站点下
//serve执行默认自动打开浏览器，关闭默认方式用open
//files:src浏览器即时更新
const serve = () => {
  //监视样式文件
  watch('src/assets/styles/*scss',style);
  //监视脚本文件
  watch('src/assets/scripts/*.js',script);
  //监视页面文件
  watch('src/*.html',page);
  //监视图片文件
  watch('src/assets/images/**',img);
  //监视字体文件
  watch('src/assets/font/**',font);
  //监听额外任务文件
  watch('public/**',extra);
  //监视构建后的文件
  bs.init({
    notify:false,
    port:2080,
    //open:false,
    files:'dist/**',
    server:{
      baseDir:'dist',
      routes:{
        '/node_module':'node_modules'
      }
    }
  })
}

3、优化构建

//serve任务
//notify：页面右上角browserSync的小提示，开着有时候会影响页面调试
//port：端口号，默认3030,，可以自己修改
//routes将node_module路径下的链接自动映射到站点下
//serve执行默认自动打开浏览器，关闭默认方式用open
//files:src浏览器即时更新
const serve = () => {
  //监视样式文件
  watch('src/assets/styles/*scss',style);
  //监视脚本文件
  watch('src/assets/scripts/*.js',script);
  //监视页面文件
  watch('src/*.html',page);
  // //监视图片文件
  // watch('src/assets/images/**',img);
  // //监视字体文件
  // watch('src/assets/font/**',font);
  // //监听额外任务文件
  // watch('public/**',extra);
  watch([
    'src/assets/images/**',
    'src/assets/font/**',
    'public/**'
  ],bs.reload)
  //监视构建后的文件
  bs.init({
    notify:false,
    port:2080,
    //open:false,
    files:'dist/**',
    server:{
      baseDir:['dist','src','public'],
      routes:{
        '/node_module':'node_modules'
      }
    }
  })
}

组合任务

//优化后
const compile = parallel(style,script,page);
//上线前的操作
const build = series(clean,parallel(compile,Image,font,extra));
const develop = series(compile,serve)
module.exports = {
  build,
  serve,
  develop
}