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'
}
})
}
复制代码项目地址： gitee.com/liuyinghao1…
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。