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 }

终端编译一下