Gulp - creating multiple code releases

Creating different versions of the same code

Posted by creatic on Wed 14 August 2019

One code - multiple user access roles

In one of my projects a new need had risen: there were three different versions of the UI and logic. The simple approach would be just to hide the not needed interface elements from the user. But I got curious: is it possible to even hide the Javascript code, i.e. to create different versions of the code in a way that they only contain the files and functions that belong to the corresponding user role? The answer is yes. It needs a little more work, but in the end you can separate user roles t the code level.

The Gulpfile

For automatic building I use Gulp. It has various plugins and simply: does the job.

Ok, so you have your gulpfile.js created, it runs smoothly, but you want to exclude some of the code from the build process. In my React based app I did it this way:

    gulp.task('watch_index', function(){

    var b = browserify({
      entries: [path.ENTRY_POINT],
      transform: [babelify],
      debug: true,
      cache: {}, packageCache: {}, fullPaths: true
    });

   b.exclude(['./src/js/components/TableTypeSelector.js', './src/js/util/tabletype.js']);

   var watcher  = watchify(b);

   watcher.on('update', function () {
      watcher.bundle()
        .on('error', function(err){
              console.log('watch_index error : ' + err.message);
          })
        .pipe(source(path.OUT))
        .pipe(gulp.dest(path.DEST_BUILD + '/js'))
        console.log('Updated index, ok.');
    })
    .bundle()
    .on('error', function(err){
          console.log('watch_index error : ' + err.message);
      })
    .pipe(source(path.OUT))
    .pipe(gulp.dest(path.DEST_BUILD + '/js'));

});

What's happening: - I use the Browserify plugin to convert the React code to Javascript code (check out transform: babelify) that runs in browsers. - b.exclude: here comes the list of files to be excluded from this build. - watcher: Gulp Watch: runs continuously, checks code changes and initiates the rebuilds.

In a different task I do the build for the user role that has full access to the functions, like:

gulp.task('watch_full', function(){

    var b = browserify({
      entries: [path.ENTRY_POINT_V4PLUS],
      transform: [babelify],
      debug: true,
      cache: {}, packageCache: {}, fullPaths: true
    });

   var watcher  = watchify(b);

   watcher.on('update', function () {
   ....

... and the code is the same from this point on.

The definition of the whole build task looks like:

gulp.task('watch',  gulp.parallel('watch_index', 'watch_full'));

This way you can work on the Javascript code and have the different builds separately.

Of course you can add the css processing and any other build task to watch at your taste.

More Reading

These articles helped me a lot: - React JS Tutorial - Integrating React with Gulp - Gulp Streams - Gulp Async Completition - Browserify - Setting Up a Javascript Project with Gulp