手动使用gulp4.0配合rollup搭建typescript 写一个自己的一个开源库(起步构建自动化处理，热更新浏览器)

为什么要使用gulp+rollup模式

我尝试过gulp+webpack，gulp+browerify~最后决定用gulp+rollup，gulp既然已经4.0都出了很久了我还停留在2的版本，所以此次就使用4开始吧

基于面向对象开发

编辑器它是简单可定制的，可用于大多数移动端（表示兼容让我很蛋疼）和pc端、我希望它的插件是可插拔的，对于任何一个开发者而言都是比较容易去开发一个新的插件的，对于自己的项目。我会将文档写的细而丰富。

do what

我想自己写一个开源的富文本编辑器，这算是一个开始，它使用Typescript来编写，因为我希望在以后会有很多的人去使用它，同时，也是对自己学习这么多年js的一个总结，用过ckeditor，simeditor，wangeditor，ueditor，tinyeditor，等等很多优质的富文本编辑器，发现都不太好用，wangeditor我会吸取他的经验

why do

因为自己打算写一个开源库出来的，不想使用webpack去做一个bundle或者browerify去bundle(为什么要bundle我在后边会说)，而且要使用我们伟大的typescript 来编写一个自己开源的富文本编辑器，这是一个配置文件吧，当然他不完善，但是可以作为一个普通的开发了。后续会补充完善的
首先我们写的代码会被babel转换成commonJS规范的格式，这种格式在浏览器是不能够执行的，如果你的代码中用到了import或者export或者require 这些都是不行的，我们要使用typescript来写项目的话呢，比较好的是我们可以在tsconfig中配置这个东西
javascript "target": "es5"
对，加上这个就好了，就可以转换成你想要的代码了，但是这样浏览器还是不能够执行，因为没有被bundle，所以我们需要一个插件来帮我们完成打包后的代码转换成浏览器可以执行的代码，也就是rollup-plugin-typescript这个插件就可以了。然后在部署一下浏览器热更新，最开始我考虑的是使用gulp+webpack来实现多入口配置打包，但是打包后的代码包含webpack的头声明文件，你们使用过vue的全家桶就知道，打包后的代码包含webpack对于export、require等的处理，而且有个很明显的名字，webpack开头的。我是很拒绝的，我希望代码是干净的，所以~

// const buildConfig = require('./webpack.config')

const gulp = require('gulp')
const path = require('path')
const webpack = require('webpack')
const webpackStream = require('webpack-stream')
const pump = require('pump')
const del = require('del')
const less = require('gulp-less')
const buildConfig = require('./webpack.config')
const rollup = require('rollup')
const rollupTypescript = require('rollup-plugin-typescript')
const browserSync = require("browser-sync").create(),reload=browserSync.reload;
const ugify = require('gulp-uglify')

// 后续会对这个做环境区分
const devEnv = ['development','production'];

const cleanDistDir = mode => () => {
  return devEnv.includes(mode) ? del(['./dist']): undefined
}
// 弃用
const buildJs  = mode => done => {
  const config = buildConfig.buildSingleWebpackConfig('./src/js/test/index.ts','test.js')
   pump([
      gulp.src('./src/js/**/*.ts'),
      //基于生成环境需要配置黑盒streamMode webpackStream(streamMode,webpack)， 之前有写过webpack的模式~
      webpackStream(config, webpack),
      gulp.dest('./dist/js')
    ], done) 
}

// 构建css
const buildCss   = done => {
  pump([
    gulp.src('./src/skin/light/main.less'),
    less(),
    gulp.dest('./dist/css/'),
    reload({stream:true})
  ],done)
}
/**
 *  多插件js动态配置转换多入口js文件
 * @param { string } entry  必须
 * @param { string } outDir 必须
 * @param { string } moduleName 必须
 */
const rollupBuild = (entry,outDir,moduleName)  => {
  return  rollup.rollup({
    input: entry,
    plugins: [
      rollupTypescript()
    ]
  }).then( bundle => {
    return bundle.write({
      file: outDir,
      format:'es',
      name: moduleName,
      sourcemap: true
    })
  }).then(()=>{
    reload({stream:true})
  })
}

const buildHTML = done => {
  pump([
    gulp.src('./test.html'),
    gulp.dest('./dist'),
    reload({stream:true})
  ],done)
}

const buildTs = done => {
  //这里配置多页面js配置打包就可以了，传入值改为数组拼接url可以实现多入口插件js打包
  rollupBuild('./src/core/Main.ts', './dist/TEditor.js', 'TEditor')
  done()
}

const browerServer = done => {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  }),
  gulp.watch('./src/core/**/*.ts',gulp.series(buildTs))
  gulp.watch('./*.html',gulp.series(buildHTML))
  gulp.watch('./src/skin/**/*.less',gulp.series(buildCss))
  done()
}
gulp.task('default',gulp.series(buildTs, buildCss, buildHTML,browerServer))

写的不好别喷，看看就好啦~