1

I am building an Angular 4 application and using gulp to move files. I need to know whats the best practice for a distribution folder or what should an ideal distribution folder look like ? Do I need to segregate the scripts, html and css. As you can see in the gulp file, the libraries are copied to lib folder under the root.

My source folder is as follows

src is the root folder

src\app\

  app.component.ts
  app.module.ts
  app.service.ts
  app.component.html

src\movie\

  movie.component.ts
  movie.module.ts
  movie.service.ts
  movie.component.html

My current distribution folder looks like

Scripts root folder

scripts\app
    app.component.js
    app.module.js

gulp file

   var ts = require('gulp-typescript');
    var gulp = require('gulp');
    var clean = require('gulp-clean');

    var destPath = './libs/';

    // Delete the dist directory
    gulp.task('clean', function () {
        return gulp.src(destPath)
            .pipe(clean());
    });

    gulp.task("scriptsNStyles", function() {
        gulp.src([
                'core-js/client/*.js',
                'systemjs/dist/*.js',
                'reflect-metadata/*.js',
                'rxjs/**',
                'zone.js/dist/*.js',
                '@angular/**/bundles/*.js',            
                'bootstrap/dist/js/*.js'
        ], {
            cwd: "node_modules/**"
        })
            .pipe(gulp.dest("./libs"));
    });

    var tsProject = ts.createProject('src/tsconfig.json', {
        typescript: require('typescript')
    });

    gulp.task('ts', function (done) {
        //var tsResult = tsProject.src()
        var tsResult = gulp.src([
                "src/app/*.ts"
        ])
            .pipe(tsProject(), undefined, ts.reporter.fullReporter());
        return tsResult.js.pipe(gulp.dest('./Scripts/app/'));
    });

    gulp.task('ts', function (done) {
        //var tsResult = tsProject.src()
        var tsResult = gulp.src([
                "src/*.ts"
        ])
            .pipe(tsProject(), undefined, ts.reporter.fullReporter());
        return tsResult.js.pipe(gulp.dest('./Scripts/'));
    });

    gulp.task('watch', ['watch.ts']);

    gulp.task('watch.ts', ['ts'], function () {
        return gulp.watch('src/app/*.ts', ['ts']);
    });

    gulp.task('watch.ts', ['ts'], function () {
        return gulp.watch('src/*.ts', ['ts']);
    });

    gulp.task('default', ['scriptsNStyles', 'watch']);
Tom
  • 8,175
  • 41
  • 136
  • 267
  • Possible duplicate of [How to bundle an Angular app for production](https://stackoverflow.com/questions/37631098/how-to-bundle-an-angular-app-for-production) – Alexander Tsvetkov Jun 11 '17 at 10:02

0 Answers0