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

我和我的团队最近从AngularJS 1.x转移到Angular2（或AngularJS 2）。我们曾经使用Yeoman角发生器脚手架和grunt用于建立和创建一个战争使用内置的gruntfile.js用于默认情况下与上述发电机创建。我们用它做了一些小的改动，我们很好去。
什么这个文件主要作用是：什么是Angular2项目的良好构建系统？

它结合的package.json安装在node_modules文件夹（即npm install）&可选甚至bower.json在所有第三方的依赖js文件bower_components文件夹（即bower install）[如果您正在使用它]成一个单独的vendor.js文件（通过做连接，缩小和uglification是否如此）
它重复对CSS文件的上述步骤和它组合成vendor.css
它结合的JavaScript文件到scripts.js中和CSS文件中styles.css的
在捆绑这些4的所有用户与的index.html和其他必要的东西如图像，字体等文件

我一直在寻找一个Angular2类似的解决方案，但到目前为止都失败了。我试图通过使用gulpfile.js从角-CLI项目在angular2种子项目或ng build发现使用gulp但都没有提供这样的解决方案。问题始终发生在node_modules文件夹中。这些文件夹中的文件完全不必要的文件将被内置到该文件夹中。

现在我明白了，Angular2与Angular1不同，除了如何构建一个良好的构建？我应该采取什么方法？我能达到像Angular1那样的东西吗？

来源

2016-07-29 theHeman

您是否使用纯JS？还是TypeScript？ – McBoman

我正在使用Typescript – theHeman

您是否阅读过这篇博文？ http://blog.scottlogic.com/2015/12/24/creating-an-angular-2-build.html 他使用ECMA 6设置为吞咽。它看起来像你可以把你以前的gulp配置，只是粘贴？ – McBoman

所以，如果你使用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。

要捆绑所有节点模块和凉亭组件，您需要使用gulp捆绑套件。

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

来源

2016-07-29 08:46:13 McBoman

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

您是否想要从package.json安装所有npm包？ – McBoman

是的，他们是必需的 – theHeman

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

回答

相关问题