前言: 最近两年大部分项目都是写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);