gulpfile.js 9.5 KB

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