archetype-react-app: [major] clappify

packages/electrode-archetype-react-app-dev/package.json

@@ -48,7 +48,6 @@
     "electrode-bundle-analyzer": "^1.0.0",
     "electrode-cdn-file-loader": "^1.0.0",
     "electrode-electrify": "^1.0.0",
-    "electrode-gulp-helper": "^1.0.5",
     "electrode-webpack-reporter": "^0.3.6",
     "eslint": "^3.9.1",
     "eslint-config-walmart": "^1.1.0",
@@ -59,7 +58,6 @@
     "file-loader": "^0.11.1",
     "fs-extra": "^0.26.5",
     "glob": "^7.0.6",
-    "gulp": "^3.9.1",
     "isomorphic-loader": "^1.0.0",
     "isparta-loader": "^2.0.0",
     "istanbul": "^0.3.18",
@@ -115,6 +113,7 @@
     "webpack-disk-plugin": "0.0.2",
     "webpack-stats-plugin": "^0.1.1",
     "winston": "^2.3.1",
+    "xclap": "^0.2.0",
     "xsh": "^0.3.2"
   },
   "optionalDependencies": {

packages/electrode-archetype-react-app/FAQ.md

@@ -6,10 +6,10 @@ This "app archetype" provides for common patterns across all app projects so tha
 
 ```bash
 # This runs both the node server and webpack (in hot mode)
-$ gulp hot
+$ clap hot
 
 # Also try `dev` mode when running off battery power and you wish to maximize battery life.
-$ gulp dev
+$ clap dev
 ```
 
 #### What is `hot mode`?
@@ -20,45 +20,45 @@ $ gulp dev
 
 ```bash
 # This will run test eslint and your spec tests
-$ gulp check
+$ clap check
 ```
 
 #### How do I run my application tests without going through eslint (i.e., while I'm developing)?
 
 ```bash
 # This will run only your spec tests
-$ gulp test-dev
+$ clap test-dev
 ```
 
 #### Why can't my test and code changes get automatically run with the tests?  Why do the tests take so long to start?
 
 ```bash
 # This will start a webpack-dev-server to hot watch your code and also start a karma test browser that auto-reruns when specs or client code changes.
-$ gulp test-watch-all
+$ clap test-watch-all
 ```
 
 #### How do I use and/or view the final build files without minifying/uglifying but also with sourcemaps?
 
 ```bash
 # This will build your code and save to disk, and then start a node server (without using webpack-dev-server).
-$ gulp dev-static
+$ clap dev-static
 ```
 
 #### Is there anything else that might be nice for my development?
 
 ```bash
 # This will start the node server in debug mode so that you can place breakpoints, "debugger" statements, or use `node-inspector`.
-$ gulp debug
+$ clap debug
 ```
 
 #### How do I view my test result in the browser?
 
 Run either of the below commands before opening the link.
 
 ```
-gulp server-test
-gulp dev # (OR) (which includes `server-test`)
-gulp hot # (OR) (which includes `server-test`)
+clap server-test
+clap dev # (OR) (which includes `server-test`)
+clap hot # (OR) (which includes `server-test`)
 ```
 This will serve the static assets for test.html
 
@@ -71,19 +71,21 @@ First we need to add a `sw-config.js` file under the app's `config` folder.
 This file contains two sections:
 
 ##### 1. Manifest
-  ```
+
+```js
 manifest: {
   logo: "./images/icon.png",
   title: "Electrode Progressive App",
   short_name: "EPA",
   start_url: "/"
 }
-  ```
+```
+
   Manifest gives you control over how your web app is installed on user's home screen with `short_name, title and logo` properties. You can also specify a starting path to launch your app with `start_url` property. Manifest defines how your app appears to the user and more importantly how they can launch it.
 
 ##### 2. Cache
 
-```
+```js
 cache: {
   runtimeCaching: [{
     handler: "fastest",
@@ -101,16 +103,16 @@ cache: {
 
 Once this file is added, running
 
-```
-gulp build
+```bash
+$ clap build
 ```
 
 will generate a `manifest.json` file inside of `dist/js/icons-[hash]` and a service worker file `dist/sw.js`.
 
 `Service Worker` file is generated during the build step and it will precache all the static resources as per the configuration in `sw-config.js`.
 Using `AboveTheFoldOnlyServerRender` you can avoid caching of certain components inside the crucial pages of your app to make your _App shell_ even lighter.
 
-```
+```js
 <AboveTheFoldOnlyServerRender skip={true}>
   <div>
     this will not be a part of your app shell

packages/electrode-archetype-react-app/README.md

@@ -19,34 +19,28 @@ $ npm install --save electrode-archetype-react-app
 $ npm install --save-dev electrode-archetype-react-app-dev
 ```
 
-###### Add a `gulpfile.js`
+###### Add a `clap.js`
 
-The `gulpfile.js` should contain the following and be located in the root of your project
+The `clap.js` should contain the following and be located in the root of your project
 
 ```js
 require("electrode-archetype-react-app")();
 ```
 
 ## Usage
 
-The primary interface to the archetype is a list of tasks you can invoke with gulp to do your bidding.
+The primary interface to the archetype is a list of tasks you can invoke with clap to do your bidding.
 
 To see the tasks, simply run:
 
 ```bash
-$ gulp
-```
-
-Some tasks are internal and hidden, but if you are curious, you can see them with:
-
-```bash
-$ gulp help --all
+$ clap
 ```
 
 To invoke a task, for example, the `dev` task, run:
 
 ```bash
-$ gulp dev
+$ clap dev
 ```
 
 ## AppMode
@@ -66,7 +60,6 @@ In the [src/lib mode](#srclib-mode), you put your `client` and `server` code und
 If you are using babel-register mode, then you need to add a `.babelrc` in your app's top level directory to extend
 [the archetype's babel configuration](config/babel/.babelrc) in order to apply the presets (ES2015, React) and the plugins like i18n. If your project needs additional Babel settings (like using stage 0 features) you can add them to this file. See the [Babel docs](https://babeljs.io/docs/usage/babelrc/) for more information.
 
-
 ```json
 {
   "extends": "electrode-archetype-react-app/config/babel/.babelrc"
@@ -101,28 +94,28 @@ If you are using this API, then things like isomorphic support and React module
 
 It accepts a single `options` object, with the following supported fields:
 
-  - `babelRegister` - Set to `false` to disable loading `babel-register`
-    - `babel-register` is loaded by default only in babel-register app mode, and off in src/lib app mode.
-  - `optimizeModulesForProduction` - Set to `false` to disable loading optimized copy of React modules.
-    - also disabled unless `NODE_ENV=production`
-    - If this is an object, then it's used as `options` for `optimizeModulesForProduction`
-  - `cssModuleHook` - Set to `false` to disable loading [css-module-hook]
-    - If this is an object, then it's used as `options` for `cssModuleHook`
-  - `isomorphicExtendRequire` - Set to `false` to disable loading isomorphic-loader support
+-   `babelRegister` - Set to `false` to disable loading `babel-register`
+    -   `babel-register` is loaded by default only in babel-register app mode, and off in src/lib app mode.
+-   `optimizeModulesForProduction` - Set to `false` to disable loading optimized copy of React modules.
+    -   also disabled unless `NODE_ENV=production`
+    -   If this is an object, then it's used as `options` for `optimizeModulesForProduction`
+-   `cssModuleHook` - Set to `false` to disable loading [css-module-hook]
+    -   If this is an object, then it's used as `options` for `cssModuleHook`
+-   `isomorphicExtendRequire` - Set to `false` to disable loading isomorphic-loader support
 
 #### optimizeModulesForProduction Options
 
 The `optimizeModulesForProduction` options supported the following flags:
 
-  - `quiet` - Boolean to turn off console.log messages
-  - `force` - Boolean to force enable regardless of `NODE_ENV`
+-   `quiet` - Boolean to turn off console.log messages
+-   `force` - Boolean to force enable regardless of `NODE_ENV`
 
 ### src/lib Mode
 
 In order to avoid requiring run time babel transpilation, this archetype supports a src/lib app mode.  To use this, you need to put your `client` and `server` into a `src` directory.  The archetype's `build` task will transpile those into the `lib` directory.
 
 > The archetype `build` task will only overwrite `lib/client` and `lib/server`.  So you can put other normal code under `lib` if you want.
-
+>
 > If you are migrating from babel-register mode, then you should move your code to `src` directory.  For the most part, there should be very little you need to change except if you have code that refers to those two directories explicitly from outside.
 
 You will also need to use the [Run time support API](#run-time-support-api) to initialize your server startup.
@@ -196,6 +189,7 @@ you can define multiple entry points for your application, so the Webpack will c
 entry point. To do that, place `entry.config.js` module into your app's `client` directory:
 
 Here is an **example** of `entry.config.js`:
+
 ```js
 module.exports = {
   "web": "./app-web.js",
@@ -204,12 +198,10 @@ module.exports = {
 };
 ```
 
-
 ## NodeJS Server Required Runtime Support
 
 If you don't use the `support.load` API to get the runtime support needed for some of the features in your NodeJS server, then you need to initialize them manually during your server startup.
 
-
 ### `babel-core/register`
 
 If you are using the babel-register mode, then you need to load the `babel-register` module.
@@ -236,6 +228,7 @@ var supports = require("electrode-archetype-react-app/supports");
 
 supports.cssModuleHook();
 ```
+
 ## Extending Webpack Configuration
 
 The webpack config for your app is being generated by the archetype. While composing the webpack config, the archetype looks for the `archetype/config` folder at the project root of your app.
@@ -245,12 +238,10 @@ In order to override or extend the webpack configuration you should create a fil
 Your directory structure should look like this: 
 
 ```bash
-
 archetype
 └── config
     └── webpack
         └── webpack.config.js
-
 ```
 
 Where `webpack.config.js` is your extended or overriding webpack config, for example:
@@ -265,19 +256,26 @@ const config = {
 };
 
 module.exports = config;
-
 ```
 
-
 Built with :heart: by [Team Electrode](https://github.com/orgs/electrode-io/people) @WalmartLabs.
 
 [npm-image]: https://badge.fury.io/js/electrode-archetype-react-app.svg
+
 [npm-url]: https://npmjs.org/package/electrode-archetype-react-app
+
 [daviddm-image]: https://david-dm.org/electrode-io/electrode/status.svg?path=packages/electrode-archetype-react-app
+
 [daviddm-url]: https://david-dm.org/electrode-io/electrode?path=packages/electrode-archetype-react-app
-[daviddm-dev-image]:https://david-dm.org/electrode-io/electrode/dev-status.svg?path=packages/electrode-archetype-react-app
-[daviddm-dev-url]:https://david-dm.org/electrode-io/electrode?path=packages/electrode-archetype-react-app?type-dev
-[npm-downloads-image]:https://img.shields.io/npm/dm/electrode-archetype-react-app.svg
-[npm-downloads-url]:https://www.npmjs.com/package/electrode-archetype-react-app
+
+[daviddm-dev-image]: https://david-dm.org/electrode-io/electrode/dev-status.svg?path=packages/electrode-archetype-react-app
+
+[daviddm-dev-url]: https://david-dm.org/electrode-io/electrode?path=packages/electrode-archetype-react-app?type-dev
+
+[npm-downloads-image]: https://img.shields.io/npm/dm/electrode-archetype-react-app.svg
+
+[npm-downloads-url]: https://www.npmjs.com/package/electrode-archetype-react-app
+
 [generator-electrode]: https://www.npmjs.com/package/generator-electrode
-[Electrode getting started]: http://www.electrode.io/docs/get_started.html
+
+[electrode getting started]: http://www.electrode.io/docs/get_started.html