The Frontend Builds article series

Welcome to the sixth part of this article series. If you didn’t read the other parts, check them out now.

Idea

BaaS is fine so far if you’re building your projects on the same structure I did for building x-note. However, right now, we’re using Build as a Service, so it’s time to make everything configurable.

Dumping all the default config values

BaaS should run successfully without any give user-config. That said, we need some defaults. I’ve added a new JavaScript file to xplatform-build at src/defaults.js. It exposes all default config values as you can see below.

The script below is stripped to increase readability. See the entire file here in the repo

(function(module){
  function exportDefaultConfig(){
    var path = require('path');

    var cacheDir = path.join(process.env.HOME || process.env.HOMEPATH || process.env.USERPROFILE, '.cache'),
        buildDir = path.join(process.cwd(), "desktop-build");
    return {
        folders: {
            mobile: {
                root: 'mobile',
                backlinkToProjectRoot: '..'
            },
            dist:{
                root: 'dist',
                styles: 'dist/styles',
                scripts: 'dist/scripts'
            },
            temp:{
                root: ".temp"
            }
        },
        filenames: {
            appScripts: 'app.js',
            appStyles: 'app.min.css',
            vendorStyles: 'vendor.min.css',
            vendorScripts: 'vendor.min.js',
            injectTargets: ['src/index.html']
        },
        sources: {
            // stripped to increase readability
        },
        options: {
            // stripped to increase readability
        }
    };
}

  module.exports = exportDefaultConfig();

})(module);

All defaults where exported using the familiar module.exports mechanism.

Refactor gulp-task-files

Next, I refactored, of course, all gulp-task-files, again go and check out all the changes over here. In summary, the method signature must accept another parameter and all

(function(module) {
    'use strict';
    function RegisterTasks(gulp, tasks, config) {

      gulp.task('private:build', function(done) {
        tasks.inSequence(
            'private:clean',
            'private:app:templates', [
                'private:vendor:css',
                'private:vendor:js',
                'private:app:css',
                'private:app:js'
            ],
            'private:app:html',
            done
        );
      });

      gulp.task('private:clean', function(done) {
          // replace all strings with config properties
          tasks.del.sync(config.sources.del, config.options.del);
          done();
      });
      /*
      * stripped to ensure readability
      */
    }

    module.exports = {
        init: RegisterTasks,
        docs: [
        // stripped to ensure readability
        ]
    };
})(module);

Refactor the gulpfile

Last but not least the src/gulpfile.js has to be updated. A few things are going on here.

  • add the possibility to pass config to the gulpfile.js
  • load the default config
  • override default config with user-config
  • pass merged config to gulp-task-files’ init method

See the entire gulpfile.js here.

(function(module){

  function XplatformBuild(userConfig){
      var gulp = require('gulp');

      var tasks = {
          del: require('del'),
          concat: require('gulp-concat'),
          inject: require('gulp-inject'),
          cssmin: require('gulp-cssmin'),
          ngAnnotate: require('gulp-ng-annotate'),
          ngTemplateCache: require('gulp-angular-templatecache'),
          rename: require('gulp-rename'),
          shelljs: require('shelljs'),
          uglify: require('gulp-uglify'),
          path: require('path'),
          NwBuilder: require('nw-builder'),
          inSequence: require('run-sequence')
      };

      var override = function(original, uConfig){
          for(var p in uConfig){
              if(typeof(uConfig[p]) !== 'object' || Array.isArray(uConfig[p])){
                  original[p] = uConfig[p]
              }else{
                  override(original[p], uConfig[p]);
              }
          }

      };

      var config = require('./defaults.js');
      override(config, userConfig);

      var customGulpTasks = require('require-dir')('./gulptasks');

      for (var gulpTask in customGulpTasks) {
          customGulpTasks[gulpTask].init(gulp, tasks, config);
      }

      gulp.task('help', function() {
          console.log('Execute one of the following commands\n');
          for (var gulpTask in customGulpTasks) {
              if (!customGulpTasks[gulpTask].hasOwnProperty('docs')) {
                  continue;
              }
              customGulpTasks[gulpTask].docs.map(function(doc) {
                  console.log("gulp " + doc.task + " - (" + doc.description + ")");
              });
          }
          console.log('\n');
      });
  }

module.exports = XplatformBuild;

})(module);

Refactor the usage in x-note

After refactoring your BaaS (here xplatform-build), of course, the application itself has to be refactored. This is the easy part; there is just a small updated for the gulpfile.js. See the () behind the require call

require('xplatform-build')();

If you’d like to provide a custom user-config just pass it as json object to the call like shown below.

// USE THIS SNIPPET ONLY IF YOU'D LIKE TO OVERRIDE
// DEFAULT SETTINGS
require('xplatform-build')({
    options: {
        cordova: {
            runCommands: [
               'cordova run ios', 
               'cordova run android', 
               'cordova run windows'
            ]
        }
    }
});

Again, see xplatform-build here and the BaaS branch of x-note over here

Go ahead

.. so read the next article in the “Frontend Build” article series.