remove main option, add some utils specs

bin/cmds/build.js

@@ -7,9 +7,14 @@ module.exports = {
   command: build.command,
   description: build.description,
   builder: function(yargs) {
-    yargs.options(build.options).config(config).help('help')
+    yargs
+      .options(build.options)
+      .config(config)
+      .help('help')
   },
   handler: function(argv) {
-    require('../../src/tasks').build(argv)
+    require('../../src/tasks')
+      .build(argv)
+      .catch(e => {})
   },
 }

bin/cmds/dev.js

@@ -14,9 +14,8 @@ module.exports = {
     if (typeof argv.proxy === 'string') {
       argv.proxy = [argv.proxy]
     }
-
     require('../../src/tasks')
       .dev(argv)
-      .catch(() => {})
+      .catch(e => {})
   },
 }

bin/cmds/init.js

@@ -13,6 +13,6 @@ module.exports = {
   handler: function(argv) {
     require('../../src/tasks')
       .init(argv)
-      .catch(() => {})
+      .catch(e => {})
   },
 }

package.json

@@ -70,6 +70,7 @@
     "husky": "^0.14.3",
     "lint-staged": "^4.0.4",
     "mocha": "^3.5.0",
+    "mute": "^2.0.6",
     "nyc": "^11.1.0",
     "portscanner": "^2.1.1",
     "request-promise-native": "^1.0.4",

src/defaults.js

