const path = require('path') const fs = require('fs') const gulp = require('gulp') const rollup = require('rollup') const uglify = require('gulp-uglify') const sourcemaps = require('gulp-sourcemaps') const rename = require('gulp-rename') const less = require('gulp-less') const concat = require('gulp-concat') const cssmin = require('gulp-cssmin') const eslint = require('rollup-plugin-eslint') const postcss = require('gulp-postcss') const autoprefixer = require('autoprefixer') const cssgrace = require('cssgrace') const resolve = require('rollup-plugin-node-resolve') const babel = require('rollup-plugin-babel') const gulpReplace = require('gulp-replace') // 拷贝 fonts 文件 gulp.task('copy-fonts', () => { gulp.src('./src/fonts/*') .pipe(gulp.dest('./release/fonts')) }) // 处理 css gulp.task('css', () => { gulp.src('./src/less/**/*.less') .pipe(less()) // 产出的未压缩的文件名 .pipe(concat('wangEditor.css')) // 配置 postcss .pipe(postcss([ autoprefixer, cssgrace ])) // 将 css 引用的字体文件转换为 base64 格式 .pipe(gulpReplace( /'fonts\/w-e-icon\..+?'/gm, function (fontFile) { // fontFile 例如 'fonts/w-e-icon.eot?paxlku' fontFile = fontFile.slice(0, -1).slice(1) fontFile = fontFile.split('?')[0] var ext = fontFile.split('.')[1] // 读取文件内容,转换为 base64 格式 var filePath = path.resolve(__dirname, 'release', fontFile) var content = fs.readFileSync(filePath) var base64 = content.toString('base64') // 返回 return 'data:application/x-font-' + ext + ';charset=utf-8;base64,' + base64 })) // 产出文件的位置 .pipe(gulp.dest('./release')) // 产出的压缩后的文件名 .pipe(rename('wangEditor.min.css')) .pipe(cssmin()) .pipe(gulp.dest('./release')) }) // 处理 JS gulp.task('script', () => { // rollup 打包 js 模块 return rollup.rollup({ // 入口文件 entry: './src/js/index.js', plugins: [ // 对原始文件启动 eslint 检查,配置参见 ./.eslintrc.json eslint(), resolve(), babel({ exclude: 'node_modules/**' // only transpile our source code }) ] }).then(bundle => { bundle.write({ // 产出文件使用 umd 规范(即兼容 amd cjs 和 iife) format: 'umd', // iife 规范下的全局变量名称 moduleName: 'wangEditor', // 产出的未压缩的文件名 dest: './release/wangEditor.js' }).then(() => { // 待 rollup 打包 js 完毕之后,再进行如下的处理: gulp.src('./release/wangEditor.js') // inline css .pipe(gulpReplace(/__INLINE_CSS__/gm, function () { // 读取 css 文件内容 var filePath = path.resolve(__dirname, 'release', 'wangEditor.css') var content = fs.readFileSync(filePath).toString('utf-8') // 替换 \n \ ' 三个字符 content = content.replace(/\n/g, '').replace(/\\/g, '\\\\').replace(/'/g, '\\\'') return content })) .pipe(gulp.dest('./release')) .pipe(sourcemaps.init()) // 压缩 .pipe(uglify()) // 产出的压缩的文件名 .pipe(rename('wangEditor.min.js')) // 生成 sourcemap .pipe(sourcemaps.write('')) .pipe(gulp.dest('./release')) }) }) }) // 默认任务配置 gulp.task('default', () => { gulp.run('copy-fonts', 'css', 'script') // 监听 js 原始文件的变化 gulp.watch('./src/js/**/*.js', () => { gulp.run('script') }) // 监听 css 原始文件的变化 gulp.watch('./src/less/**/*.less', () => { gulp.run('css', 'script') }) // 监听 icon.less 的变化,变化时重新拷贝 fonts 文件 gulp.watch('./src/less/icon.less', () => { gulp.run('copy-fonts') }) })