gulpfile.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. 'use strict';
  2. // npm插件
  3. const gulp = require('gulp'),
  4. ts = require('gulp-typescript'),
  5. tsProject = ts.createProject('tsconfig.json'),
  6. replace = require('gulp-batch-replace'),
  7. htmlMin = require('gulp-htmlmin'),
  8. sass = require('gulp-sass'),
  9. clean = require('gulp-clean'),
  10. browserSync = require('browser-sync').create(),
  11. autoPrefixer = require('gulp-autoprefixer'),
  12. cleanCSS = require('gulp-clean-css'),
  13. imageMin = require('gulp-imagemin'),
  14. ifElse = require('gulp-if-else'),
  15. runSequence = require('run-sequence');
  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. tsProject.src()
  26. .pipe(tsProject())
  27. .js
  28. .pipe(ifElse(config.product, replace.bind(this, [
  29. ['\n', ' '],
  30. [/\s*=\s*/g, '='],
  31. [/\s*,\s*/g, ','],
  32. [/\s*\{\s*/g, '{'],
  33. [/\s*}\s*/g, '}'],
  34. [/\s+/g, ' ']
  35. ])))
  36. .pipe(gulp.dest(config.dist));
  37. });
  38. // 处理 HTML 文件
  39. gulp.task('html', function () {
  40. return gulp.src(config.src + '/**/*.html')
  41. .pipe(ifElse(config.product, htmlMin.bind(this, {
  42. collapseWhitespace: true
  43. })))
  44. .pipe(gulp.dest(config.dist));
  45. });
  46. // 处理 Sass 文件
  47. gulp.task('sass', function () {
  48. return gulp.src(config.src + '/**/*.scss')
  49. .pipe(sass().on('error', sass.logError))
  50. .pipe(autoPrefixer({
  51. browsers: ["Firefox >= 38",
  52. "Safari >= 7",
  53. "Chrome >= 26",
  54. "IE >= 10",
  55. "Opera >= 12"
  56. ]
  57. }))
  58. .pipe(ifElse(config.product, cleanCSS))
  59. .pipe(gulp.dest(config.dist));
  60. });
  61. // 复制不需要处理的文件
  62. gulp.task('copy', function () {
  63. return gulp.src([
  64. config.src + '/**/*.gltf',//zby_add
  65. config.src + '/**/*.config',//zby_add
  66. config.src + '/**/*.mp4',//zby_add
  67. config.src + '/**/*.mp3',//zby_add
  68. config.src + '/**/*.txt',
  69. config.src + '/**/*.xml',
  70. config.src + '/**/*.pdf'
  71. ])
  72. .pipe(gulp.dest(config.dist));
  73. });
  74. // 处理字体文件
  75. gulp.task('font', function () {
  76. return gulp.src([
  77. config.src + '/**/*.{eot,svg,ttf,woff,woff2}'
  78. ])
  79. .pipe(gulp.dest(config.dist));
  80. });
  81. // 处理 css 文件
  82. gulp.task('css', function () {
  83. return gulp.src([
  84. config.src + '/**/*.css'
  85. ])
  86. .pipe(autoPrefixer({
  87. browsers: ["Firefox >= 38",
  88. "Safari >= 7",
  89. "Chrome >= 26",
  90. "IE >= 10",
  91. "Opera >= 12"
  92. ]
  93. }))
  94. .pipe(ifElse(config.product, cleanCSS))
  95. .pipe(gulp.dest(config.dist));
  96. });
  97. // 处理 js 文件
  98. gulp.task('js', function () {
  99. return gulp.src([
  100. config.src + '/**/*.js'
  101. ])
  102. .pipe(ifElse(config.product, replace.bind(this, [
  103. ['\n', ' '],
  104. [/\s*=\s*/g, '='],
  105. [/\s*,\s*/g, ','],
  106. [/\s*\{\s*/g, '{'],
  107. [/\s*}\s*/g, '}'],
  108. [/\s+/g, ' ']
  109. ])))
  110. .pipe(gulp.dest(config.dist));
  111. });
  112. // 处理图片文件
  113. gulp.task('image', function () {
  114. gulp.src(config.src + '/**/*.{png,jpeg,jpg,gif,ico,cur}')
  115. .pipe(ifElse(config.product, imageMin))
  116. .pipe(gulp.dest(config.dist));
  117. });
  118. // 处理 json 文件
  119. gulp.task('json', function () {
  120. return gulp.src(config.src + '/**/*.json')
  121. .pipe(ifElse(config.product, replace.bind(this, [
  122. ['\n', ' '],
  123. [/\s*,\s*/g, ','],
  124. [/\s*\{\s*/g, '{'],
  125. [/\s*}\s*/g, '}'],
  126. [/\s+/g, ' ']
  127. ])))
  128. .pipe(gulp.dest(config.dist))
  129. });
  130. // 清除目录
  131. gulp.task('clean', function () {
  132. return gulp.src(config.dist, {
  133. read: false
  134. })
  135. .pipe(clean());
  136. });
  137. // 创建一个本地 Server
  138. gulp.task('serve', function () {
  139. browserSync.init({
  140. server: {
  141. baseDir: config.serverRoot
  142. }
  143. });
  144. });
  145. // 刷新浏览器中的页面
  146. gulp.task('reload', function () {
  147. browserSync.reload();
  148. });
  149. // 开启一个本地服务器,并文件变化时刷新页面
  150. gulp.task('serve:watch', ['serve'], function () {
  151. gulp.watch(config.src + '/**/*.ts', function () {
  152. runSequence(['typescript', 'reload']);
  153. });
  154. gulp.watch(config.src + '/**/*.json', function () {
  155. runSequence(['json', 'reload']);
  156. });
  157. gulp.watch(config.src + '/**/*.html', function () {
  158. runSequence(['html', 'reload']);
  159. });
  160. gulp.watch(config.src + '/**/*.scss', function () {
  161. runSequence(['sass', 'reload']);
  162. });
  163. gulp.watch(config.src + '/**/*.js', function () {
  164. runSequence(['js', 'reload']);
  165. });
  166. gulp.watch(config.src + '/**/*.css', function () {
  167. runSequence(['css', 'reload']);
  168. });
  169. gulp.watch(config.src + '/**/*.{png,jpeg,jpg,gif,ico}', function () {
  170. runSequence(['image', 'reload']);
  171. });
  172. gulp.watch([
  173. config.src + '/**/*.txt',
  174. config.src + '/**/*.xml'
  175. ], function () {
  176. runSequence(['copy', 'reload']);
  177. });
  178. });
  179. // 默认任务
  180. gulp.task('default', ['clean'], function () {
  181. gulp.start(['typescript', 'json', 'sass', 'image', 'copy', 'font', 'css', 'js', 'html']);
  182. });
  183. // 产品发布任务
  184. // 主要用于压缩所有的文件
  185. gulp.task('product', ['clean'], function () {
  186. config.product = true;
  187. gulp.start(['typescript', 'json', 'sass', 'image', 'copy', 'font', 'css', 'js', 'html']);
  188. });