LoginSignup
0
1

More than 5 years have passed since last update.

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

Posted at

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秒ほど短縮されたことになります。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1