gulpfile.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. "use strict";
  2. // npm插件
  3. const gulp = require("gulp"),
  4. ts = require("gulp-typescript"),
  5. tsProject = ts.createProject("tsconfig.json"),
  6. htmlMin = require("gulp-htmlmin"),
  7. sass = require("gulp-sass"),
  8. clean = require("gulp-clean"),
  9. browserSync = require("browser-sync").create(),
  10. autoPrefixer = require("gulp-autoprefixer"),
  11. cleanCSS = require("gulp-clean-css"),
  12. imagemin = require("gulp-imagemin"),
  13. ifElse = require("gulp-if"),
  14. runSequence = require("run-sequence"),
  15. concat = require("gulp-concat");
  16. // 定义统一常量
  17. var config = {
  18. product: false,
  19. src: "src",
  20. dist: "dist",
  21. serverRoot: "./dist"
  22. };
  23. // 处理 TypeScript 文件
  24. gulp.task("typescript", function() {
  25. return tsProject
  26. .src()
  27. .pipe(tsProject())
  28. .js.pipe(gulp.dest(config.dist));
  29. });
  30. // 处理 HTML 文件
  31. gulp.task("html", function() {
  32. return gulp
  33. .src(config.src + "/**/*.html")
  34. .pipe(
  35. ifElse(
  36. config.product,
  37. htmlMin({
  38. collapseWhitespace: true, //删除空格
  39. conservativeCollapse: true,
  40. removeComments: true //删除注释
  41. })
  42. )
  43. )
  44. .pipe(gulp.dest(config.dist));
  45. });
  46. // 处理 Sass 文件
  47. gulp.task("sass", function() {
  48. return gulp
  49. .src(config.src + "/**/*.scss")
  50. .pipe(sass().on("error", sass.logError))
  51. .pipe(
  52. autoPrefixer({
  53. browsers: [
  54. "Firefox >= 38",
  55. "Safari >= 7",
  56. "Chrome >= 26",
  57. "IE >= 10",
  58. "Opera >= 12"
  59. ]
  60. })
  61. )
  62. .pipe(ifElse(config.product, cleanCSS({ compatibility: "ie8" })))
  63. .pipe(gulp.dest(config.dist));
  64. });
  65. // 复制不需要处理的文件
  66. gulp.task("copy", function() {
  67. return gulp
  68. .src([
  69. config.src + "/**/*.txt",
  70. config.src + "/**/*.xml",
  71. config.src + "/**/*.pdf",
  72. config.src + "/**/*.obj",
  73. config.src + "/**/*.glb",
  74. config.src + "/**/*.wasm",
  75. config.src + "/**/*.config",
  76. config.src + "/**/*.gltf",
  77. config.src + "/**/*.bin",
  78. config.src + "/**/*.JPG",
  79. config.src + "/**/*.mp3",
  80. config.src + "/**/*.mp4",
  81. config.src + "/**/*.gif",
  82. config.src + "/**/*.jpg",
  83. config.src + "/**/*.properties"
  84. ])
  85. .pipe(gulp.dest(config.dist));
  86. });
  87. // 处理字体文件
  88. gulp.task("font", function() {
  89. return gulp
  90. .src([config.src + "/**/*.{eot,svg,ttf,woff,woff2}"])
  91. .pipe(gulp.dest(config.dist));
  92. });
  93. // 处理 css 文件
  94. gulp.task("css", function() {
  95. return gulp
  96. .src([config.src + "/**/*.css"])
  97. .pipe(
  98. autoPrefixer({
  99. browsers: [
  100. "Firefox >= 38",
  101. "Safari >= 7",
  102. "Chrome >= 26",
  103. "IE >= 10",
  104. "Opera >= 12"
  105. ]
  106. })
  107. )
  108. .pipe(ifElse(config.product, cleanCSS({ compatibility: "ie8" })))
  109. .pipe(gulp.dest(config.dist));
  110. });
  111. // 处理 js 文件--未做任何处理
  112. gulp.task("js", function() {
  113. return gulp.src([config.src + "/**/*.js"])
  114. .pipe(gulp.dest(config.dist));
  115. });
  116. // 处理图片文件
  117. gulp.task("image", function() {
  118. gulp.src(config.src + "/**/*.{png,jpeg,jpg,gif,ico,cur}")
  119. .pipe(
  120. ifElse(
  121. config.product,
  122. imagemin([
  123. imagemin.gifsicle({ interlaced: true }),
  124. imagemin.jpegtran({ progressive: true }),
  125. imagemin.optipng({ optimizationLevel: 5 }),
  126. imagemin.svgo({
  127. plugins: [
  128. { removeViewBox: true },
  129. { cleanupIDs: false }
  130. ]
  131. })
  132. ])
  133. )
  134. )
  135. .pipe(gulp.dest(config.dist));
  136. });
  137. // 处理 json 文件
  138. gulp.task("json", function() {
  139. return (
  140. gulp
  141. .src(config.src + "/**/*.json")
  142. .pipe(gulp.dest(config.dist))
  143. );
  144. });
  145. // 合并部分jquery 插件库文件,减少请求数量
  146. gulp.task("mergeJqueryFiles", function() {
  147. let targetFiles = [
  148. "/vendor/jquery-datatables-1.10.18/js/jquery.dataTables.min.js",
  149. "/vendor/jquery-fixedheader-3.1.4/js/dataTables.fixedHeader.min.js",
  150. "/vendor/jquery-fixedcolumns-3.2.5/js/dataTables.fixedColumns.min.js",
  151. "/vendor/jquery-select-1.3.0/js/dataTables.select.min.js"
  152. ].map(function(value) {
  153. return config.src + value;
  154. });
  155. return gulp
  156. .src(targetFiles)
  157. .pipe(concat("jqueryui-merge.min.js"))
  158. .pipe(gulp.dest("./dist/vendor/merge_file/js/"));
  159. });
  160. // 合并部分Bootstrap 插件库文件,减少请求数量
  161. gulp.task("mergeBootstrapFiles", function() {
  162. let targetFiles = [
  163. "/vendor/bootstrap-4.0.0/js/bootstrap.min.js",
  164. "/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
  165. "/vendor/bootstrap-fileinput-4.0.0/fileinput.min.js",
  166. "/vendor/bootstrap-fileinput-4.0.0/zh.js",
  167. "/vendor/bootstrap-validator-0.5.3/js/bootstrapValidator.min.js",
  168. "/vendor/bootstrap-validator-0.5.3/js/language/zh_CN.js",
  169. "/vendor/bootstrap-switch-3.3.2/js/bootstrap-switch.min.js",
  170. "/vendor/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js",
  171. "/vendor/bootstrap-select-1.13.7/js/bootstrap-select.min.js",
  172. "/vendor/bootstrap-select-1.13.7/js/locales/defaults-zh_CN.min.js"
  173. ].map(function(value) {
  174. return config.src + value;
  175. });
  176. return gulp
  177. .src(targetFiles)
  178. .pipe(concat("bootstrap-merge.min.js"))
  179. .pipe(gulp.dest("./dist/vendor/merge_file/js/"));
  180. });
  181. // 合并jquery css文件,减少请求数量
  182. gulp.task("mergeJqueryCssFiles", function() {
  183. let targetFiles = [
  184. "/vendor/jquery-datatables-1.10.18/css/jquery.dataTables.min.css",
  185. "/vendor/jquery-fixedheader-3.1.4/css/fixedHeader.bootstrap.min.css",
  186. "/vendor/jquery-fixedcolumns-3.2.5/css/fixedColumns.bootstrap.min.css",
  187. "/vendor/jquery-select-1.3.0/css/select.dataTables.min.css"
  188. ].map(function(value) {
  189. return config.src + value;
  190. });
  191. return gulp
  192. .src(targetFiles)
  193. .pipe(concat("jquery-mergecss.min.css"))
  194. .pipe(gulp.dest("./dist/vendor/merge_file/css/")); //原有的库文件保持不动,压缩的文件放到对应的文件夹中
  195. });
  196. // 合并bootstrap css文件,减少请求数量
  197. gulp.task("mergeBootstrapCssFiles", function() {
  198. let targetFiles = [
  199. "/vendor/bootstrap-4.0.0/css/bootstrap.min.css",
  200. "/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css",
  201. "/vendor/bootstrap-fileinput-4.0.0/fileinput.min.css",
  202. "/vendor/bootstrap-validator-0.5.3/css/bootstrapValidator.min.css",
  203. "/vendor/bootstrap-switch-3.3.2/css/bootstrap-switch.min.css",
  204. "/vendor/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css",
  205. "/vendor/bootstrap-select-1.13.7/css/bootstrap-select.min.css"
  206. ].map(function(value) {
  207. return config.src + value;
  208. });
  209. return gulp
  210. .src(targetFiles)
  211. .pipe(concat("bootstrap-mergecss.min.css"))
  212. .pipe(gulp.dest("./dist/vendor/merge_file/css/")); //原有的库文件保持不动,压缩的文件放到对应的文件夹中
  213. });
  214. // 清除目录
  215. gulp.task("clean", function() {
  216. return gulp
  217. .src(config.dist, {
  218. read: false
  219. })
  220. .pipe(clean());
  221. });
  222. // 创建一个本地 Server
  223. gulp.task("serve", function() {
  224. browserSync.init({
  225. server: {
  226. baseDir: config.serverRoot
  227. }
  228. });
  229. });
  230. // 刷新浏览器中的页面
  231. gulp.task("reload", function() {
  232. browserSync.reload();
  233. });
  234. // 开启一个本地服务器,并文件变化时刷新页面
  235. gulp.task("serve:watch", ["serve"], function() {
  236. gulp.watch(config.src + "/**/*.ts", function() {
  237. runSequence(["typescript", "reload"]);
  238. });
  239. gulp.watch(config.src + "/**/*.json", function() {
  240. runSequence(["json", "reload"]);
  241. });
  242. gulp.watch(config.src + "/**/*.html", function() {
  243. runSequence(["html", "reload"]);
  244. });
  245. gulp.watch(config.src + "/**/*.scss", function() {
  246. runSequence(["sass", "reload"]);
  247. });
  248. gulp.watch(config.src + "/**/*.js", function() {
  249. runSequence(["js", "reload"]);
  250. });
  251. gulp.watch(config.src + "/**/*.css", function() {
  252. runSequence(["css", "reload"]);
  253. });
  254. gulp.watch(config.src + "/**/*.{png,jpeg,jpg,gif,ico}", function() {
  255. runSequence(["image", "reload"]);
  256. });
  257. gulp.watch(
  258. [config.src + "/**/*.txt", config.src + "/**/*.xml"],
  259. function() {
  260. runSequence(["copy", "reload"]);
  261. }
  262. );
  263. });
  264. // 默认任务
  265. gulp.task("default", ["clean"], function() {
  266. gulp.start([
  267. "typescript",
  268. "json",
  269. "sass",
  270. "image",
  271. "copy",
  272. "font",
  273. "css",
  274. "js",
  275. "html"
  276. ]);
  277. });
  278. // 产品发布任务
  279. // 主要用于压缩所有的文件
  280. gulp.task("product", ["clean"], function() {
  281. config.product = true;
  282. gulp.start([
  283. "typescript",
  284. "json",
  285. "sass",
  286. "image",
  287. "copy",
  288. "font",
  289. "css",
  290. "js",
  291. "html",
  292. "mergeJqueryFiles",
  293. "mergeBootstrapFiles",
  294. "mergeJqueryCssFiles",
  295. "mergeBootstrapCssFiles"
  296. ]);
  297. });