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 %}
原文地址：https://www.cnblogs.com/qingtian9581/p/8487182.html
时间： 2024-10-09 22:46:30