chore(CI): upgrade to Circle CI v2 and leverage multiple containers for demo builds (#10991)

* trying Circle CI v2

* paths are fun

* seeing how long a demos build takes

* Batching Demo builds

* testing demo builds on CI2

* batches count from 0

* ok, looks good. preparing for master branch

* forgot `production=true` flag. let’s test that quick.

* forgot to save the file

* making sure that docs are still copied over to ionic-site in the deploy phase

* getting ready for the PR again

circle.yml

@@ -1,22 +1,45 @@
-general:
-  branches:
-    ignore:
-      - ins_n_outs
-machine:
-  node:
-    version: 4.1.0
-  post:
-    - npm install -g npm@3.x.x
-dependencies:
-  pre:
-    - ./scripts/docs/prepare.sh
-  cache_directories:
-    - "~/ionic-site" # cache ionic-site
-test:
-  override:
-    - gulp lint.ts
-deployment:
- tasks:
-   branch: "master"
-   commands:
-     - ./scripts/ci/deploy.sh
+version: 2
+jobs:
+  build:
+    working_directory: ~/ionic/
+    docker:
+      - image: node:7
+    steps:
+      - checkout
+      - restore_cache:
+         key: ionic-site
+      - run:
+         name: Prepare ionic-site repo
+         command: ./scripts/docs/prepare.sh
+      - save_cache:
+         key: ionic-site
+         paths:
+         - ~/ionic-site/
+      - restore_cache:
+         key: node_modules_{{ checksum "package.json" }}
+      - run:
+         name: Install node modules
+         command: npm i
+      - save_cache:
+         key: node_modules_{{ checksum "package.json" }}
+         paths:
+         - ~/ionic/node_modules/
+      - run:
+          name: Run tslint
+          command: ./node_modules/.bin/gulp lint.ts
+      - run:
+          name: Build Demos
+          command: |
+            if [ "${CIRCLE_BRANCH}" == "master" ]; then
+              ./node_modules/.bin/gulp demos.prod --production=true --batch=$CIRCLE_NODE_INDEX --batches=$CIRCLE_NODE_TOTAL
+            fi
+      - add_ssh_keys
+      - deploy:
+          name: Update docs
+          command: |
+            if [ "${CIRCLE_BRANCH}" == "master" ]; then
+              ./scripts/ci/deploy.sh
+            else
+              ./scripts/ci/deploy.sh
+              echo "We are on ${CIRCLE_BRANCH} branch, not going to update docs."
+            fi

scripts/gulp/tasks/demos.prod.ts

@@ -20,7 +20,6 @@ task('demos.prod', ['demos.prepare'], (done: Function) => {
 
   // okay, first find out all of the demos tests to run by finding all of the 'main.ts' files
   filterDemosEntryPoints().then((filePaths: string[]) => {
-    console.log(`Compiling ${filePaths.length} Demos ...`);
     return buildDemos(filePaths);
   }).then(() => {
     done();
@@ -56,7 +55,15 @@ function getDemosEntryPoints() {
 
 
 function buildDemos(filePaths: string[]) {
-  const functions = filePaths.map(filePath => () => {
+  var batches = chunkArrayInGroups(filePaths, argv.batches || 1);
+  var batch = argv.batch || 0;
+  if(batch >= batches.length) {
+    throw new Error(`Batch number higher than total number of batches.`);
+  }
+
+  console.log(`Compiling ${batches[batch].length} of ${filePaths.length} Demos ...`);
+
+  const functions = batches[batch].map(filePath => () => {
     return buildDemo(filePath);
   });
   let concurrentNumber = 2;
@@ -94,6 +101,17 @@ function buildDemo(filePath: string) {
   });
 }
 
+function chunkArrayInGroups(arr, size) {
+  var result = [];
+  for(var i = 0; i < arr.length; i++) {
+    if (!Array.isArray(result[i % size])) {
+      result[i % size] = [];
+    }
+    result[i % size].push(arr[i]);
+  }
+  return result;
+}
+
 task('demos.clean', (done: Function) => {
   // this is a super hack, but it works for now
   if (argv.skipClean) {

scripts/gulp/tasks/docs.ts

@@ -30,7 +30,8 @@ task('docs.dgeni', () => {
   }
 });
 
-task('docs.demos', ['demos.prod'], (done: Function) => {
+task('docs.demos', (done: Function) => {
+  // Copy demos already built from gulp demos.prod task to ionic-site
   const config = require('../../config.json');
   const outputDir = join(config.docsDest, 'demos');
   let promises = [];