Question

我和我的团队最近从AngularJS 1.x转移到Angular2（或AngularJS 2）。我们过去常常使用 Yeoman Angular Generator 进行搭建，grunt使用内置的 gruntfile.js 来构建和创建战争。 gruntfile.js 过去常常使用上述发电机。我们通过对它进行一些小改动来使用它，我们很高兴这个文件基本上是做什么的：

它结合了 package_jodules 文件夹中的 package.json 安装的所有第三方依赖项js文件（即npm install）＆amp;甚至可以选择从 bower_components 文件夹中的 bower.json （即bower install）[如果您使用它]到一个 vendor.js file（通过连接，缩小和uglification来实现）
重复上述css文件的步骤并将其合并到 vendor.css
它将所有用户javascript文件合并到 styles.css 中的 scripts.js 和css文件
将这4个文件与 index.html 捆绑在一起，以及其他必要的内容，如图片，字体等。

我一直在为Angular2寻找类似的解决方案但到目前为止都失败了。我尝试使用{strong> angular2-seed项目中的 gulpfile.js 或 angular-cli项目中的gulp来使用ng build 但没有人提供这样的解决方案。 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']);

<强> OBS！

请记住编辑目标路径。

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

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

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

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

1 个答案: