什麼是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項目的良好構建系統？

回答

相關問題