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