Sunday 21 May 2017

Continue gulp(4) tasks sequence as Webpack task with watch flag hold stream

Tasks' workflow is as following : the client app (angular2) should be bundled using webpack (webpack-stream, in this case) and then nodemon should start serving the server app (serving in turns the client app and favicon middleware, which would break the if no client app folder (with icon inside) provided yet). Problem is: webpack config have watch: true, so gulp never finishes the webpack related stream - and hence, never starts nodemon task!

require('babel-register')();

const gulp     = require('gulp'),
  path         = require('path'),
  { env, log } = require('./tasks/helpers/functions');

let root       = __dirname;
let paths      = require('./tasks/helpers/paths')(root, env);
let defineTask = require('./tasks/helpers/defineTask')(gulp, root);

defineTask('client:clean', 'cleanClient', { clientDist: paths.clientDist });
defineTask('appdist:clean', 'cleanDist', { appDist: paths.appDist });
defineTask('env:prod', 'setEnv', { type: 'production' });
defineTask('env:dev', 'setEnv', { type: 'development' });
defineTask('env:test', 'setEnv', { type: 'test' });
defineTask('tests', 'tests', { testsSrc: paths.testsSrc });
defineTask('nodemon', 'nodemon');
defineTask('client:bundle', 'bundleClient', { paths: paths, env: env });
defineTask('server:compile', 'compileServer', { paths: paths, env: env });

gulp.task('tests:watch', () => {
  return gulp.watch(paths.testsSrc, gulp.series('env:test', 'tests'));
});

gulp.task('compileBundle:prod', gulp.series(        // gulp --type=production compileBundle:prod
  'client:clean',                                   // TODO: set up angular PROD compilation
  'appdist:clean',
  'env:prod',
  gulp.parallel('server:compile', 'client:bundle'))
);

gulp.task('default', gulp.series('client:clean', 'env:dev', 'client:bundle', 'nodemon'));

BundleClient.js:

import path                from 'path';
import webpackStream       from 'webpack-stream';
import chalk               from 'chalk';
import named               from 'vinyl-named';
import { log, wpReporter } from './helpers/functions';

module.exports = (params) => {
  return (callback) => {
    log(chalk.bgWhite.black.italic('Bundling for ' + params.env));
    log(chalk.bgWhite.green.bold('Using ' + path.basename(params.paths.webpackfile)));
    return params.gulp.src([
      path.join(params.paths.clientSrc, 'polyfills.ts'),
      path.join(params.paths.clientSrc, 'main.ts')
    ])
      .pipe(named())
      .pipe(webpackStream(require(params.paths.webpackfile), null, wpReporter))
      .pipe(params.gulp.dest(params.paths.clientDist))
      .on('end', callback); 
  }
}

compileServer.js:

import * as combiner from 'stream-combiner2';
import path from 'path';
const $ = require('gulp-load-plugins')();

module.exports = (params) => {
  let isEntry = (file) => {
    return (params.env === 'production' && file.basename === 'app.js');
  }

  return (callback) => {
    return combiner.obj(
      params.gulp.src(params.paths.appFilesPaths.map(item => path.join('./server', item)))
        .on('data', (file) => {
          file.cwd = './server';
          console.log(`Compiling ${file.basename}`)
        })
      , $.if(isEntry, $.rename(path => { path.basename = 'index' }))
      , $.babel()
      , $.debug({ title: '[Gulp-Debug]::', minimal: true })
      , params.gulp.dest(file => {
        return (path.relative(file.dirname, file.cwd) == '') ?
          params.paths.appDist : path.resolve(params.paths.appDist, path.relative(file.cwd, file.base))
      })
        .on('end', callback)
    )
      .on('error', $.notify.onError(err => {
        return JSON.stringify({
          MainTitle: 'Error during pipeline',
          ErrorMsg: err.message,
          FullError: JSON.stringify(err)
        });
      }));
  }
}


via Vovan_Super

No comments:

Post a Comment