什么是 Angular2 项目的好构建系统？

Question

我和我的团队最近从 AngularJS 1.x 转移到了 Angular2（或 AngularJS 2）。我们曾经使用 Yeoman Angular Generator 来搭建脚手架，grunt 使用内置的 gruntfile.js 来构建和创建战争，该内置 gruntfile.js 使用上述方法默认创建发电机。我们通过对其进行了一些小改动来使用它，我们很高兴。
这个文件的本质是：

• 它结合了从 node_modules 文件夹中的 package.json 安装的所有第三方依赖 js 文件（即npm install），甚至可以选择从 bower.json 在 bower_components 文件夹（即bower install）[如果你正在使用它] 到单个 vendor.js 文件中（通过连接、缩小和丑化来实现)
• 它对 css 文件重复上述步骤并将其合并到 vendor.css
• 它将所有用户 javascript 文件合并到 scripts.js 和 styles.css 中的 css 文件
• 将这 4 个文件与 index.html 和其他必要的东西（如图像、字体等）捆绑在一起。

我一直在为 Angular2 寻找类似的解决方案，但到目前为止都失败了。我尝试使用在 angular2-seed 项目 中找到的 gulpfile.js 或 angular-cli 项目 中的ng build 来使用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 install 即可。

要捆绑所有节点模块和 bower 组件，您需要 gulp 捆绑包。

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