gulpfile.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  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 + "/**/*.xlsx"
  81. ])
  82. .pipe(gulp.dest(config.dist));
  83. });
  84. // 处理字体文件
  85. gulp.task("font", function() {
  86. return gulp
  87. .src([config.src + "/**/*.{eot,svg,ttf,woff,woff2}"])
  88. .pipe(gulp.dest(config.dist));
  89. });
  90. // 处理 css 文件
  91. gulp.task("css", function() {
  92. return gulp
  93. .src([config.src + "/**/*.css"])
  94. .pipe(
  95. autoPrefixer({
  96. browsers: [
  97. "Firefox >= 38",
  98. "Safari >= 7",
  99. "Chrome >= 26",
  100. "IE >= 10",
  101. "Opera >= 12"
  102. ]
  103. })
  104. )
  105. .pipe(ifElse(config.product, cleanCSS({ compatibility: "ie8" })))
  106. .pipe(gulp.dest(config.dist));
  107. });
  108. // 处理 js 文件--未做任何处理
  109. gulp.task("js", function() {
  110. return gulp.src([config.src + "/**/*.js"])
  111. .pipe(gulp.dest(config.dist));
  112. });
  113. // 处理图片文件
  114. gulp.task("image", function() {
  115. gulp.src(config.src + "/**/*.{png,jpeg,jpg,gif,ico,cur}")
  116. .pipe(
  117. ifElse(
  118. config.product,
  119. imagemin([
  120. imagemin.gifsicle({ interlaced: true }),
  121. imagemin.jpegtran({ progressive: true }),
  122. imagemin.optipng({ optimizationLevel: 5 }),
  123. imagemin.svgo({
  124. plugins: [
  125. { removeViewBox: true },
  126. { cleanupIDs: false }
  127. ]
  128. })
  129. ])
  130. )
  131. )
  132. .pipe(gulp.dest(config.dist));
  133. });
  134. // 处理 json 文件
  135. gulp.task("json", function() {
  136. return (
  137. gulp
  138. .src(config.src + "/**/*.json")
  139. .pipe(gulp.dest(config.dist))
  140. );
  141. });
  142. // 合并部分jquery 插件库文件,减少请求数量
  143. gulp.task("mergeJqueryFiles", function() {
  144. let targetFiles = [
  145. "/vendor/jquery-datatables-1.10.18/js/jquery.dataTables.min.js",
  146. "/vendor/jquery-fixedheader-3.1.4/js/dataTables.fixedHeader.min.js",
  147. "/vendor/jquery-fixedcolumns-3.2.5/js/dataTables.fixedColumns.min.js",
  148. "/vendor/jquery-select-1.3.0/js/dataTables.select.min.js"
  149. ].map(function(value) {
  150. return config.src + value;
  151. });
  152. return gulp
  153. .src(targetFiles)
  154. .pipe(concat("jqueryui-merge.min.js"))
  155. .pipe(gulp.dest("./dist/vendor/merge_file/js/"));
  156. });
  157. // 合并部分Bootstrap 插件库文件,减少请求数量
  158. gulp.task("mergeBootstrapFiles", function() {
  159. let targetFiles = [
  160. "/vendor/bootstrap-4.0.0/js/bootstrap.min.js",
  161. "/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
  162. "/vendor/bootstrap-fileinput-4.0.0/fileinput.min.js",
  163. "/vendor/bootstrap-fileinput-4.0.0/zh.js",
  164. "/vendor/bootstrap-validator-0.5.3/js/bootstrapValidator.min.js",
  165. "/vendor/bootstrap-validator-0.5.3/js/language/zh_CN.js",
  166. "/vendor/bootstrap-switch-3.3.2/js/bootstrap-switch.min.js",
  167. "/vendor/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js",
  168. "/vendor/bootstrap-select-1.13.7/js/bootstrap-select.min.js",
  169. "/vendor/bootstrap-select-1.13.7/js/locales/defaults-zh_CN.min.js"
  170. ].map(function(value) {
  171. return config.src + value;
  172. });
  173. return gulp
  174. .src(targetFiles)
  175. .pipe(concat("bootstrap-merge.min.js"))
  176. .pipe(gulp.dest("./dist/vendor/merge_file/js/"));
  177. });
  178. // 合并jquery css文件,减少请求数量
  179. gulp.task("mergeJqueryCssFiles", function() {
  180. let targetFiles = [
  181. "/vendor/jquery-datatables-1.10.18/css/jquery.dataTables.min.css",
  182. "/vendor/jquery-fixedheader-3.1.4/css/fixedHeader.bootstrap.min.css",
  183. "/vendor/jquery-fixedcolumns-3.2.5/css/fixedColumns.bootstrap.min.css",
  184. "/vendor/jquery-select-1.3.0/css/select.dataTables.min.css"
  185. ].map(function(value) {
  186. return config.src + value;
  187. });
  188. return gulp
  189. .src(targetFiles)
  190. .pipe(concat("jquery-mergecss.min.css"))
  191. .pipe(gulp.dest("./dist/vendor/merge_file/css/")); //原有的库文件保持不动,压缩的文件放到对应的文件夹中
  192. });
  193. // 合并bootstrap css文件,减少请求数量
  194. gulp.task("mergeBootstrapCssFiles", function() {
  195. let targetFiles = [
  196. "/vendor/bootstrap-4.0.0/css/bootstrap.min.css",
  197. "/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css",
  198. "/vendor/bootstrap-fileinput-4.0.0/fileinput.min.css",
  199. "/vendor/bootstrap-validator-0.5.3/css/bootstrapValidator.min.css",
  200. "/vendor/bootstrap-switch-3.3.2/css/bootstrap-switch.min.css",
  201. "/vendor/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css",
  202. "/vendor/bootstrap-select-1.13.7/css/bootstrap-select.min.css"
  203. ].map(function(value) {
  204. return config.src + value;
  205. });
  206. return gulp
  207. .src(targetFiles)
  208. .pipe(concat("bootstrap-mergecss.min.css"))
  209. .pipe(gulp.dest("./dist/vendor/merge_file/css/")); //原有的库文件保持不动,压缩的文件放到对应的文件夹中
  210. });
  211. // 清除目录
  212. gulp.task("clean", function() {
  213. return gulp
  214. .src(config.dist, {
  215. read: false
  216. })
  217. .pipe(clean());
  218. });
  219. // 创建一个本地 Server
  220. gulp.task("serve", function() {
  221. browserSync.init({
  222. server: {
  223. baseDir: config.serverRoot
  224. }
  225. });
  226. });
  227. // 刷新浏览器中的页面
  228. gulp.task("reload", function() {
  229. browserSync.reload();
  230. });
  231. // 开启一个本地服务器,并文件变化时刷新页面
  232. gulp.task("serve:watch", ["serve"], function() {
  233. gulp.watch(config.src + "/**/*.ts", function() {
  234. runSequence(["typescript", "reload"]);
  235. });
  236. gulp.watch(config.src + "/**/*.json", function() {
  237. runSequence(["json", "reload"]);
  238. });
  239. gulp.watch(config.src + "/**/*.html", function() {
  240. runSequence(["html", "reload"]);
  241. });
  242. gulp.watch(config.src + "/**/*.scss", function() {
  243. runSequence(["sass", "reload"]);
  244. });
  245. gulp.watch(config.src + "/**/*.js", function() {
  246. runSequence(["js", "reload"]);
  247. });
  248. gulp.watch(config.src + "/**/*.css", function() {
  249. runSequence(["css", "reload"]);
  250. });
  251. gulp.watch(config.src + "/**/*.{png,jpeg,jpg,gif,ico}", function() {
  252. runSequence(["image", "reload"]);
  253. });
  254. gulp.watch(
  255. [config.src + "/**/*.txt", config.src + "/**/*.xml"],
  256. function() {
  257. runSequence(["copy", "reload"]);
  258. }
  259. );
  260. });
  261. // 默认任务
  262. gulp.task("default", ["clean"], function() {
  263. gulp.start([
  264. "typescript",
  265. "json",
  266. "sass",
  267. "image",
  268. "copy",
  269. "font",
  270. "css",
  271. "js",
  272. "html"
  273. ]);
  274. });
  275. // 产品发布任务
  276. // 主要用于压缩所有的文件
  277. gulp.task("product", ["clean"], function() {
  278. config.product = true;
  279. gulp.start([
  280. "typescript",
  281. "json",
  282. "sass",
  283. "image",
  284. "copy",
  285. "font",
  286. "css",
  287. "js",
  288. "html",
  289. "mergeJqueryFiles",
  290. "mergeBootstrapFiles",
  291. "mergeJqueryCssFiles",
  292. "mergeBootstrapCssFiles"
  293. ]);
  294. });