layui-admin/gulpfile.js

var gulp = require("gulp");
var gulpif = require("gulp-if");
var fileinclude = require('gulp-file-include');
var clean = require("gulp-clean");

var connect = require("gulp-connect"); //引入gulp-connect模块
var webserver = require('gulp-webserver');

var sass = require("gulp-sass"); //编译scss
var rename = require("gulp-rename"); //重命名
var minifyCss = require("gulp-minify-css"); //压缩CSS
var autoprefixer = require("gulp-autoprefixer");
var px2rem = require('gulp-px2rem-plugin');

var imagemin = require("gulp-imagemin");

var minifyHtml = require("gulp-minify-html"); //压缩html
// var htmltpl = require("gulp-html-tpl"); // 引用html模板
var artTemplate = require("art-template"); // 模板渲染

var uglify = require("gulp-uglify"); //js压缩
var babel = require("gulp-babel");

var entrance = "admin";
var out = "dist";

var outPath = out + "/";
var entrancePath = entrance + "/";
var commonHtmlPath = entrancePath + "template/common/";
var localPort = 9909;
gulp.task("watchs", function () {
    gulp.watch("gulpfile.js", gulp.series("default"));
    gulp.watch(commonHtmlPath + "*.html", gulp.series("html"));
    gulp.watch(entrancePath + "pages/*.html", gulp.series("html"));
    gulp.watch(entrancePath + "pages/*/*.html", gulp.series("html"));
    gulp.watch(entrancePath + "static/scss/*.scss", gulp.series("scss"));
    gulp.watch(entrancePath + "static/js/*.js", gulp.series("js"));
    gulp.watch(entrancePath + "static/js/*/*.js", gulp.series("js"));
    gulp.watch(entrancePath + "static/img/*", gulp.series("img"));
    gulp.watch(entrancePath + "res/js/*.js", gulp.series("libJs"));
});

gulp.task('webserver', function () {
    gulp.src(out)
        .pipe(webserver({
            host: 'localhost',
            port: localPort,
            livereload: true,
            open: './pages/index.html',
            directoryListing: {
                enable: true,
                path: out
            },
            proxies: [{
                source: '/api',
                target: 'http://localhost:8090' // 代理的域名
            }]
        }))
});
// 清空dist文件夹
gulp.task("clean", function () {
    return gulp.src([outPath + "*"]).pipe(clean());
});

gulp.task("layui_exts", function () {
    return gulp
        .src([entrancePath + "static/layui/layui_exts/*"])
        .pipe(gulp.dest(outPath + "static/layui/layui_exts/"))
        .pipe(connect.reload());
});

gulp.task("layui", function () {
    return gulp
        .src([entrancePath + "static/layui/*", entrancePath + "static/layui/*/*", entrancePath + "static/layui/*/*/*", entrancePath + "static/layui/*/*/*/*", entrancePath + "static/layui/*/*/*/*/*", entrancePath + "static/layui/*/*/*/*/*/*"])
        .pipe(gulp.dest(outPath + "static/layui/"))
        .pipe(connect.reload());
});
gulp.task("layuicss", function () {
    return gulp
        .src([
            entrancePath + "/static/layui/layui/css/*.css",
            entrancePath + "/static/layui/layui/css/*/*.css",
            entrancePath + "/static/layui/layui/css/*/*/*.css",
            entrancePath + "/static/layui/layui/css/*/*/*/*.css",
            entrancePath + "/static/layui/layui/css/*/*/*/*/*.css"
        ])
        .pipe(px2rem({ 'width_design': 1600, 'valid_num': 6, 'pieces': 10, 'ignore_px': [1, 2], 'ignore_selector': ['.layui-layer-setwin .layui-layer-close1', '.layui-layer-setwin a'] }))
        .pipe(gulp.dest(outPath + "/static/layui/layui/css"))
        .pipe(connect.reload()); //更新;
});
gulp.task("html", function () {
    return gulp
        .src([entrancePath + "pages/index.html", entrancePath + "pages/*/*.html"])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        // .pipe(
        //     htmltpl({
        //         tag: "template",
        //         paths: [commonHtmlPath],
        //         engine: function (template, data) {
        //             return template && artTemplate.compile(template)(data);
        //         },
        //         data: {
        //             //初始化数据
        //             csslinks: false,
        //             jslinks: false,
        //         },
        //     })
        // )
        .pipe(
            rename(function (path) {
                path.dirname += "";
                path.basename += "";
                path.extname = ".html";
            })
        )
        .pipe(gulp.dest(outPath + "pages/"))
        .pipe(connect.reload());
});

gulp.task("scss", function () {
    return gulp
        .src(entrancePath + "/static/scss/*.scss")
        .pipe(sass()) //编译scss
        .pipe(autoprefixer("last 15 version", "ie 8"))
        .pipe(rename({ suffix: "" })) //rename压缩后的文件名
        .pipe(px2rem({ 'width_design': 1600, 'valid_num': 6, 'pieces': 10, 'ignore_px': [1, 2], 'ignore_selector': [] }))
        // .pipe(minifyCss()) //执行压缩
        .pipe(gulp.dest(outPath + "/static/css"))
        .pipe(connect.reload()); //更新;
});
var libJsCondition = function (f) {
    return !/qrcode.js$/.test(f.path);
};
gulp.task("libJs", function () {
    return (
        gulp
            .src([entrancePath + "res/js/*.js", entrancePath + "res/js/*/*.js", entrancePath + "res/js/*/*/*.js"])
            .pipe(gulpif(libJsCondition, babel({
                presets: ["env"],
                plugins: [],
            })))
            // .pipe(uglify())//执行压缩
            .pipe(gulp.dest(outPath + "res/js"))
            .pipe(
                rename(function (path) {
                    path.dirname += "";
                    path.basename += "";
                    path.extname = ".js";
                })
            )
            .pipe(connect.reload())
    );
});
var jsCondition = function (f) {
    return !/.min.js$/.test(f.path);
};
gulp.task("js", function () {
    return (
        gulp
            .src([entrancePath + "static/js/*.js", entrancePath + "static/js/*/*.js"])
            .pipe(gulpif(jsCondition, babel({
                presets: ["env"],
                plugins: [],
            })))
            // .pipe(uglify())//执行压缩
            .pipe(gulp.dest(outPath + "static/js"))
            .pipe(
                rename(function (path) {
                    path.dirname += "";
                    path.basename += "";
                    path.extname = ".js";
                })
            )
            .pipe(connect.reload())
    );
});

gulp.task('img', function () {
    return gulp.src(entrancePath + 'static/img/*.{png,jpg,gif,ico}')
        // .pipe(imagemin())
        .pipe(gulp.dest(outPath + 'static/img'));
});
gulp.task(
    "default",
    gulp.series(
        "clean",
        "scss",
        "layui",
        "layuicss",
        "layui_exts",
        gulp.parallel("html", 'img', 'libJs', "js"),
        gulp.parallel("webserver", 'watchs')
    )
);