Merge pull request #10 from kurone-kito/feature/gulp

Internal update: Migrated from npm-script to Gulp

.circleci/config.yml

@@ -1,8 +1,8 @@
 version: 2
 jobs:
   build:
-    branches:
-      only: master
+    # branches:
+    #   only: master
     docker:
       - image: electronuserland/builder:wine-chrome
     working_directory: ~/repo

.eslintrc.yml

@@ -3,17 +3,17 @@ env:
   es6: true
   jest/globals: true
 extends:
-  - 'eslint:recommended'
+  - "eslint:recommended"
   - airbnb
-  - 'plugin:prettier/recommended'
-parser: '@typescript-eslint/parser'
+  - "plugin:prettier/recommended"
+parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaFeatures:
     jsx: true
   ecmaVersion: 2018
   sourceType: module
 plugins:
-  - '@typescript-eslint'
+  - "@typescript-eslint"
   - jest
   - react
 rules:
@@ -29,9 +29,10 @@ rules:
         - ./backstop_data/**/*.?s*
         - ./src/__tests__/*.?s*
         - ./*.config.?s
+        - ./gulpfile.?s
         - ./main.?s
         - ./stories/*.?s
 settings:
   import/resolver:
     webpack:
-      config: ./webpack.config.js
+      config: ./webpack.config.ts

backstop.config.js

@@ -1,5 +1,9 @@
 const request = require('sync-request');
 const queryString = require('query-string');
+const minimist = require('minimist');
+
+const args = minimist(process.argv);
+const port = args.port || 6006;
 
 /**
  * Create URL to stories.
@@ -10,10 +14,10 @@ const queryString = require('query-string');
 const createUrl = ({ kind: selectedKind, name: selectedStory }) => {
   const query = queryString.stringify({ selectedKind, selectedStory });
 
-  return `http://localhost:6006/iframe.html?${query}`;
+  return `http://localhost:${port}/iframe.html?${query}`;
 };
 // @ts-ignore
-const body = request('GET', 'http://localhost:6006/toc.json').getBody();
+const body = request('GET', `http://localhost:${port}/toc.json`).getBody();
 const scenarios = [...JSON.parse(body)].map(row => ({
   label: JSON.stringify(row),
   misMatchThreshold: 0.01,

bin/clean

@@ -5,4 +5,4 @@
 # so it is implemented by a shell script.
 
 cd $(cd $(dirname $0); pwd)/..
-rm -rf dist node_modules
+rm -rf coverage dist logs node_modules storybook-static

bin/clean.cmd

@@ -5,5 +5,8 @@ REM # are broken, the clean up script needs to be workable,
 REM # so it is implemented by a Windows batch script.
 
 CD /d %~dp0\..
+RMDIR /S /Q coverage >NUL 2>&1
 RMDIR /S /Q dist >NUL 2>&1
+RMDIR /S /Q logs >NUL 2>&1
 RMDIR /S /Q node_modules >NUL 2>&1
+RMDIR /S /Q storybook-static >NUL 2>&1

gulpfile.ts

@@ -0,0 +1,79 @@
+import childProcess from 'child_process';
+import fs from 'fs';
+import { dest, series, src, task } from 'gulp';
+import minimist from 'minimist';
+import rmfr from 'rmfr';
+import webpack from 'webpack-stream';
+import webpackConfig from './webpack.config';
+
+const BUILD_CONTENT_OPTIONS = { mode: 'development' };
+const BUILD_BINARY_OPTIONS = { linux: true, macos: false, windows: true };
+const CLEAN_OPTIONS = { logs: false, dist: false, storybook: false };
+
+const args = minimist(process.argv, {
+  default: {
+    ...BUILD_BINARY_OPTIONS,
+    ...BUILD_CONTENT_OPTIONS,
+    ...CLEAN_OPTIONS
+  }
+});
+
+const clean = async (
+  options: Partial<typeof CLEAN_OPTIONS> = CLEAN_OPTIONS
+) => {
+  type KEYS = keyof typeof CLEAN_OPTIONS;
+  const all = (Object.keys(CLEAN_OPTIONS) as KEYS[])
+    .map<boolean>(k => args[k] || options[k])
+    .every(v => !v);
+  const remove = (key: KEYS, targets: string[]) =>
+    all || args[key] || options[key]
+      ? Promise.all(targets.map(target => rmfr(target)))
+      : undefined;
+  await remove('logs', ['converage', 'logs']);
+  await remove('dist', ['dist']);
+  await remove('storybook', ['storybook-static']);
+};
+
+const spawn = (command: string, ...options: string[]) =>
+  new Promise<void>((resolve, reject) => {
+    const p = childProcess.spawn(command, options, { stdio: 'inherit' });
+    p.on('close', resolve);
+    p.on('error', err => {
+      console.error(err);
+      reject(err);
+    });
+  });
+
+const tasksBeforeBuildContent = (...tasks: string[]) => {
+  const production = args.mode === 'production';
+  return series(
+    ...(production ? ['clean'] : []),
+    ...(production || !fs.existsSync('dist') ? ['build:content'] : []),
+    ...tasks
+  );
+};
+
+const buildWebPack = async () => {
+  await clean({ dist: true });
+  const config = webpackConfig({}, args);
+
+  return src(config!.entry as string)
+    .pipe(webpack(config))
+    .pipe(dest(config!.output!.path as string));
+};
+
+const buildElectron = () => {
+  type KEYS = keyof typeof BUILD_BINARY_OPTIONS;
+  const keys = Object.keys(BUILD_BINARY_OPTIONS) as KEYS[];
+
+  return spawn('electron-builder', ...keys.map(k => (args[k] ? `--${k}` : '')));
+};
+
+task('clean', async end => clean().then(end));
+task('build:content', buildWebPack);
+task('build:binary:inner', end => buildElectron().then(end));
+task('build:binary', tasksBeforeBuildContent('build:binary:inner'));
+task('run:electron', end => spawn('electron', './').then(end));
+task('test', end => spawn('jest', '--coverage').then(end));
+
+task('default', tasksBeforeBuildContent('run:electron'));