ui: remove gulp

packages/ui-default/build/config/gulp.js

@@ -1,81 +0,0 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable guard-for-in */
-/* eslint-disable import/no-extraneous-dependencies */
-import chalk from 'chalk';
-import log from 'fancy-log';
-import gulp from 'gulp';
-import iconfont from 'gulp-iconfont';
-import gulpif from 'gulp-if';
-import plumber from 'gulp-plumber';
-import svgmin from 'gulp-svgmin';
-import _ from 'lodash';
-import vinylBuffer from 'vinyl-buffer';
-import nunjucks from '../plugins/gulpNunjucks';
-import vjTouch from '../plugins/gulpTouch';
-
-let isInWatchMode = false;
-export const tasks = {};
-const iconTimestamp = 1577836800; // 2020-1-1
-
-function handleWatchChange(name, r = 300) {
-  return _.debounce((ev) => {
-    log('File %s: %s', chalk.yellow(ev.type), ev.path);
-    tasks[name]();
-  }, r);
-}
-
-function offsetMtimeAtFirstBuild() {
-  // Offset the mtime at first build to
-  // workaround webpack/watchpack issue #25.
-  return gulpif(!isInWatchMode, vjTouch(~~((Date.now() - 30 * 1000) / 1000)));
-}
-
-export default function ({ errorHandler }) {
-  let iconfontTemplateArgs = null;
-
-  tasks['iconfont:template'] = () => gulp
-    .src('misc/icons/template/*.styl')
-    .pipe(nunjucks(iconfontTemplateArgs))
-    .pipe(gulp.dest('misc/.iconfont'))
-    .pipe(offsetMtimeAtFirstBuild());
-
-  tasks.iconfont = () => gulp
-    .src('misc/icons/*.svg')
-    .pipe(plumber({ errorHandler }))
-    .pipe(svgmin())
-    .pipe(gulp.dest('misc/icons'))
-    .pipe(offsetMtimeAtFirstBuild())
-    .pipe(iconfont({
-      fontHeight: 1000,
-      prependUnicode: false,
-      descent: 6.25 / 100 * 1000,
-      fontName: 'vj4icon',
-      formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
-      timestamp: iconTimestamp,
-    }))
-    .on('glyphs', (glyphs, options) => {
-      iconfontTemplateArgs = { glyphs, options };
-      tasks['iconfont:template']();
-    })
-    .pipe(gulp.dest('misc/.iconfont'))
-    .pipe(vinylBuffer())
-    .pipe(offsetMtimeAtFirstBuild());
-
-  tasks.watch = () => {
-    isInWatchMode = true;
-    gulp.watch('misc/icons/*.svg', handleWatchChange('iconfont'));
-  };
-
-  for (const key in tasks) {
-    // gulp4 uses function name directly as task name
-    Object.defineProperty(tasks[key], 'name', {
-      value: key,
-      configurable: true,
-    });
-    tasks[key] = gulp.series(tasks[key]);
-  }
-
-  tasks.default = gulp.series(gulp.parallel(tasks.iconfont));
-
-  return tasks;
-}

packages/ui-default/build/main.ts

@@ -2,15 +2,13 @@
 import { size } from '@hydrooj/utils/lib/utils';
 import cac from 'cac';
 import chalk from 'chalk';
-import log from 'fancy-log';
 import fs from 'fs-extra';
 import { globbySync } from 'globby';
-import gulp from 'gulp';
 import path from 'path';
+import svgtofont from 'svgtofont';
 import webpack, { Stats } from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import pkg from '../package.json';
-import gulpConfig from './config/gulp';
 import webpackConfig from './config/webpack';
 import root from './utils/root';
 
@@ -66,14 +64,15 @@ async function runWebpack({
       const data = await fs.stat(path.join(root('public'), file.name));
       const key = file.name
         .replace(/\.[a-f0-9]{6}\.chunk\./, '.chunk.')
-        .replace(/\.[a-f0-9]{6}\.worker\./, '.worker.');
+        .replace(/\.[a-f0-9]{6}\.worker\./, '.worker.')
+        .replace(/\.[a-f0-9]{6}\.e\.js/, '.e.js');
       stats[key] = data.size;
     }
     const statsPath = root('__bundleInfo');
     let oldTotal = 0;
     let newTotal = 0;
     if (fs.existsSync(statsPath)) {
-      log('Compare to last production bundle:');
+      console.log('Compare to last production bundle:');
       const oldStats = JSON.parse(await fs.readFile(statsPath, 'utf-8')) as Record<string, number>;
       for (const key in stats) oldStats[key] ||= 0;
       const entries: [filename: string, orig: number, curr: number][] = [];
@@ -89,40 +88,37 @@ async function runWebpack({
         const diff = 100 * (curr - orig) / orig;
         if (Math.abs(diff) < 0.01 && name !== 'Total') continue;
         const color = orig > curr ? chalk.green : chalk.red;
-        log(color(`${name.padStart(35)} ${size(orig).padStart(10)} -> ${size(curr).padEnd(10)} (${diff.toPrecision(5)}%)`), chalk.reset());
+        console.log(color(`${name.padStart(35)} ${size(orig).padStart(10)} -> ${size(curr).padEnd(10)} (${diff.toPrecision(5)}%)`), chalk.reset());
       }
     }
     await fs.writeFile(statsPath, JSON.stringify(stats));
   }
 }
 
