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

寫的很差別噴，看看就好啦~