gulpfile.js

'use strict';

/**
 * Requirements: Node.js
 * 
 * Steps to use this file:
 * 1. Save this into the ~/uPortal/uportal-war/src/main/webapp/media/skins/respondr directory
 * 2. Install gulp 'npm install -g gulp'
 * 3. Run 'npm install' to load the dependencies needed
 * 4. Run 'gulp less' and see if there are any errors.
 *   - you should see two statements echoed out to the console that show the paths to the files.
 * 5. Verify that there were no errors and that your .css file was generated in the above path.
 * If no errors, then you can run 'gulp' and iut should start "watching" for your changes 
 * 
 */


var gulp = require('gulp'),
    gutil = require('gulp-util'),
    less = require('gulp-less'),
    map = require('vinyl-map'),
    fs = require('fs'),
    livereload = require('gulp-livereload');

var settings = {
  skin: null,
  src: './*.less',
  dest: null
};

gulp.task('init', function() {
  /**
   * gathers information about the skin being used and 
   * the path to the deployment directory. Stores the path
   * info into the settings object
   */
  var populate = map(function(code, filename) {
    var dest = code.toString().match(/server\.home=.*/g)[0].split('=')[1];
        dest = dest + '/webapps/uPortal/media/skins/respondr/';
    settings.dest = dest;


    var xml2js = require('xml2js');
    var parser = new xml2js.Parser();
    var xml = fs.readFileSync('../../../../data/required_entities/stylesheet-descriptor/Respondr.stylesheet-descriptor.xml');

    parser.parseString(xml, function(err,result){
        settings.skin = result['stylesheet-descriptor']['stylesheet-parameter'][0]['default-value'][0];
    });
  });

  var stream = gulp.src('../../../../../../../build.properties')
    .pipe(populate);

  return stream;
});

gulp.task('less', ['init'], function () {
  /**
   * helpers to show what skin you are working on.  Mainly useful
   * for switching between skins
   */
  console.log('skin:', settings.skin);
  console.log('dest:', settings.dest);

  gulp.src(settings.skin + '.less')
    .pipe(less({
      settings: [
        './'
      ]
    })
    .on('error', gutil.log))
    .pipe(gulp.dest(settings.dest))
    .pipe(livereload());
});

gulp.task('watch', ['init'] ,function() {
    livereload.listen();
    gulp.watch('./**/*.less', ['less']);
});

gulp.task('default', ['init','less', 'watch']);

Gulp file for updating uPortal responder based skins.

This reads in path information from the uPortal configuration files.

If you have the LiveRelaod extension loaded in the browser, then the page should auto-refresh when changes are made.