gulpfile.js

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')
    })
})