"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" ]); });