Building ractive components

gobblefile.js

var gobble = require( 'gobble' ),
	makeComponent = require( './gobble/make-component' ),
	sass = require( './gobble/sass-file' ),
	join = require( 'path' ).join,
	bundleModules = require( './gobble/bundle-modules' );

console.log( 'gobble_env', gobble.env() );

var isProduction = gobble.env() === 'production';

var dependencies = isProduction ? [] : Object.keys( require( './package.json' ).dependencies );

var env = gobble( 'env/' + gobble.env() )
	.include( 'env.js' );

var js = gobble( 'assets/js' )
	.exclude( 'vendor/*.js' )
	.exclude( 'passthru/*.js' );

js = gobble( [ env, js ] )
	.transform( 'babel' /*, { blacklist: [ 'es6.modules' ] }*/ );

var vendor = gobble( 'assets/js/vendor' ).moveTo( 'js' );

var passthru = gobble( 'assets/js/passthru' ).moveTo( 'js' );

var sassIncludes = [ join(process.cwd(), 'assets/scss/include' ) ];

var css = gobble( 'assets/scss' ).transform( 'sass', {
	src: 'main.scss',
	dest: 'min.css',
	includePaths: sassIncludes
});

css = gobble([
	css,
	gobble( 'assets/scss' ).include( 'normalize.css' ),
	gobble( 'assets/scss/fonts' ).moveTo( 'fonts' )
]);

var images = gobble( 'assets/images' ).moveTo( 'images' );

var components = gobble( 'assets/components' )
	.transform( sass, { includePaths: sassIncludes } )
	.transform( 'babel' )
	.transform( makeComponent )
	.transform( 'ractive', { type: 'cjs' } );


var bundle = gobble( [ components, js, vendor ] )
	.transform( 'browserify', {
		entries: './index.js',
		configure: function ( bundle ) {
			dependencies.forEach( function( module ) {
				bundle.exclude( module );
			});
		},
		dest: 'bundle.js',
		debug: gobble.env() !== 'production'
	});

if ( isProduction ) {
	bundle = bundle.transform( 'uglifyjs' );
}

var modules = gobble( 'assets/js/passthru' );
if ( !isProduction ) {
	modules = modules.transform( bundleModules, {
		modules: dependencies
	});
}

var index = gobble( 'assets' ).include( 'index.html' );
var favicon = gobble( 'assets' ).include( 'favicon.ico' );

// Include other directories as needed...
// var other = gobble( 'assets/other' ).moveTo( 'other' );

module.exports = gobble( [ bundle, passthru, css, images, index, favicon, modules /* , other */ ] );

make-component.js

var fs = require( 'fs' ),
	path = require( 'path' ),
	join = path.join;

module.exports = function makeComponent ( src, outputdir, options, callback ) {

	function isDirectory( dir, f ){
		return fs.lstatSync( join( dir, f ) ).isDirectory();
	}

	function readFile( dir, name, ext ){
		var p = join( dir, name + '.' + ext );
		return  fs.existsSync(p) ? fs.readFileSync( p, 'utf8' ) : '';
	}

	function wrapFile( tag, file ){
		return file ? '\n\n<' + tag + '>\n' + file + '\n\n</'+ tag + '>\n' : '';
	}

	function writeComponent ( src, c, list) {
		var dir = join( src, c );
		var file = readFile( dir, c, 'html' );
		file += wrapFile( 'style', readFile( dir, c, 'css' ) );
		file += wrapFile( 'script', readFile( dir, c, 'js' ) );
		if ( file ) {
			var write = join( outputdir, c + '.html' );
			fs.writeFileSync( write, file );
			list.push( c );
		}
	}

	function writeDirectory ( dir, list ) {
		var cdir = fs.readdirSync(dir);

		var components = cdir.filter(function(each){
			return isDirectory( dir, each );
		});

		var childpath;

		components.forEach(function(c){
			writeComponent( dir, c, list);
			childpath = join( dir, c );
			writeDirectory( childpath, list );
		});
	}

	try {
		var list = [];

		writeDirectory( src, list );

		var listFile = "var Ractive = require( 'ractive' );\n\n";
		list.forEach( function(c) {
			listFile += "Ractive.components['" + c + "'] = require( './" + c + "' );\n";
		});

		fs.writeFileSync( join ( outputdir, 'components.js' ), listFile);

		callback();
	} catch(err){
		callback(err);
	}
};