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