compile jsx templates

[Satyam]

By adding a few dependencies to package.json:

    "through2":"*",
    "msx":"*"
    "gulp-plumber":"*",

and the following to the gulpfile (taken from the msx compiler github page and adapted):

var msx = require('msx');
var through = require('through2');

var msxTransform = function (name) {
  return through.obj(function (file, enc, cb) {
    try {
      file.contents = new Buffer(msx.transform(file.contents.toString()));
      file.path = plugins.util.replaceExtension(file.path, '.js');
    }
    catch (err) {
      err.fileName = file.path;
      this.emit('error', new plugins.util.PluginError('msx', err));
    }
    this.push(file);
    cb();
  });
};

gulp.task('msx', function() {
  return gulp.src( './src/scripts/**/*.jsx')
    .pipe(plugins.plumber())
    .pipe(msxTransform())
    .on('error', function(e) {
      console.error(e.message + '\n  in ' + e.fileName);
    })
    .pipe(gulp.dest('./src/scripts/jsxtmp'));
});

I am able to use .jsx files along regular js files.

I added this to the autoreload watch:

 './src/**/*.jsx',

And a new task to the watch list:

gulp.watch('./src/**/*.jsx',['msx','scripts']);

The default taks also has 'msx' before the 'scripts' tags.

The msx task compiles the jsx files and stores them into a folder in src/scripts/jsxtmp as regular js files. Then, the normal scripts task concatenates and uglifies them along the rest.

I know very little of gulp so I am sure this can be improved.

[velveteer]

You know, I was just looking over at ng-vu's boilerplate here: https://github.com/ng-vu/mithril-boilerplate/blob/master/gulpfile.js#L139

And I thought, hmm, yeah MSX would be a smart feature to have. I actually tried using the Mithril template compiler in my gulp tasks but it didn't work very well. I will definitely consider adding this functionality. My only concern is ending up with a massive gulpfile. I figure if people want to use JSX/MSX they will use ng-vu's code, but I think at least having the option here would be fine.

[Satyam]

I installed that one but the sample files made no sense to me. I wasn't sure which parts were optional, how could I do simple stuff and only late grow as I learn more. In this case, I am not even suggesting that the sample file be a jsx file, just leave the ability there, available, if anyone cares for it.