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') ) );