Angular2プロジェクトに適したビルドシステムとは何ですか？

Question

私と私のチームは最近AngularJS 1.xからAngular2（またはAngularJS 2）に移行しました。私たちは足場のためにYeoman Angular Generatorを使用しました。そして、上記のジェネレータでデフォルトで作成されたinbuilt gruntfile.jsを使用して戦争を構築し、作成するためにgruntを使用しました。私たちはそれを少し変更して使用しました。
何このファイルは基本的にないことである：

• それもでbower.jsonから、必要に応じてpackage.jsonでnode_modulesからすべてのサードパーティの依存関係のjsファイルがインストールフォルダ（すなわちnpm install）&を兼ね備えbower_componentsフォルダー（つまりbower install）[使用している場合] vendor.jsファイル（連結、縮小、uglificationを行う）
• それは、これらの4バンドルではそれはStyles.cssを
• にscripts.jsとcssファイルにすべてのユーザーJavaScriptファイルを組み合わせたCSSファイルについて、上記の手順を繰り返し、
• vendor.css にそれを組み合わせてindex.htmlをや画像など、フォント、などの他の必要なもの

を持つファイルは、私がAngular2のための同様のソリューションを探してきたこれまでのところ失敗しています。私は角度-CLIプロジェクトからangular2シードプロジェクト又はng buildに見出さgulpfile.jsを使用してgulpを使用して試みたが、いずれも、そのようなソリューションを提供していません。 問題は常にnode_modulesフォルダで発生します。これらのフォルダのtypescript tsは、完全に不要なファイルで、バンドルに組み込まれます。

ここで、Angular2はAngular1とは異なりますが、すべてこれで良いビルドを構築することはできますか？私はどのようなアプローチを取るべきですか？ Angular1のようなものを実現できますか？

Answer 1

あなたが私に尋ねると幻想的なツールであるgulpを使用すると、gulpファイルのこの設定が有効になります。

const gulp = require('gulp'); 
const cleanCSS = require('gulp-clean-css'); 
const del = require('del'); 
const typescript = require('gulp-typescript'); 
const tscConfig = require('./tsconfig.json'); 
const bower = require('gulp-bower'); 

/* 
    Clean current builds 
*/ 
gulp.task('clean', function() { 
    return del('dist/**/*'); 
}); 

/* 
    Pull in bower dependencies. 
    Uses default .bowerrc path 
*/ 
gulp.task('bower', function() { 
    return bower(); 
}); 

//Use custom path 
/* 
gulp.task('bower', function() { 
    return bower('./my_bower_components') 
    .pipe(gulp.dest('lib/')) 
}); 
*/ 

/* 
    Minify css 
    Remember to edit distination path 
*/ 
gulp.task('minify-css', function() { 
    return gulp.src('styles/*.css') 
     .pipe(cleanCSS({debug: true}, function(details) { 
      console.log(details.name + ': ' + details.stats.originalSize); 
      console.log(details.name + ': ' + details.stats.minifiedSize); 
     })) 
     .pipe(gulp.dest('dist')); // Here 
}); 


/* 
    Typescript compile 
    Remember to edit distination path 
*/ 
gulp.task('compile', ['clean'], function() { 
    return gulp 
    .src('app/**/*.ts') 
    .pipe(typescript(tscConfig.compilerOptions)) 
    .pipe(gulp.dest('dist/app')); // Here 
}); 

gulp.task('build', ['compile', 'minify-css', 'bower']); 
gulp.task('default', ['build']); 

OBS！

宛先パスを編集することを忘れないでください。

私はバワーハンドリングを追加しました。しかし、ノードモジュールに関しては、package.jsonファイルを保持し、モジュールが必要なときにnpmインストールを実行するだけです。

すべてのノードモジュールとブレードコンポーネントをバンドルするには、グループバンドルキットが必要です。

https://www.npmjs.com/package/gulp-bundle-assets