gulp自动化构建工具下的swig、babel、sass

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‘]);
});

<!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>

{% extends ‘./layout.html‘ %}
{% block title %} index {% endblock %}

{% block content %}
<!-- 头部组件 -->
    {% include "./components/header/header.html" %}
    <div>
            <h1>hello swig</h1>
     <div>
{% endblock %}