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