@springbuck/flesh/gulpfile.js

Concept UI for Springbuck Apps.

/**
 * FLESH UI Task Runner
 * 
 */
var gulp  = require('gulp'),
  clean = require('gulp-clean'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  cleanCss = require('gulp-clean-css'),
  rename = require('gulp-rename'),
  postcss      = require('gulp-postcss'),
  autoprefixer = require('autoprefixer'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify'),
  merge = require('merge-stream'),
  nunjucks = require('gulp-nunjucks-render'),
  hjson = require('gulp-hjson');


/**
 * List of FLesh color themes
 */
var themes = [
  'african',
  'asian',
  'american',
  'european',
  'oceania',
  'default'
];

/**
 * List of all component types
 */
var components = [
  'accordion',
  'action',
  'breadcrumbs',
  'card',
  'collector',
  'docket',
  'form',
  'list',
  'modal',
  'navigator',
  'notif',
  'slider',
  'story',
  'table',
  'tabs',
  'toolbar',
  'tree',
  'wizard'
]; 

/**
 * HTML special characters replace map
 */
var tagsToReplace = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;'
};

/**
 * adds custom filters to **nunjucks** env
 * @param {*} env 
 */
var njkEnv = function(env) {
  /**
   * {% includeWith link:boolean, template:string, data:object, escape?:boolean %}
   */
  env.addExtension('includeWith', new function() {
    this.tags = ['includeWith'],
    this.parse = function(parser, nodes, lexer) {
        var token = parser.nextToken();
        var args = parser.parseSignature(null, true);
        parser.advanceAfterBlockEnd(token.value);
        return new nodes.CallExtension(this, 'run', args);
    },
    this.run = function(context, template, data, link = false, escape = true) {
      var output = null;

      // file
      if(link){
        output = env.render(template, data);
      }

      // string
      else{
        output = env.renderString(template, data);
      }

      return (escape) ? output.replace(/[&<>]/g, function (tag) {
        return tagsToReplace[tag] || tag;
      }) : output;
    }
  });
};

/**
 * variables to enable proper task management
 */
var taskList = [];
var taskName = '';

/**
 * COMMON TASKS
 */

/**
 * 01
 * empty dist directory
 */
taskName = 'empty-dist';
taskList.push(taskName);
gulp.task(taskName, function () {
  return gulp.src([
      './dist/*',
      './src/html/nunjucks/components/*.json'
    ], {read: false})
    .pipe(clean());
});

/**
 * 02
 * convert hjson to json
 */
taskName = 'hjson-to-json';
taskList.push(taskName);
gulp.task(taskName, function() {
  return gulp.src([
      './src/html/nunjucks/components/*.hjson'
    ])
    .pipe(hjson({ to: 'json' }))
    .pipe(gulp.dest('./src/html/nunjucks/components'));
});

/**
 * 03
 * generate style assets for each color theme
 */
themes.forEach(function (theme) {

  // copy fonts to dist dir
  taskName = 'copy-fonts-' + theme;
  taskList.push(taskName);
  gulp.task(taskName, function() {
    return gulp.src([
      './node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/*'
    ])
    .pipe(gulp.dest('./dist/'+ theme +'/webfonts'));
  });

  // copy assets to dist
  taskName = 'copy-assets-' + theme;
  taskList.push(taskName);
  gulp.task(taskName, function() {
    return gulp.src([
      './src/assets/*'
    ])
    .pipe(gulp.dest('./dist/' + theme + '/assets'));
  });

  //combile sass and build css  
  taskName = 'build-css-' + theme;
  taskList.push(taskName);
  gulp.task(taskName, function() {
    
    // process sass files
    var sassStream = gulp.src([
      './src/scss/' + theme + '.scss'
    ])
    // .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError));

    //and process raw css
    var cssStream = gulp.src([
      // './node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css',
      './src/css/*.css'
    ]);

    //and merge sass output to raw css
    return merge(cssStream, sassStream)
        .pipe(concat(theme + '.css'))
        .pipe(postcss([ autoprefixer({ browsers: [
          'Chrome >= 35',
          'Firefox >= 38',
          'Edge >= 12',
          'Explorer >= 10',
          'iOS >= 8',
          'Safari >= 8',
          'Android 2.3',
          'Android >= 4',
          'Opera >= 12']})]))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist/' + theme + '/css/'))
        .pipe(cleanCss())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./dist/' + theme + '/css/'));
  });

  //proces js files
  taskName = 'build-js-' + theme;
  taskList.push(taskName);
  gulp.task(taskName, function() {
    return gulp.src([
        './node_modules/jquery/dist/jquery.slim.js',
        './node_modules/popper.js/dist/umd/popper.js',
        './node_modules/bootstrap/dist/js/bootstrap.js',
        './src/js/*.js'
      ])
      .pipe(concat(theme + '.js'))
      .pipe(gulp.dest('./dist/' + theme + '/js/'))
      .pipe(uglify())
      .pipe(rename({suffix: '.min'}))
      .pipe(gulp.dest('./dist/' + theme + '/js/'));
  });

  //generate html files from template
  taskName = 'parse-html-' + theme;
  taskList.push(taskName);
  gulp.task(taskName, function() {
    return gulp.src('./src/html/nunjucks/*.html')
      .pipe(nunjucks({
        path: [
          './src/html/nunjucks', 
          './src/html/nunjucks/partials', 
          './src/html/nunjucks/components'
        ],
        data: {
          components: components,
          componentsData: components.map(function (component) {
            return require('./src/html/nunjucks/components/_' + component + '.json');
          }),
          theme: theme,
          themes: themes,
          master: require('./src/html/nunjucks/master.json')
        },
        manageEnv: njkEnv,
        envOptions: {
          autoescape: false
        }
      }))
      .pipe(gulp.dest('./dist/' + theme + '/html'));
  });
});

/**
 * run all task synchronously 
 * and set up watch for `src` directory 
 */
gulp.task('flesh', gulp.series(...taskList, function() {
  gulp.watch(['./src'], gulp.series('flesh'));
}));

/**
 * run task `flesh` by default
 */
gulp.task('default', gulp.series('flesh'));