Su-tankuang NPM

//js


const { src, dest, parallel, watch } = require('gulp');
const minify = require('gulp-html-minify');
const cleanCss = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const babel = require('gulp-babel');
const webserver = require('gulp-webserver');
const rename = require('gulp-rename');

function bulidhtml() {
    return src('src/*.html')
        .pipe(minify())
        .pipe(dest('dist'))
}

function bulidscss() {
    return src('src/scss/*.scss')
        .pipe(sass())
        .pipe(cleanCss())
        .pipe(dest('dist/css'))
}

function bulidjs() {
    return src('src/js/*.js')
        .pipe(dest('dist/js'))
        .pipe(rename((path) => {
            path.basename += '.min'
        }))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(dest('dist/js'))
}

function auto() {
    watch('src/*.html', parallel(bulidhtml))
    watch('src/scss/*.scss', parallel(bulidscss))
    watch('src/js/*.js', parallel(bulidjs))
}

function server() {
    src('dist')
        .pipe(webserver({
            middleware(req, res, next) {
                open: true;
                next();
            }
        }))
}
module.exports = {
    bulidhtml,
    bulidscss,
    bulidjs,
    auto,
    server,
    default: parallel(auto, server, bulidhtml, bulidscss, bulidjs)
}


//index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>Document</title>
</head>

<body>
    <button class="popout">弹框</button>
    <div class="dialog">
        <input type="text" class="search">
        <button class="affrim">确认</button>
        <button class="cancel">取消</button>
    </div>
    <script src="./js/index.js"></script>
</body>

</html>

//index.js
const $ = (selector, parent) => {
    parent = parent || document;
    return typeof selector === 'string' ? parent.querySelector(selector) : selector;
}
class Dialog {
    constructor(opt) {
        Object.assign(this, {}, opt);
        this.initFn();
    }
    initFn() {
        this.popout.addEventListener('click', () => {
            this.dialog.style.display = 'block';
        })
        this.cancel.addEventListener('click', () => {
            this.dialog.remove();
        })
        this.affrim.addEventListener('click', () => {
            if (this.search.value !== '') {
                location.href = 'home.html';
                localStorage.setItem('data', this.search.value);
            }
        })
    }
}
new Dialog({
    search: $('.search'),
    popout: $('.popout'),
    affrim: $('.affrim'),
    cancel: $('.cancel'),
    dialog: $('.dialog')
});

//home.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./js/home.js"></script>
</body>

</html>

//home.js
document.body.innerHTML = localStorage.getItem('data');
3 years ago