Below is the complete dev.js.
let fsPath = require( 'path' );
var chokidar = require( 'chokidar' );
var fs = require( 'fs-extra' );
var rollup = require( 'rollup' );
var watch = require( 'rollup-watch' );
var rollupConfig = require( './rollup.config.js' ); // Rollup config is covered in the next section
var express = require( 'express' ); // For our Express server
var open = require( 'open' );
// Set source/build folders
const buildFolder = 'build';
const srcFolder = 'src';
// Set the destination where Rollup will write the transpiled Javascript bundle to
const rollupDest = buildFolder + '/js/app/app.js';
// Start the development environment
start( );
// start() drives the logic
function start() {
// Watch files for changes and copy changed files to the build folder
watchAssets()
.then( compileJS ) // Start transpiling and bundling our ES6 JS into ES5 JS.
.then( startServer ) // We can start a Node based server such as Express to view our application.
// Or we can setup an external server to serve content from the
// 'build' folder.
.catch( ( e ) => { // catch any error and log to console
console.log( e ); // Log errors to console
} );
}
// Setup a watcher on our 'src' so that modified files are
// copied to the build folder
function watchAssets() {
let p = new Promise( function ( resolve, reject ) {
// Watch all files (except JS in 'app' folder, since Rollup takes care of those) for changes
// and when a file is created, updated or deleted the 'all' events is fired.
let watchPath = srcFolder + '/**/*';
let ignorePath = srcFolder + '/**/app/**/*.js';
let watcher = chokidar.watch( watchPath, { ignored: [ ignorePath ] } );
// 'ready' event fires when all files have been scanned and copied to the 'build' folder
watcher.on( 'ready', ( ) => {
resolve('initial scan complete');
} );
watcher.on( 'all', ( event, path ) => {
// No need to copy directories
if ( ! fs.lstatSync( path ).isDirectory() ) {
// We copy the changed file to the build folder
writeToDest( path );
}
} );
} );
return p;
}
// Function to write given path to the build folder
function writeToDest( path ) {
// Set buildPath by replacing 'src' string with 'build' string
let buildPath = buildFolder + path.slice(srcFolder.length);
// Ensure the build folder exists
let buildDir = fsPath.dirname( buildPath );
fs.ensureDirSync( buildDir );
fs.copySync( path, buildPath );
return Promise.resolve(); // All our functions return a promise
}
// Setup Rollup to transpile and bundle our ES6 JS into ES5 JS.
function compileJS() {
let p = new Promise( function ( resolve, reject ) {
// Set the destination where Rollup should write the ES5 bundle to.
rollupConfig.targets[0].dest = rollupDest; // Output file
// setup rollup' watcher in order to run rollup
// whenever a JS file is changed
let watcher = watch( rollup, rollupConfig );
// We setup a listener for certain Rollup events
watcher.on( 'event', e => {
// Note: every time a file changes Rollup will tire a 'BUILD_END' event
if ( e.code == 'BUILD_END' ) {
// At this point our JS has been transpiled and bundled into ES5 code
// so we can resolve the promise.
resolve();
}
// If Rollup encounters an error, we reject the promise and eventually log the error in start()
if ( e.code === 'ERROR' ) {
console.log( e ); // Log Rollup errors to console so we can debug.
reject( e );
}
} );
} );
return p;
}
// Starting express server is optional. If you are developing on an external
// server, you can remove this function
function startServer() {
// Start an express serve for our dev environment
var app = express();
let serverFolder = fsPath.join( __dirname, buildFolder );
app.use( express.static( serverFolder ) );
app.listen( 9988 );
// Launch browser
open( 'http://localhost:9988/' );
return Promise.resolve(); // All our functions return a promise
}