i'm developing an Angular2 app and i'm using Gulp to manage tasks for building my app. Here is the tasks i use for the build:
gulpfile.js
// Generating minified CSS files for Angular2 Component styleUrls
gulp.task('styles', function(cb) {
return gulp.src('src/app/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss())
.pipe(gulp.dest(paths.dist + '/app/'));
});
// Embedding minified HTML templates into Typescript source files
gulp.task('templates', function () {
return gulp.src('src/app/**/*.ts')
.pipe(embedTemplates({sourceType:'ts'}))
.pipe(gulp.dest('dist/app'));
});
// Transpiling Typescript files to Javascripts ones
gulp.task('compile', function () {
return gulp.src(['dist/**/*.ts', 'typings/**/*.d.ts'])
.pipe(tsCompiler())
.pipe(gulp.dest(paths.dist));
});
// Creating one minified JS file
gulp.task('scripts', ['compile'], function(cb) {
return gulp.src(paths.dist + '/**/*.js')
.pipe(concat('app.min.js'))
.pipe(minifyJs())
.pipe(gulp.dest(paths.dist));
});
Since CSS files are injected into <style>
tag by Typescript compiler, i would like to have CSS files deleted after SASS processing.
The same for Javascript: since generated JS files are then minified in one file i would like to have all previous JS files deleted after Typescript transpiling.
How to reach that?
Maybe i can create a new task in which i can remove all "intermediate" files, but i do now know if this could break Gulp philosophy.
How can i run all tasks and then obtain just app.min.js
files?