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

Question

我和我的团队最近从AngularJS 1.x转向Angular2。我们曾经使用Yeoman Angular Generator进行脚手架构建，使用grunt进行构建并创建war包，这是由上述生成器默认创建的gruntfile.js实现的。我们对其进行了一些小修改，就可以使用了。

这个文件的基本作用是：

• 将所有第三方依赖项js文件（从package.json中安装在node_modules文件夹中）和可选的bower.json文件（从bower_components文件夹中，如果您使用它）组合成一个单独的vendor.js文件（通过串联、缩小和混淆实现）
• 将css文件重复以上步骤，组合成vendor.css
• 将所有用户javascript文件组合到scripts.js中，css文件组合到styles.css中
• 将这4个文件与index.html和其他必要的东西（如图像、字体等）捆绑在一起

我一直在寻找类似于Angular2的解决方案，但迄今为止都没有成功。我尝试使用angular2-seed项目中找到的gulpfile.js或者angular-cli项目中的ng build，但都没有提供这样的解决方案。问题总是出现在node_modules文件夹中。这些文件夹中的typescript ts文件是完全不必要的，但却被编译进bundle中。

现在我确实理解Angular2和Angular1的不同之处，但我该如何构建一个好的版本？我应该采取什么方法？我能否获得类似于Angular1的任何东西？

- theHeman

---

你是使用纯JS还是TypeScript？ - user3316920

我在使用Typescript。 - theHeman

你读过这篇博客文章吗？http://blog.scottlogic.com/2015/12/24/creating-an-angular-2-build.html他在gulp中使用ECMA 6设置。看起来你可以采用以前的gulp配置，然后粘贴？ - user3316920

@McBoman，我的以前的配置是基于Grunt而不是Gulp，它没有处理TypeScript的方法，所以我不能使用它。这个博客看起来不错，我正在浏览它。 - theHeman

我会给你写一个用于处理 CSS 和 TS 的 Gulp 文件。你使用 SASS 或 LESS 吗？ - user3316920

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']);

注意！

记得编辑目标路径。

我刚刚添加了对bower的处理。但是当涉及到node模块时，你只需要保留你的package.json文件，然后在需要模块时运行npm install。

要捆绑所有的node模块和bower组件，你需要使用gulp bundle kit。

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

- user3316920

---

嗨，McBoman，我们在这种情况下如何处理node_modules？ - theHeman

你是否考虑安装 package.json 中的所有 npm 包？ - user3316920

请阅读OBS标志下的编辑。希望能有所帮助。 - user3316920

抱歉，我因为一些工作事宜不在办公室。我会尽快处理并更新您的情况。 - theHeman

@ashhem，你找到结果了吗？ - user3316920