@@ -13,7 +13,6 @@ const build = {
 }
 
 const dev = {
-  main,
   stylesheets,
   html,
   host,

src/tasks/build.js

@@ -6,7 +6,6 @@ const elmExtractAssets = require('gulp-elm-extract-assets')
 const flatten = require('gulp-flatten')
 const gulp = require('gulp')
 const gulpif = require('gulp-if')
-const ora = require('ora')
 const path = require('path')
 const postcss = require('gulp-postcss')
 const postcssUrl = require('postcss-url')
@@ -17,7 +16,10 @@ const urljoin = require('url-join')
 const xxh = require('xxhashjs')
 
 const defaults = require('../defaults').build
-const { installPackages, spacer, validateParam } = require('./utils')
+const { initializeSpinner, installPackages, validateParam } = require('./utils')
+
+// global reference to CLI spinner
+const spinner = initializeSpinner()
 
 const getHash = contents =>
   xxh
@@ -127,70 +129,53 @@ const build = options => {
   const opts = Object.assign({}, defaults, options)
 
   // CLI spinner
-  const spinner = ora()
-  const spinnerSpacer = () =>
-    spinner.stopAndPersist({ symbol: spacer(), text: ' ' })
-  spinner.text = 'old builds are now being cleaned'
-  spinner.start()
+  spinner.next('old builds are being cleaned')
 
   return del(opts.outputPath)
     .then(() => {
-      spinnerSpacer()
       spinner.succeed('old builds cleaned')
-      spinnerSpacer()
-      spinner.text = 'elm-package install is starting'
-      spinner.start()
-
-      installPackages().catch(e => {
-        spinnerSpacer()
-        spinner.fail('elm-package install has failed')
-        spinnerSpacer()
-        throw e
+      spinner.next('elm-package install is starting')
+
+      return installPackages().catch(e => {
+        throw 'elm-package install has failed'
       })
     })
     .then(() => {
       spinner.succeed('elm-package install has completed')
-      spinnerSpacer()
-      spinner.text = 'css is now compiling'
-      spinner.start()
+      spinner.next('css is now compiling')
 
       return buildCss(
         opts.stylesheets,
         opts.outputPath,
         opts.publicPath,
         opts.cwd
       ).catch(e => {
-        spinnerSpacer()
-        spinner.fail('css compilation has failed')
-        spinnerSpacer()
-        throw e
+        throw 'stylesheets failed to compile'
       })
     })
     .then(() => {
-      spinnerSpacer()
       spinner.succeed('css has been compiled')
-      spinnerSpacer()
-      spinner.text = 'main application is now compiling'
-      spinner.start()
+      spinner.next('main application is now compiling')
 
       return buildMain(
         opts.main,
         opts.outputPath,
         opts.publicPath,
         opts.cwd
       ).catch(e => {
-        spinnerSpacer()
-        spinner.fail('main application compilation has failed')
-        spinnerSpacer()
-        throw e
+        throw 'main application failed to compile'
       })
     })
     .then(() => {
-      spinnerSpacer()
+      spinner.space()
       spinner.succeed('main application has been compiled')
-      spinnerSpacer()
+      spinner.space()
+    })
+    .catch(e => {
+      spinner.space()
+      spinner.fail(e)
+      spinner.space()
     })
-    .catch(e => {})
 }
 
 module.exports = {

src/tasks/dev.js

@@ -16,7 +16,6 @@ const {
   exists,
   initializeSpinner,
   installPackages,
-  spacer,
   validateParam,
 } = require('./utils')
 
@@ -98,6 +97,7 @@ const htmlCompiler = (bs, html) => (request, response, next) => {
       .catch(e => {
         response.write(e)
         response.end()
+        throw e
       })
       .then(() =>
         createWatcher(
@@ -106,10 +106,7 @@ const htmlCompiler = (bs, html) => (request, response, next) => {
           dep => !stylesheetsDeps.includes(dep),
           bs,
           path.join(process.cwd(), request.url)
-        ).catch(e => {
-          console.error('=============')
-          console.error(e)
-        })
+        )
       )
   } else {
     next()
@@ -241,31 +238,44 @@ const createWatcher = (onChange, onDeps, filter, bs, entry) => {
       .then(deps => {
         onDeps(deps)
 
-        console.log(deps)
-
         const watcher = bs.watch(['!elm-stuff', ...deps])
 
-        // watcher.on('change', file => {
-        //   if (filter(file)) {
-        //     // stop watching temporarily
-        //     watcher && watcher.close()
-        //
-        //     // trigger on change
-        //     onChange(file)
-        //
-        //     // start watching again
-        //     createWatcher(onChange, onDeps, filter, bs, entry)
-        //   }
-        // })
+        watcher.on('change', file => {
+          if (filter(file)) {
+            // stop watching temporarily
+            watcher && watcher.close()
+
+            // trigger on change
+            onChange(file)
+
+            // start watching again
+            createWatcher(onChange, onDeps, filter, bs, entry)
+          }
+        })
 
         resolve(watcher)
       })
-      .catch(e => {
-        throw new Error(`could not find ${entry}`)
-      })
+      .catch(reject)
   )
 }
 
+const compileCss = (stylesheets, dir) =>
+  elmCss(process.cwd(), stylesheets, dir)
+    .then(() => {
+      setTimeout(() => {
+        spinner.space()
+        spinner.succeed('css has been compiled')
+        spinner.space()
+      })
+    })
+    .catch(e => {
+      setTimeout(() => {
+        spinner.space()
+        spinner.fail(`elm-css ${e.message}`, false)
+        spinner.space()
+      })
+    })
+
 const dev = options => {
   const opts = Object.assign({}, defaults, options)
   const tmpDir = tmp.dirSync({ unsafeCleanup: true })
@@ -283,9 +293,7 @@ const dev = options => {
         spinner.succeed('elm-package install has completed')
         spinner.next('elm-reactor is starting')
 
-        return startReactor(opts.reactorHost, opts.reactorPort).catch(e => {
-          spinner.fail(e)
-        })
+        return startReactor(opts.reactorHost, opts.reactorPort)
       })
       // then start browser-sync
       .then(() => {
@@ -304,34 +312,28 @@ const dev = options => {
           spinner.fail(e)
         })
       })
-      .then(bs => {
+      .then(({ bs, port }) => {
         spinner.succeed('browser-sync is now started')
 
         return Promise.all([
-          Promise.resolve(bs.port),
+          Promise.resolve(port),
           // check if our stylesheet exists
           exists(opts.stylesheets)
             .then(() => {
               // compile stylesheet
               spinner.next('css is now compiling')
 
-              return elmCss(
-                process.cwd(),
-                opts.stylesheets,
-                tmpDir.name
-              ).catch(() => {})
+              return compileCss(opts.stylesheets, tmpDir.name)
             })
             .then(() => {
               // create stylesheet watcher
-              spinner.succeed('css has been compiled')
-
               return createWatcher(
-                file => elmCss(process.cwd(), opts.stylesheets, tmpDir.name),
+                file => compileCss(opts.stylesheets, tmpDir.name),
                 deps => (stylesheetsDeps = deps),
                 () => true,
                 bs,
                 opts.stylesheets
-              ).catch(() => {})
+              )
             })
             .catch(e => {
               spinner.space()
@@ -340,12 +342,13 @@ const dev = options => {
         ])
       })
       .then(port => {
-        spinner.space()
         spinner.succeed(`ready! http://${opts.host}:${opts.port}`)
+        spinner.space()
       })
       .catch(e => {
+        spinner.fail(e, false)
         spinner.space()
-        spinner.fail(e)
+        throw e
       })
   )
 }

src/tasks/init.js

@@ -2,12 +2,14 @@ const anyTemplate = require('gulp-any-template')
 const filter = require('gulp-filter')
 const fs = require('fs')
 const gulp = require('gulp')
-const ora = require('ora')
 const path = require('path')
 const pumpify = require('pumpify')
 const rename = require('gulp-rename')
 
-const { spacer, validateParam } = require('./utils')
+const { initializeSpinner, validateParam } = require('./utils')
+
+// global reference to CLI spinner
+const spinner = initializeSpinner()
 
 const isEmpty = dir => {
   validateParam('string', 'dir', dir)
@@ -46,36 +48,25 @@ const copy = dir => {
 const init = (options = {}) => {
   validateParam('object', 'options', options)
 
-  // CLI spinner
-  const spinner = ora()
-  const spinnerSpacer = () =>
-    spinner.stopAndPersist({ symbol: spacer(), text: ' ' })
-  const spinnerFail = text => {}
-  spinner.text = 'initializing your project'
-  spinner.start()
+  spinner.next('initializing your project')
 
   return isEmpty(options.dir)
     .then(empty => {
       if (options.force || empty) {
-        return copy(options.dir).catch(e => {
-          spinnerSpacer()
-          spinner.fail(e)
-          spinnerSpacer()
-          throw e
-        })
+        return copy(options.dir)
       } else {
-        spinnerSpacer()
-        spinner.fail('directory already exists and has children')
-        spinnerSpacer()
-        throw new Error()
+        throw 'directory already exists and has children'
       }
     })
     .then(() => {
-      spinnerSpacer()
-      spinner.succeed(`project created!`)
-      spinnerSpacer()
+      spinner.succeed('project created!')
+      spinner.space()
       spinner.stopAndPersist({ symbol: '$ ', text: `cd ${options.dir}` })
-      spinnerSpacer()
+      spinner.space()
+    })
+    .catch(e => {
+      spinner.fail(e, false)
+      spinner.space()
     })
 }