react-ui/gulpfile.ts at master · wont-org/react-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import {
    src, dest, series, parallel,
} from 'gulp'
import babel from 'gulp-babel'
import { exec } from 'child_process'
import rimraf from 'rimraf'
import less from 'gulp-less'
import autoprefixer from 'gulp-autoprefixer'
import cssnano from 'gulp-cssnano'
import through2 from 'through2'
import {
    lessFiles,
    paths,
    genEntry,
    getFileName,
    getDirName,
} from './scripts/utils'
// import { buildAllModule as rollup } from './scripts/build'

const { outputES, outputCJS } = paths

const scripts = [
    'components/**/*.[jt]s?(x)',
    '!**/__tests__/**/*.[jt]s?(x)',
    '!**/?(*.)+(spec|test).[tj]s?(x)',
    '!components/**/*.stories.tsx',
]

function copyLess() {
    return src(lessFiles)
        .pipe(
            through2.obj(function (file, encoding, next) {
                const dirName = getDirName(file.path)
                const fileName = getFileName(file.path, '.less')
                const reg = new RegExp(`${fileName}.less$`)
                const name = ['mixins'].includes(dirName)
                    ? `style/${dirName}`
                    : `${dirName}`
                const lessPath = file.path.replace(
                    reg,
                    `${name}/${fileName}.less`,
                )
                file.path = lessPath
                this.push(file)
                next()
            }),
        )
        .pipe(dest(outputES))
        .pipe(dest(outputCJS))
}

function less2css() {
    return src(lessFiles)
        .pipe(less())
        .pipe(autoprefixer())
        .pipe(cssnano())
        .pipe(
            through2.obj(function (file, encoding, next) {
                const name = getDirName(file.path)
                const reg = /index.css$/
                if (reg.test(file.path)) {
                    const cssPath = file.path.replace(reg, `${name}/index.css`)
                    file.path = cssPath
                    this.push(file)
                }
                next()
            }),
        )
        .pipe(dest(outputES))
        .pipe(dest(outputCJS))
}

function cssInjection(content) {
    return content.replace(/\.less/g, '.css')
}

function compileScripts(babelEnv, destDir) {
    process.env.BABEL_ENV = babelEnv
    console.log('scripts', scripts)
    return src(scripts)
        .pipe(babel())
        .pipe(
            through2.obj(function (file, encoding, next) {
                const content = file.contents.toString(encoding)
                file.contents = Buffer.from(cssInjection(content))
                this.push(file)
                next()
            }),
        )
        .pipe(dest(destDir))
}

// 不必使用async，避免影响环境变量
function compileESM() {
    return compileScripts('esm', outputES)
}
function compileCJS() {
    return compileScripts('cjs', outputCJS)
}

async function genTypes() {
    exec('npm run types')
}

const buildScripts = series(genTypes, compileESM, compileCJS)

async function rmLib() {
    rimraf.sync(paths.outputES)
    rimraf.sync(paths.outputCJS)
}

exports.default = series(
    rmLib,
    genEntry,
    parallel(
        buildScripts,
        // rollup,
        less2css,
        copyLess,
    ),
)