gulp页面模板编译

首先要安装gulp

yarn add gulp --dev

根据需要安装的一些gulp的常用插件

压缩css代码的转换流插件

yarn add gulp-clean-css --dev

babel的插件

yarn add gulp-babel @babel/core @babel/preset-env --dev

模板引擎插件

yarn add gulp-rename --dev

在根目录下面创建一个gulpfile.js的文件，代码如下

const {src,dest,parallel}=require('gulp')
const sass=require('gulp-sass')
const babel=require('gulp-babel')
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()
  }
const style=()=>{
    // return src('src/assest/styles/*.scss',{base:'src'})
    return src('src/assets/styles/*.scss', { base: 'src' })
    .pipe(sass({outputStyle:'expanded'}))
    .pipe(dest('dist'))
}
const script=()=>{
    return src('src/assets/scripts/*.js',{base:'src'})
    .pipe(babel({presets:['@babel/preset-env']}))
    .pipe(dest('dist'))
}
const page=()=>{
    return src('src/*.html',{base:'src'})
    .pipe(swig(data))
    .pipe(dest('dist'))
}

const compile=parallel(style,script,page)
module.exports={
    // style,
    // script,
    // page
    compile
}

终端编译一下