123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318 |
- "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 + "/**/*.mp4",
- config.src + "/**/*.properties"
- ])
- .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"
- ]);
- });
|