使用gulp为angular2创建生产构建

时间:2017-01-13 03:04:41

标签: angular typescript build gulp

我正在尝试使用gulp

创建角度为2的生成版本

以下是我的gulp文件

    const gulp = require('gulp');
    const browserSync = require('browser-sync').create();
    const del = require('del');
    const typescript = require('gulp-typescript');
    const tscConfig = require('./tsconfig.json');
    const tslint = require('gulp-tslint');

   // clean the contents of the distribution directory
   gulp.task('clean', function () {
     return del('dist/**/*');
   });

   // TypeScript compile
   gulp.task('compile', ['clean'], function () {
     return gulp
      .src('app/**/*.ts')
      .pipe(typescript(tscConfig.compilerOptions))
      .pipe(gulp.dest('dist/app'));
   });

  gulp.task('copy:libs', ['clean'], function() {
   return gulp.src([
    'node_modules/core-js/client/shim.min.js',
    'node_modules/zone.js/dist/zone.js',
    'node_modules/reflect-metadata/Reflect.js',
    'node_modules/systemjs/dist/system.src.js',
   ])
   .pipe(gulp.dest('dist/lib'))
 });

 // copy static assets - i.e. non TypeScript compiled source
 gulp.task('copy:assets', ['clean'], function() {
   return gulp.src(['app/**/*', 'index.html', 'styles.css', '!app/**/*.ts'], { base : './' })
     .pipe(gulp.dest('dist'))
 });

 gulp.task('tslint', function() {
   return gulp.src('app/**/*.ts')
    .pipe(tslint())
    .pipe(tslint.report('verbose'));
 });

  gulp.task('build', ['tslint', 'compile', 'copy:libs', 'copy:assets']);
  gulp.task('default', ['build']);

  gulp.task('watch', ['build']);gulp.task('watch', function() {
     gulp.watch('app/**/*.ts', ['compile']).on('change', browserSync.reload);
     gulp.watch('app/**/*.html', ['compile']).on('change', browserSync.reload);
  });

  // create a task that ensures the `js` task is complete before
  // reloading browsers
  gulp.task('js-watch', ['watch'], function (done) {

  });

  gulp.task('browser-sync', function() {
    browserSync.init({
      server: {
          baseDir: "./"
      }
  });
 });

// Static Server + watching scss/html files
 gulp.task('serve', ['js-watch', 'browser-sync'], function() {

     browserSync.init({
       server: "./"
     });
 });

当我运行gulp时,它会创建dist文件夹,如果我将dist文件夹复制到apache,app会正常运行。 问题是页面加载有太多依赖关系, 我正在尝试创建一个可以加快页面加载的构建。

0 个答案:

没有答案