-async function runGulp() {
-  function errorHandler(err) {
-    log(chalk.red('Error: %s'), chalk.reset(err.toString() + err.stack));
-    process.exit(1);
-  }
-  const gulpTasks = gulpConfig({ errorHandler });
-  return new Promise((resolve) => {
-    const taskList = {};
-
-    gulp.on('start', ({ uid, name }) => {
-      log(chalk.blue('Starting task: %s'), chalk.reset(name));
-      taskList[uid] = true;
-    });
-    gulp.on('stop', ({ uid, name }) => {
-      log(chalk.green('Finished: %s'), chalk.reset(name));
-      taskList[uid] = false;
-      if (Object.values(taskList).filter((b) => b).length === 0) resolve(null);
-    });
-    gulpTasks.default();
-  });
-}
-
 async function main() {
   const dir = process.cwd();
   process.chdir(root());
-  if (argv.options.gulp) await runGulp();
-  else {
+  if (argv.options.iconfont) {
+    await svgtofont({
+      src: root('misc/icons'),
+      dist: root('misc/.iconfont'),
+      styleTemplates: root('misc/icons/template'),
+      classNamePrefix: 'icon',
+      fontName: 'hydro-icons',
+      css: true,
+      startUnicode: 0xea01,
+      svg2ttf: {
+        timestamp: 1577836800, // 2020-1-1
+      },
+      svgicons2svgfont: {
+        fontHeight: 1000,
+        descent: 6.25 / 100 * 1000,
+        normalize: true,
+      },
+    });
+    const file = fs.readFileSync(root('misc/.iconfont/webicon.inc.styl'), 'utf-8');
+    fs.writeFileSync(root('misc/.iconfont/webicon.inc.styl'), file.replace(/:/g, ' ='));
+  } else {
     await runWebpack(argv.options as any);
     if (fs.existsSync('public/theme.css')) {
       fs.copyFileSync('public/theme.css', `public/theme-${pkg.version}.css`);

packages/ui-default/build/plugins/gulpNunjucks.js

@@ -1,27 +0,0 @@
-import nunjucks from 'nunjucks';
-import through from 'through2';
-
-export default function compile(data, options = {}) {
-  return through.obj(function (file, encoding, callback) {
-    if (file.isNull()) {
-      callback(null, file);
-      return;
-    }
-    const context = { ...data, ...file.data };
-    const filePath = file.path;
-    const env = options.env || new nunjucks.Environment(new nunjucks.FileSystemLoader(file.base), options);
-    if (options.filters && !options.env) {
-      for (const key of Object.keys(options.filters)) {
-        env.addFilter(key, options.filters[key]);
-      }
-    }
-    try {
-      file.contents = Buffer.from(env.renderString(file.contents.toString(), context));
-      file.extname = '.styl';
-      this.push(file);
-    } catch (error) {
-      this.emit('error', new Error(`gulp-nunjucks ${error} ${filePath}`));
-    }
-    callback();
-  });
-}

packages/ui-default/build/plugins/gulpTouch.js

@@ -1,35 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import fs from 'fs-extra';
-import PluginError from 'plugin-error';
-import through from 'through2';
-
-export default function touch(mtime) {
-  async function touchFile(file) {
-    const fd = await fs.open(file.path, 'a');
-    try {
-      await fs.futimes(fd, mtime, mtime);
-    } finally {
-      await fs.close(fd);
-    }
-  }
-
-  function processStream(file, encoding, callback) {
-    if (file.isNull()) {
-      callback();
-      return;
-    }
-    if (file.isStream()) {
-      this.emit('error', new PluginError('gulpTouch', 'Stream not supported'));
-      callback();
-      return;
-    }
-    touchFile(file)
-      .catch((err) => this.emit('error', err))
-      .then(() => {
-        this.push(file);
-        callback();
-      });
-  }
-
-  return through.obj(processStream);
-}