Gulp 自动化构建案例
前言
我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用demo：gitee.com/liuyinghao1…
本次目标
es6 转换成 es5
图片压缩
scss编译
模板html编译
安装gulp
yarn add gulp --dev 复制代码
安装完毕之后我们就开始进入正题
样式编译
首先我们使用gulp进行scss的样式编译 gulpfile.js
const { src, dest } = require('gulp') const style = () => { return src('src/assets/styles/*.scss') .pipe(dest('dist')) } module.exports = { style } 复制代码运行测试：
yarn gulp style 复制代码
但是这样输出完毕，却丢失了我们的目录结构，该怎么解决好呢？
我们可以通过 src方法的第二个参数{ base: 'src' }如此进行解决， 我们这样进行改造
const style = () => { return src('src/assets/styles/*.scss', {base: 'src'}) .pipe(dest('dist')) } 复制代码如此之后会依照src/assets/styles/的基准输出assets/stylesxxx.scss文件
当然我们还需要进行scss的转换，安装
yarn add sass gulp-sass --save-dev 复制代码
然后我们再进行一下改造 gulpfile.js
const { src, dest } = require('gulp') const sass = require('gulp-sass')(require('sass')); // 5.0版本的gulp const style = () => { return src('src/assets/styles/*.scss', {base: 'src'}) .pipe(sass()) .pipe(dest('dist')) } module.exports = { style } 复制代码脚本编译
在进行编写之前我们需要先引入：
yarn add gulp-babel --dev yarn add @babel/core @babel/preset-env --dev 复制代码
然后gulpfile.js进行一些添加操作
const babel = require('gulp-babel') const script = () => { return src('src/assets/scripts/*.js', {base: 'src'}) .pipe(babel({ presets: ['@babel/preset-env']})) .pipe(dest('dist')) } module.exports = { script } 复制代码模板文件的编译
首先我们先进性组件的安装：
yarn add gulp-swig --dev 复制代码
然后实现的代码：
const swig = require('gulp-swig') const page = () => { // 所有子目录下面的html文件 // return src('src/**/.*/.html', {base: 'src'}) return src('src/*.html', {base: 'src'}) .pipe(swig()) } module.exports = { script } 复制代码但是有几个小点：模板引擎的数据还没有渲染上去呢 这里我们使用swig的data参数进行
const data = { menus: [ { name: 'Home', icon: 'aperture', link: 'index.html' }, { name: 'Features', link: 'features.html' }, { name: 'About', link: 'about.html' }, { name: 'Contact', link: '#', children: [ { name: 'Twitter', link: 'https://twitter.com/w_zce' }, { name: 'About', link: 'https://weibo.com/zceme' }, { name: 'divider' }, { name: 'About', link: 'https://github.com/zce' } ] } ], pkg: require('./package.json'), date: new Date() } ... const page = () => { // 所有子目录下面的html文件 // return src('src/**/.*/.html', {base: 'src'}) return src('src/*.html', {base: 'src'}) .pipe(swig({data})) } ... 复制代码这样我们就可以把我们在网页中写死的数据放入，就可以进行一些模板的渲染了
图片和字体压缩
这里我们要进行图片的压缩：
yarn add gulp-imagemin --dev // 这里有一个坑点 我们要用7.1.0版本的imagemin 复制代码
文件修改
const imagemin = require('gulp-imagemin') const image = () => { return src('src/assets/images/**', { base: 'src' }) .pipe(plugins.imagemin()) .pipe(dest('dist')) } const font = () => { return src('src/assets/fonts/**', { base: 'src' }) .pipe(plugins.imagemin()) .pipe(dest('dist')) } module.exports = { image, font } 复制代码创建组合任务
这里我们要把样式、脚本、模板的编译等等的进行组合，首先我们先安装一个依赖
yarn add gulp-load-plugins --dev 复制代码
主要通过gulp的parallel
const { src, dest, parallel } = require('gulp') ... const compile = parallel(style, script, page, image, font) module.exports = { compile } 复制代码文件清除
做完这些，我们还需要做一些比较人性化的工作，我们每次打包的时候的文件删除，总不能每次都我们进行手动删除吧？
yarn add del --dev 复制代码
文件修改
const del = require('del') const clean = () => { return del(['dist', 'temp']) } 复制代码这里注意，del是一个异步任务，所以我们需要series来进行调用 示例：
const build = series(clean, parallel( compile, extra )) 复制代码
自动加载插件
随着我们的插件引入越来越多，我们的代码随着也需要引入许多的依赖，这样对我们的维护来说就会变的复杂，好在 gulp给我们提供了gulp-load-plugins的依赖包
yarn add gulp-load-plugins --dev 复制代码
然后
// gulp组件引入 const loadPlugins = require('gulp-load-plugins') const plugins = loadPlugins() 复制代码这里我们注意一些点
// 样式编译 const sass = require('gulp-sass')(require('sass')); // 脚本编译 const babel = require('gulp-babel') // 模板 const swig = require('gulp-swig') // 图片、svg压缩 const imagemin = require('gulp-imagemin'); 复制代码这样的引用我们都可以使用plugins.xxx进行使用，像sass我们就可以直接plugins.sass(),plugins.imagemin()等等
例如 gulp-sass就是plugins.sass，如果是gulp-sass-sass这种类型，就是plugins.sassSass驼峰式
e，gulp-sass是5.0版本的话，要把sass挂载到plugins上
const plugins = loadPlugins({ postRequireTransforms: { sass: () => { return sass } } }) 复制代码热更新
不多比比直接上
npm i browser-sync --dev 复制代码
gulpfile.js
const browserSync = require('browser-sync') const bs = browserSync.create() ... const serve = () => { bs.init({ server: { baseDir: 'dist' } }) }
作者：是洋柿子啊
链接：https://juejin.cn/post/7038948532820115463
伪原创工具 SEO网站优化 https://www.237it.com/