Gulp自动化构建案例---页面模板编译

1、安装模板引擎

yarn add gulp-swig --dev

2、载入插件

const swig = require('gulp-swig');

3、使用

.pipe(swig(data))是.pipe(swig(data:data))的简写

const {src,dest} = require('gulp');
//载入swig插件
const swig = require('gulp-swig');
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()
}
//src/*.html标识src根目录下的子html文件；src/**.html表示src下所有的html文件，包括子文件夹下的html文件
//base:'src'，转义文件时保留src路径
const page = () => {
  return src('src/*.html',{base:'src'})
  .pipe(swig(data))
  .pipe(dest('dist'))
}

module.exports = {
  page
}

4、一般情况下，css、js、页面都是同时转换的，所以需要组合转换

载入parallel插件

const {src,dest,parallel} = require('gulp');

使用parallel

//compile组合任务
const compile = parallel(style,script,page);

完整代码

const {src,dest,parallel} = require('gulp');
//载入sass转换插件
const sass = require('gulp-sass');
//载入babel插件
//babel能将ES的所有新特性都可以转换
const babel = require('gulp-babel');
//载入swig插件
const swig = require('gulp-swig');
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()
}

//base:'src'，转义文件时保留src路径
//outputStyle:'expanded，将样式的大括号展开
const style = () =>{
  return src('src/assets/styles/*scss',{base:'src'})
  .pipe(sass({outputStyle:'expanded'}))
  .pipe(dest('dist'))
}

//base:'src'，转义文件时保留src路径
//@babel/preset-env，所有特性整体打包，可以选择自己需要的部分打包
const script = () =>{
  return src('src/assets/scripts/*.js',{base:'src'})
  .pipe(babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}

//src/*.html标识src根目录下的子html文件；src/**.html表示src下所有的html文件，包括子文件夹下的html文件
const page = () => {
  return src('src/*.html',{base:'src'})
  .pipe(swig(data))
  .pipe(dest('dist'))
}
//compile组合任务
const compile = parallel(style,script,page);
module.exports = {
  compile
}

执行compile

yarn gulp compile