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を作成します。
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秒ほど短縮されたことになります。
Author And Source
この問題について(Node.js、Angularのビルド時間をgulpで短縮する), 我々は、より多くの情報をここで見つけました https://qiita.com/kmatae/items/b4088fd2bbaf195175da著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .