ghrq/gulpfile.js

"use strict";
// npm插件
const gulp = require("gulp"),
    ts = require("gulp-typescript"),
    tsProject = ts.createProject("tsconfig.json"),
    htmlMin = require("gulp-htmlmin"),
    sass = require("gulp-sass"),
    clean = require("gulp-clean"),
    browserSync = require("browser-sync").create(),
    autoPrefixer = require("gulp-autoprefixer"),
    cleanCSS = require("gulp-clean-css"),
    imagemin = require("gulp-imagemin"),
    ifElse = require("gulp-if"),
    runSequence = require("run-sequence"),
    concat = require("gulp-concat");

// 定义统一常量
var config = {
    product: false,
    src: "src",
    dist: "dist",
    serverRoot: "./dist"
};

// 处理 TypeScript 文件
gulp.task("typescript", function() {
    return tsProject
        .src()
        .pipe(tsProject())
        .js.pipe(gulp.dest(config.dist));
});

// 处理 HTML 文件
gulp.task("html", function() {
    return gulp
        .src(config.src + "/**/*.html")
        .pipe(
            ifElse(
                config.product,
                htmlMin({
                    collapseWhitespace: true, //删除空格
                    conservativeCollapse: true,
                    removeComments: true //删除注释
                })
            )
        )
        .pipe(gulp.dest(config.dist));
});

// 处理 Sass 文件
gulp.task("sass", function() {
    return gulp
        .src(config.src + "/**/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(
            autoPrefixer({
                browsers: [
                    "Firefox >= 38",
                    "Safari >= 7",
                    "Chrome >= 26",
                    "IE >= 10",
                    "Opera >= 12"
                ]
            })
        )
        .pipe(ifElse(config.product, cleanCSS({ compatibility: "ie8" })))
        .pipe(gulp.dest(config.dist));
});

// 复制不需要处理的文件
gulp.task("copy", function() {
    return gulp
        .src([
            config.src + "/**/*.txt",
            config.src + "/**/*.xml",
            config.src + "/**/*.pdf",
            config.src + "/**/*.obj",
            config.src + "/**/*.glb",
            config.src + "/**/*.wasm",
            config.src + "/**/*.config",
            config.src + "/**/*.gltf",
            config.src + "/**/*.bin",
            config.src + "/**/*.JPG",
            config.src + "/**/*.mp3",
            config.src + "/**/*.xlsx"
        ])
        .pipe(gulp.dest(config.dist));
});

// 处理字体文件
gulp.task("font", function() {
    return gulp
        .src([config.src + "/**/*.{eot,svg,ttf,woff,woff2}"])
        .pipe(gulp.dest(config.dist));
});

// 处理 css 文件
gulp.task("css", function() {
    return gulp
        .src([config.src + "/**/*.css"])
        .pipe(
            autoPrefixer({
                browsers: [
                    "Firefox >= 38",
                    "Safari >= 7",
                    "Chrome >= 26",
                    "IE >= 10",
                    "Opera >= 12"
                ]
            })
        )
        .pipe(ifElse(config.product, cleanCSS({ compatibility: "ie8" })))
        .pipe(gulp.dest(config.dist));
});

// 处理 js 文件--未做任何处理
gulp.task("js", function() {
    return gulp.src([config.src + "/**/*.js"])
                .pipe(gulp.dest(config.dist));
});



// 处理图片文件
gulp.task("image", function() {
    gulp.src(config.src + "/**/*.{png,jpeg,jpg,gif,ico,cur}")
        .pipe(
            ifElse(
                config.product,
                imagemin([
                    imagemin.gifsicle({ interlaced: true }),
                    imagemin.jpegtran({ progressive: true }),
                    imagemin.optipng({ optimizationLevel: 5 }),
                    imagemin.svgo({
                        plugins: [
                            { removeViewBox: true },
                            { cleanupIDs: false }
                        ]
                    })
                ])
            )
        )
        .pipe(gulp.dest(config.dist));
});

// 处理 json 文件
gulp.task("json", function() {
    return (
        gulp
            .src(config.src + "/**/*.json")
            .pipe(gulp.dest(config.dist))
    );
});

// 合并部分jquery 插件库文件，减少请求数量
gulp.task("mergeJqueryFiles", function() {
    let targetFiles = [
        "/vendor/jquery-datatables-1.10.18/js/jquery.dataTables.min.js",
        "/vendor/jquery-fixedheader-3.1.4/js/dataTables.fixedHeader.min.js",
        "/vendor/jquery-fixedcolumns-3.2.5/js/dataTables.fixedColumns.min.js",
        "/vendor/jquery-select-1.3.0/js/dataTables.select.min.js"
    ].map(function(value) {
        return config.src + value;
    });
    return gulp
        .src(targetFiles)
        .pipe(concat("jqueryui-merge.min.js"))
        .pipe(gulp.dest("./dist/vendor/merge_file/js/"));
});

// 合并部分Bootstrap 插件库文件，减少请求数量
gulp.task("mergeBootstrapFiles", function() {
    let targetFiles = [
        "/vendor/bootstrap-4.0.0/js/bootstrap.min.js",
        "/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
        "/vendor/bootstrap-fileinput-4.0.0/fileinput.min.js",
        "/vendor/bootstrap-fileinput-4.0.0/zh.js",
        "/vendor/bootstrap-validator-0.5.3/js/bootstrapValidator.min.js",
        "/vendor/bootstrap-validator-0.5.3/js/language/zh_CN.js",
        "/vendor/bootstrap-switch-3.3.2/js/bootstrap-switch.min.js",
        "/vendor/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js",
        "/vendor/bootstrap-select-1.13.7/js/bootstrap-select.min.js",
        "/vendor/bootstrap-select-1.13.7/js/locales/defaults-zh_CN.min.js"
    ].map(function(value) {
        return config.src + value;
    });
    return gulp
        .src(targetFiles)
        .pipe(concat("bootstrap-merge.min.js"))
        .pipe(gulp.dest("./dist/vendor/merge_file/js/"));
});

// 合并jquery css文件，减少请求数量
gulp.task("mergeJqueryCssFiles", function() {
    let targetFiles = [
        "/vendor/jquery-datatables-1.10.18/css/jquery.dataTables.min.css",
        "/vendor/jquery-fixedheader-3.1.4/css/fixedHeader.bootstrap.min.css",
        "/vendor/jquery-fixedcolumns-3.2.5/css/fixedColumns.bootstrap.min.css",
        "/vendor/jquery-select-1.3.0/css/select.dataTables.min.css"
    ].map(function(value) {
        return config.src + value;
    });
    return gulp
        .src(targetFiles)
        .pipe(concat("jquery-mergecss.min.css"))
        .pipe(gulp.dest("./dist/vendor/merge_file/css/")); //原有的库文件保持不动，压缩的文件放到对应的文件夹中
});

// 合并bootstrap css文件，减少请求数量
gulp.task("mergeBootstrapCssFiles", function() {
    let targetFiles = [
        "/vendor/bootstrap-4.0.0/css/bootstrap.min.css",
        "/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css",
        "/vendor/bootstrap-fileinput-4.0.0/fileinput.min.css",
        "/vendor/bootstrap-validator-0.5.3/css/bootstrapValidator.min.css",
        "/vendor/bootstrap-switch-3.3.2/css/bootstrap-switch.min.css",
        "/vendor/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css",
        "/vendor/bootstrap-select-1.13.7/css/bootstrap-select.min.css"
    ].map(function(value) {
        return config.src + value;
    });
    return gulp
        .src(targetFiles)
        .pipe(concat("bootstrap-mergecss.min.css"))
        .pipe(gulp.dest("./dist/vendor/merge_file/css/")); //原有的库文件保持不动，压缩的文件放到对应的文件夹中
});

// 清除目录
gulp.task("clean", function() {
    return gulp
        .src(config.dist, {
            read: false
        })
        .pipe(clean());
});

// 创建一个本地 Server
gulp.task("serve", function() {
    browserSync.init({
        server: {
            baseDir: config.serverRoot
        }
    });
});

// 刷新浏览器中的页面
gulp.task("reload", function() {
    browserSync.reload();
});

// 开启一个本地服务器，并文件变化时刷新页面
gulp.task("serve:watch", ["serve"], function() {
    gulp.watch(config.src + "/**/*.ts", function() {
        runSequence(["typescript", "reload"]);
    });
    gulp.watch(config.src + "/**/*.json", function() {
        runSequence(["json", "reload"]);
    });
    gulp.watch(config.src + "/**/*.html", function() {
        runSequence(["html", "reload"]);
    });
    gulp.watch(config.src + "/**/*.scss", function() {
        runSequence(["sass", "reload"]);
    });
    gulp.watch(config.src + "/**/*.js", function() {
        runSequence(["js", "reload"]);
    });
    gulp.watch(config.src + "/**/*.css", function() {
        runSequence(["css", "reload"]);
    });
    gulp.watch(config.src + "/**/*.{png,jpeg,jpg,gif,ico}", function() {
        runSequence(["image", "reload"]);
    });
    gulp.watch(
        [config.src + "/**/*.txt", config.src + "/**/*.xml"],
        function() {
            runSequence(["copy", "reload"]);
        }
    );
});


// 默认任务
gulp.task("default", ["clean"], function() {
    gulp.start([
        "typescript",
        "json",
        "sass",
        "image",
        "copy",
        "font",
        "css",
        "js",
        "html"
    ]);
});

// 产品发布任务
//  主要用于压缩所有的文件
gulp.task("product", ["clean"], function() {
    config.product = true;
    gulp.start([
        "typescript",
        "json",
        "sass",
        "image",
        "copy",
        "font",
        "css",
        "js",
        "html",
        "mergeJqueryFiles",
        "mergeBootstrapFiles",
        "mergeJqueryCssFiles",
        "mergeBootstrapCssFiles"
    ]);
});