Node.js、Angularのビルド時間をgulpで短縮する


Node.js、Angularのビルドを順番に行っていると、プロジェクトが大きくなっていくのに伴い、時間がかかるようになります。
これを何とか少しでも短縮できないかと調べたところ、gulpを使う事で実現できそうなのでやってみました。

パッケージのインストール

gulpとwebpack(Node.jsのwebpackに利用)に必要なパッケージをインストールします。

npm install gulp webpack webpack-stream gulp-typescript --save-dev

gulpfile.jsの作成

プロジェクトのルートに、gulpの動作を設定するgulpfile.jsを作成します。

gulpfile.js
const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const gulpTypescript = require('gulp-typescript');
const exec = require('child_process');
const del = require('del');

const webpackConfig = require('./webpack.config');

const typescriptProject = gulpTypescript.createProject('./tsconfig.json');

// ビルドモジュールの削除
gulp.task('clean', () => {
    return del(['./dist']);
});

// Node.jsのビルド(webpack)
gulp.task('server', () => {
    return webpackStream(webpackConfig, webpack)
            .pipe(gulp.dest('dist/server'));
});

// Sequelize-Typescriptのmigrationファイルのトランスパル
gulp.task('db', () => {
    return gulp.src('./src/db/**/*.ts')
            .pipe(typescriptProject())
            .js
            .pipe(gulp.dest('./dist/db'));
});

// angularのビルド
gulp.task('angular', () => {
    return exec.exec('ng lint && ng build --ts-config ./src/app/tsconfig.json');
});

// clean=>server,db,angularの実行
gulp.task('default',
    gulp.series(
        'clean',
        gulp.parallel('server', 'db', 'angular')
    )
);

gulpの実行

gulpを実行します。

npx gulp

package.jsonのbuildにnpx gulpを指定

package.jsonのscriptのbuildに、npx gulpを設定しましょう。
VisualStudio Codeだと、Ctrl+Shift+Bで実行できます。
json:package.json
{
"script": {
"build": "npx gulp"
}
}

ビルド完了

Ctrl+Shift+Bでビルドしてみましょう。

Executing task: npm run build <
npx gulp
[09:45:19] Using gulpfile gulpfile.js
[09:45:19] Starting 'default'...
[09:45:19] Starting 'clean'...
[09:45:19] Finished 'clean' after 15 ms
[09:45:19] Starting 'server'...
[09:45:19] Starting 'db'...
[09:45:19] Starting 'angular'...
[09:45:25] Finished 'db' after 6.56 s
[09:45:32] Version: webpack 4.29.0
Built at: 2019-02-04 09:45:32
Asset Size Chunks Chunk Names
server.js 32.6 KiB main [emitted] main
server.js.map 27.6 KiB main [emitted] main
Entrypoint main = server.js server.js.map
[09:45:32] Finished 'server' after 13 s
[09:45:46] Finished 'angular' after 27 s
[09:45:46] Finished 'default' after 27 s

この例で言うと、dbとserverとangularのビルドを並列で実行しているので、20秒ほど短縮されたことになります。