gulp自动化构建工具下的swigbabelsass

Posted 2020-10-25 qingtian9581

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了gulp自动化构建工具下的swigbabelsass相关的知识，希望对你有一定的参考价值。

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 %}

以上是关于gulp自动化构建工具下的swigbabelsass的主要内容，如果未能解决你的问题，请参考以下文章