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']);