Gulp 搭建前端非SPA 项目， 修改文件浏览器自动刷新

起因：需要搭建一个自动打包处理 sass / js （es6），自动监听文件变化时浏览器自动刷新的开发环境

项目目录

project

build

-css

-js

*.html

src

-html

-sass

-js

先放 gulpfile.js 文件，其他的详细配置稍后再介绍

const { src, dest, parallel,series, watch } = require('gulp');
const sass = require('gulp-sass');
const less = require('gulp-less');
const minifyCSS = require('gulp-csso');
const concat = require('gulp-concat');
const babel = require('gulp-babel');
const autoprefixer = require('gulp-autoprefixer')
const browserSync = require('browser-sync').create()

sass.compiler = require('node-sass');

// Static server
async function serve() {
  await browserSync.init(
    {
      server: {
        baseDir: './build',
      }
    }
  )
}

// html 复制
function copy() {
  return src('src/html/*.html')
    .pipe(dest('build'))
}

// css 编译
function css() {
  return src(['src/sass/*.scss', 'node_modules/bootstrap/scss/bootstrap.scss'])
    .pipe(sass())
    // .pipe(src('src/less/*.less'))
    // .pipe(less())
    .pipe(autoprefixer({ overrideBrowserslist: ['last 8 versions'] }))
    .pipe(minifyCSS())
    .pipe(dest('build/css'))
}

// js 编译
function js() {
  return src(['src/js/*.js'], { sourcemaps: true })
    .pipe(babel({
      presets: ["@babel/env"]
    }))
    .pipe(concat('app.min.js'))
    .pipe(dest('build/js', { sourcemaps: true }))
}

// 浏览器自定刷洗
function reload(done) {
  browserSync.reload()
  done()
}

// 监听启动
function watcher(done) {
  watch("src/scss/*.scss", series(css, reload));
  watch("src/js/*.js", series(js, reload));
  watch("src/html/*.html", series(copy, reload));
  done();
}

exports.js = js;
exports.css = css;
exports.copy = copy;
exports.default = parallel(js, css, copy, serve, watcher);