Gulp：前端自动化构建工具的使用

公司任务，移动端组件库 pc端组件库（金融行业项目）

移动端项目使用react 技术栈开发 ts jsx的方式，针对业务上提炼一些组件，
这里构建工具 使用了gulp，

一、什么是Gulp？

Gulp是一个基于Node.js的前端自动化构建工具，它使用流式处理（streaming）来构建项目，可以更快地完成构建任务。Gulp通过读取配置文件（通常是gulpfile.js），根据定义的任务（task）自动执行一系列的操作，如编译Sass、less、压缩图片、合并文件等。

二、安装Gulp

npm install gulp --save-dev

三、编写Gulpfile

安装完Gulp后，需要创建一个名为gulpfile.js的文件，用于定义构建任务。这个文件通常放在项目的根目录下。

以下是一个简单的gulpfile.js示例：

javascript
const gulp = require('gulp');  
const sass = require('gulp-less'); // 假设我们使用了gulp-less插件来编译less
  
// 编译lass任务  
function buildStyle() {
  return gulp
    .src(['./src/**/*.less'], {
      base: './src/',
      ignore: ['**/demos/**/*', '**/tests/**/*'],
    })
    .pipe(
      less({
        paths: [path.join(__dirname, 'src')],
        relativeUrls: true,
      })
    )
    .pipe(gulp.dest('./lib/es'))
    .pipe(gulp.dest('./lib/cjs'))
} 
// 构建 ts文件
  function buildES() {
  const tsProject = ts({
    ...tsconfig.compilerOptions,
    module: 'ESNext',
  })
  return gulp
    .src(['src/**/*.{ts,tsx}'], {
      ignore: ['**/demos/**/*', '**/tests/**/*'],
    })
    .pipe(tsProject)
    .pipe(
      babel({
        'plugins': ['./babel-transform-less-to-css'],
      })
    )
    .pipe(gulp.dest('lib/es/'))
}
... 其他任务


// 默认任务，可以执行多个任务  
gulp.task('default', gulp.series('sass')); // 使用gulp.series来顺序执行任务
上面我们定义了一个名为sass的任务，用于编译src/less/目录下的所有Sass文件，并将编译后的CSS文件输出到dist/css/目录。我们还定义了一个默认任务default，它依赖于sass任务，当执行gulp命令时，会按顺序执行sass任务。

四、运行Gulp任务

在命令行中，进入项目根目录，执行以下命令来运行Gulp任务：

bash
npx gulp
或者，如果你全局安装了Gulp，可以直接使用gulp命令。执行上述命令后，Gulp将按照gulpfile.js中定义的任务顺序执行相应的操作。