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

667 阅读2分钟

前言: 最近两年大部分项目都是写SPA单页面应用,突然想用Bootstrap, ES6, Sass, Less写一个静态页面项目,竟然一下想不到这样的前端工程化开发环境如何搭建实现,于是实践后就有了这篇文章.

需求:监听html, css, js, img 等文件的变化,实现浏览器自动刷新,避免像很久以前那样按F5刷新键.(其实这个需求用Parcel可以很快的实现,后面再写一篇Parcel实现的)

Gulp

Gulp中文官网的描述是:用自动化构建工具增强你的工作流程!

新版的官网看着逼格更高一点.

我的目录结构

|——build
    |——css
    |——js
    |——images
    |——*.html
|——src
    |——html
    |——sass
    |——js
    |——images
|——gulpfile.js
|——package.json

配置步骤

全局安装 gulp-cli 命令行工具

npm install gulp-cli -g

新建工程目录 static,在根目录创建package.json

npm init

安装 gulp,作为开发时依赖项

npm install --save-dev gulp

创建 gulpfile.js 文件

touch  gulpfile.js

具体需求

  • 将src/html文件夹里的文件复制到 build根目录下
  • 将src/sass文件下的*.scss文件预编译到 build/css 文件夹下
  • 将src/js 文件下的*.js 文件预编译到 build/js 文件夹下
  • 将src/images 文件下的图片文件预编译到 build/images 文件夹下
  • 监听html, css, js, images 等文件的变化, 实时刷新浏览器

gulpfile.js 配置文件

const { src, dest, parallel,series, watch } = require('gulp');
const sass = require('gulp-sass');
const less = require('gulp-less');
const image = require('gulp-imagemin');
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'))
}

// 图片处理
function img() {
  return src('src/images/*')
    // .pipe(image())
    .pipe(dest('build/images'));
}

// 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/imgs/*", series(img, reload));
  watch("src/sass/*.scss", series(css, reload));
  watch("src/js/*.js", series(js, reload));
  watch("src/html/*.html", series(copy, reload));
  done();
}

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