tempo/ui/gulpfile.js

const { watch, series, parallel } = require('gulp');
const gulp = require('gulp');

/** JS and TS */
const ts = require('gulp-typescript');
const apiExtractor = require('@microsoft/api-extractor');

const tsDefaultReporter = ts.reporter.defaultReporter();
const babel = require('gulp-babel');
const sourcemaps = require('gulp-sourcemaps');

/** css modules */
const gulp_tcm = require('gulp-typed-css-modules');
const autoprefixer = require('autoprefixer')
const postcss = require('gulp-postcss')
const compileSass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');

/** file */
const concat = require('gulp-concat');
const rimraf = require('rimraf');
const through2 = require("through2");
const merge2 = require('merge2');
const path = require('path');
const compileLess = require('./buildTools/transformLess');
const babelConfig = require('./babel.config.js');

const cwd = process.cwd();
const dir = path.join(cwd, './lib/');

/** functions */
function typedCss() {
  return gulp.src([`${dir}/**/*.css`], {
    base: '.',
  })
    .pipe(gulp_tcm({ quiet: true }))
    .pipe(gulp.dest("./"));
}

function autoprefixCss() {
  return gulp.src([`${dir}/**/*.css`], {
    base: '.',
  })
    .pipe(postcss([autoprefixer()]))
    .pipe(gulp.dest('./'))
}

// Sass must come before Less
function combineComponentsCss() {
  return gulp.src([`${dir}/styles/ComponentsSass.css`, `${dir}/styles/ComponentsLess.css`])
    .pipe(concat('Components.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest(`${dir}/styles/`));
}

// Sass must come before Less
function combineBaseCss() {
  return gulp.src([`${dir}/styles/BaseSass.css`, `${dir}/styles/BaseLess.css`])
    .pipe(concat('Base.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest(`${dir}/styles/`));
}

function compile() {
  rimraf.sync(dir);
  const less = gulp
    .src(['src/**/*.less'])
    .pipe(
      through2.obj(function (file, encoding, next) {
        this.push(file.clone());

        compileLess(file.path)
          .then(css => {
            file.contents = Buffer.from(css);
            file.path = file.path.replace(/\.less$/, '.css');
            this.push(file);
            next();
          })
          .catch(e => {
            console.error(e);
          });
      })
    )
    .pipe(gulp.dest(dir));

  const assets = gulp
    .src(['src/**/*.@(png|svg)'])
    .pipe(gulp.dest(dir));

  const sass = gulp
    .src(['src/**/*.scss'])
    .pipe(compileSass({ includePaths: ['./node_modules'], quietDeps: true }).on('error', compileSass.logError))
    .pipe(gulp.dest(dir));

  const error = 0;
  const source = ['src/**/*.tsx', 'src/**/*.ts', '!src/**/*.test.*'];

  const tsProject = ts.createProject('tsconfig.json')

  const tsResult = gulp.src(source).pipe(
    tsProject()
  );
  function check() {
    if (error && !argv['ignore-error']) {
      process.exit(1);
    }
  }

  tsResult.on('finish', check);
  tsResult.on('end', check);
  const tsFilesStream = babelify(tsResult.js);
  const tsd = tsResult.dts.pipe(gulp.dest(dir));
  return merge2([less, tsFilesStream, tsd, assets, sass]);
}

function babelify(js) {
  delete babelConfig.cacheDirectory;

  const stream = js
    .pipe(sourcemaps.init())
    .pipe(babel(babelConfig))
    .pipe(sourcemaps.write('.'));

  return stream.pipe(gulp.dest(dir));
}

function tsDocGen(cb) {
  const apiExtractorJsonPath = path.join(cwd, 'api-extractor.json');

  // Load and parse the api-extractor.json file
  const extractorConfig = apiExtractor.ExtractorConfig.loadFileAndPrepare(apiExtractorJsonPath);

  // Invoke API Extractor
  const extractorResult = apiExtractor.Extractor.invoke(extractorConfig, {
    // Equivalent to the "--local" command-line parameter
    localBuild: true,

    // Equivalent to the "--verbose" command-line parameter
    showVerboseMessages: true
  });

  if (extractorResult.succeeded) {
    console.error(`API Extractor completed successfully`);
  } else {
    console.error(`API Extractor completed with ${extractorResult.errorCount} errors`
      + ` and ${extractorResult.warningCount} warnings`);
  }

  cb();
}

function buildAndWatch(cb) {
  watch(['src/**/*.tsx', 'src/**/*.ts', 'src/**/*.scss', 'src/**/*.less'], { ignoreInitial: false },
    series(compile, autoprefixCss, typedCss, parallel(combineComponentsCss, combineBaseCss, tsDocGen)));
  cb();
}

module.exports.default = series(compile, autoprefixCss, typedCss, combineComponentsCss, combineBaseCss, tsDocGen);
module.exports.watch = buildAndWatch;
module.exports.tsDocGen = tsDocGen;