angular - 什么是适合 Angular2 项目的构建系统？

Question

我和我的团队最近从 AngularJS 1.x 转向了 Angular2(或 AngularJS 2)。我们曾经使用 Yeoman Angular Generator 作为脚手架，使用 grunt 使用内置的 gruntfile.js 构建和创建 war ，该文件过去由默认使用上述生成器。我们通过对它进行一些小改动来使用它，我们很高兴。
该文件的主要作用是:

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

我一直在为 Angular2 寻找类似的解决方案，但到目前为止都失败了。我尝试通过使用 angular2-seed 项目 中的 gulpfile.js 或来自 的 ng build 来使用 gulp angular-cli 项目 但没有一个提供这样的解决方案。问题总是出现在 node_modules 文件夹中。这些文件夹中完全不需要的 typescript ts 文件被内置到 bundle 中。

现在我明白 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']);

天啊!

记得编辑目标路径。

我刚刚添加了凉亭处理。但是当涉及到节点模块时，您只需要保留 package.json 文件，然后在需要模块时运行 npm install。

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

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