手动使用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))

写的很差别喷，看看就好啦~