1、三个需要在npm中找相应的教程 gulp-scss、gulp-swig、gulp-babel
2、具体的相关代码如下
var gulp = require(‘gulp‘); var swig = require(‘gulp-swig‘); var babel = require(‘gulp-babel‘); var scss = require("gulp-scss"); gulp.task("scss", function () { gulp.src( "src/**/*.scss") .pipe(scss()) .pipe(gulp.dest("dist/css")) }); gulp.task(‘babel‘, function () { gulp.src(‘src/**/*.js‘) .pipe(babel({ presets: [‘env‘] })) .pipe(gulp.dest(‘dist/js‘)) }); gulp.task(‘swig‘, function () { gulp.src([‘src/**/*.html‘,‘!src/components/**/*.html‘,‘!./src/layout.html‘]) .pipe(swig({ defaults: { cache: false } })) .pipe(gulp.dest(‘./dist/‘)); }); gulp.task(‘default‘, function () { gulp.watch([‘src/**/*.js‘], [‘babel‘]); gulp.watch(‘src/**/*.scss‘, [‘scss‘]); gulp.watch([‘src/**/*.html‘,‘!src/components/**/*.html‘], [‘swig‘]); });
3、swig的参考文档 https://www.jianshu.com/p/f0bffc42c1ce
4、移动端的layout.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> // 动态设置rem function setRem(){ var html = document.documentElement; var width = html.getBoundingClientRect().width; var fontSize = width / 30;//默认是1080 html.style.fontSize = fontSize+‘px‘;//36px,需要注意的是chrome最小的字体是12px } setRem(); // 当切换屏幕方向的时候，重置 // 小心浏览器在切换屏幕方向有个500毫秒延迟 window.addEventListener(‘orientationchange‘,function(){ setTimeout(function() { setRem(); }, 600); },false); </script> <title>{% block title %}{% endblock %}</title> {% block head %}{% endblock %} </head> <body> {% block content %}{% endblock %} </body> </html>
5:index.html 的事例
{% extends ‘./layout.html‘ %}
{% block title %} index {% endblock %}
{% block content %}
<!-- 头部组件 -->
{% include "./components/header/header.html" %}
<div>
<h1>hello swig</h1>
<div>
{% endblock %}
