gulpfile.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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 + '/**/*.txt',
  68. config.src + '/**/*.xml',
  69. config.src + '/**/*.pdf'
  70. ])
  71. .pipe(gulp.dest(config.dist));
  72. });
  73. // 处理字体文件
  74. gulp.task('font', function () {
  75. return gulp.src([
  76. config.src + '/**/*.{eot,svg,ttf,woff,woff2}'
  77. ])
  78. .pipe(gulp.dest(config.dist));
  79. });
  80. // 处理 css 文件
  81. gulp.task('css', function () {
  82. return gulp.src([
  83. config.src + '/**/*.css'
  84. ])
  85. .pipe(autoPrefixer({
  86. browsers: ["Firefox >= 38",
  87. "Safari >= 7",
  88. "Chrome >= 26",
  89. "IE >= 10",
  90. "Opera >= 12"
  91. ]
  92. }))
  93. .pipe(ifElse(config.product, cleanCSS))
  94. .pipe(gulp.dest(config.dist));
  95. });
  96. // 处理 js 文件
  97. gulp.task('js', function () {
  98. return gulp.src([
  99. config.src + '/**/*.js'
  100. ])
  101. .pipe(ifElse(config.product, replace.bind(this, [
  102. ['\n', ' '],
  103. [/\s*=\s*/g, '='],
  104. [/\s*,\s*/g, ','],
  105. [/\s*\{\s*/g, '{'],
  106. [/\s*}\s*/g, '}'],
  107. [/\s+/g, ' ']
  108. ])))
  109. .pipe(gulp.dest(config.dist));
  110. });
  111. // 处理图片文件
  112. gulp.task('image', function () {
  113. gulp.src(config.src + '/**/*.{png,jpeg,jpg,gif,ico,cur}')
  114. .pipe(ifElse(config.product, imageMin))
  115. .pipe(gulp.dest(config.dist));
  116. });
  117. // 处理 json 文件
  118. gulp.task('json', function () {
  119. return gulp.src(config.src + '/**/*.json')
  120. .pipe(ifElse(config.product, replace.bind(this, [
  121. ['\n', ' '],
  122. [/\s*,\s*/g, ','],
  123. [/\s*\{\s*/g, '{'],
  124. [/\s*}\s*/g, '}'],
  125. [/\s+/g, ' ']
  126. ])))
  127. .pipe(gulp.dest(config.dist))
  128. });
  129. // 清除目录
  130. gulp.task('clean', function () {
  131. return gulp.src(config.dist, {
  132. read: false
  133. })
  134. .pipe(clean());
  135. });
  136. // 创建一个本地 Server
  137. gulp.task('serve', function () {
  138. browserSync.init({
  139. server: {
  140. baseDir: config.serverRoot
  141. }
  142. });
  143. });
  144. // 刷新浏览器中的页面
  145. gulp.task('reload', function () {
  146. browserSync.reload();
  147. });
  148. // 开启一个本地服务器,并文件变化时刷新页面
  149. gulp.task('serve:watch', ['serve'], function () {
  150. gulp.watch(config.src + '/**/*.ts', function () {
  151. runSequence(['typescript', 'reload']);
  152. });
  153. gulp.watch(config.src + '/**/*.json', function () {
  154. runSequence(['json', 'reload']);
  155. });
  156. gulp.watch(config.src + '/**/*.html', function () {
  157. runSequence(['html', 'reload']);
  158. });
  159. gulp.watch(config.src + '/**/*.scss', function () {
  160. runSequence(['sass', 'reload']);
  161. });
  162. gulp.watch(config.src + '/**/*.js', function () {
  163. runSequence(['js', 'reload']);
  164. });
  165. gulp.watch(config.src + '/**/*.css', function () {
  166. runSequence(['css', 'reload']);
  167. });
  168. gulp.watch(config.src + '/**/*.{png,jpeg,jpg,gif,ico}', function () {
  169. runSequence(['image', 'reload']);
  170. });
  171. gulp.watch([
  172. config.src + '/**/*.txt',
  173. config.src + '/**/*.xml'
  174. ], function () {
  175. runSequence(['copy', 'reload']);
  176. });
  177. });
  178. // 默认任务
  179. gulp.task('default', ['clean'], function () {
  180. gulp.start(['typescript', 'json', 'sass', 'image', 'copy', 'font', 'css', 'js', 'html']);
  181. });
  182. // 产品发布任务
  183. // 主要用于压缩所有的文件
  184. gulp.task('product', ['clean'], function () {
  185. config.product = true;
  186. gulp.start(['typescript', 'json', 'sass', 'image', 'copy', 'font', 'css', 'js', 'html']);
  187. });