gulpfile.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. const path = require('path')
  2. const fs = require('fs')
  3. const gulp = require('gulp')
  4. const rollup = require('rollup')
  5. const uglify = require('gulp-uglify')
  6. const sourcemaps = require('gulp-sourcemaps')
  7. const rename = require('gulp-rename')
  8. const less = require('gulp-less')
  9. const concat = require('gulp-concat')
  10. const cssmin = require('gulp-cssmin')
  11. const eslint = require('rollup-plugin-eslint')
  12. const postcss = require('gulp-postcss')
  13. const autoprefixer = require('autoprefixer')
  14. const cssgrace = require('cssgrace')
  15. const resolve = require('rollup-plugin-node-resolve')
  16. const babel = require('rollup-plugin-babel')
  17. const gulpReplace = require('gulp-replace')
  18. // 拷贝 fonts 文件
  19. gulp.task('copy-fonts', () => {
  20. gulp.src('./src/fonts/*')
  21. .pipe(gulp.dest('./release/fonts'))
  22. })
  23. // 处理 css
  24. gulp.task('css', () => {
  25. gulp.src('./src/less/**/*.less')
  26. .pipe(less())
  27. // 产出的未压缩的文件名
  28. .pipe(concat('wangEditor.css'))
  29. // 配置 postcss
  30. .pipe(postcss([
  31. autoprefixer,
  32. cssgrace
  33. ]))
  34. // 将 css 引用的字体文件转换为 base64 格式
  35. .pipe(gulpReplace( /'fonts\/w-e-icon\..+?'/gm, function (fontFile) {
  36. // fontFile 例如 'fonts/w-e-icon.eot?paxlku'
  37. fontFile = fontFile.slice(0, -1).slice(1)
  38. fontFile = fontFile.split('?')[0]
  39. var ext = fontFile.split('.')[1]
  40. // 读取文件内容,转换为 base64 格式
  41. var filePath = path.resolve(__dirname, 'release', fontFile)
  42. var content = fs.readFileSync(filePath)
  43. var base64 = content.toString('base64')
  44. // 返回
  45. return 'data:application/x-font-' + ext + ';charset=utf-8;base64,' + base64
  46. }))
  47. // 产出文件的位置
  48. .pipe(gulp.dest('./release'))
  49. // 产出的压缩后的文件名
  50. .pipe(rename('wangEditor.min.css'))
  51. .pipe(cssmin())
  52. .pipe(gulp.dest('./release'))
  53. })
  54. // 处理 JS
  55. gulp.task('script', () => {
  56. // rollup 打包 js 模块
  57. return rollup.rollup({
  58. // 入口文件
  59. entry: './src/js/index.js',
  60. plugins: [
  61. // 对原始文件启动 eslint 检查,配置参见 ./.eslintrc.json
  62. eslint(),
  63. resolve(),
  64. babel({
  65. exclude: 'node_modules/**' // only transpile our source code
  66. })
  67. ]
  68. }).then(bundle => {
  69. bundle.write({
  70. // 产出文件使用 umd 规范(即兼容 amd cjs 和 iife)
  71. format: 'umd',
  72. // iife 规范下的全局变量名称
  73. moduleName: 'wangEditor',
  74. // 产出的未压缩的文件名
  75. dest: './release/wangEditor.js'
  76. }).then(() => {
  77. // 待 rollup 打包 js 完毕之后,再进行如下的处理:
  78. gulp.src('./release/wangEditor.js')
  79. // inline css
  80. .pipe(gulpReplace(/__INLINE_CSS__/gm, function () {
  81. // 读取 css 文件内容
  82. var filePath = path.resolve(__dirname, 'release', 'wangEditor.css')
  83. var content = fs.readFileSync(filePath).toString('utf-8')
  84. // 替换 \n \ ' 三个字符
  85. content = content.replace(/\n/g, '').replace(/\\/g, '\\\\').replace(/'/g, '\\\'')
  86. return content
  87. }))
  88. .pipe(gulp.dest('./release'))
  89. .pipe(sourcemaps.init())
  90. // 压缩
  91. .pipe(uglify())
  92. // 产出的压缩的文件名
  93. .pipe(rename('wangEditor.min.js'))
  94. // 生成 sourcemap
  95. .pipe(sourcemaps.write(''))
  96. .pipe(gulp.dest('./release'))
  97. })
  98. })
  99. })
  100. // 默认任务配置
  101. gulp.task('default', () => {
  102. gulp.run('copy-fonts', 'css', 'script')
  103. // 监听 js 原始文件的变化
  104. gulp.watch('./src/js/**/*.js', () => {
  105. gulp.run('script')
  106. })
  107. // 监听 css 原始文件的变化
  108. gulp.watch('./src/less/**/*.less', () => {
  109. gulp.run('css', 'script')
  110. })
  111. // 监听 icon.less 的变化,变化时重新拷贝 fonts 文件
  112. gulp.watch('./src/less/icon.less', () => {
  113. gulp.run('copy-fonts')
  114. })
  115. })