提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

Gulp 自动化构建案例

自动化 代码
2023-04-18 14:44:40 时间

前言

我们要通过一个实际案例，去实现一个自动化的网页构建的自动化工作流 构建用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'
    }
  })
}
复制代码

项目地址： gitee.com/liuyinghao1…

相关文章