I am developing an Angular2 application, and I use Gulp to manage tasks to create my application. Here are the tasks I use to 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 the CSS files are inserted into the <style> tag by the Typescript compiler, I would like to delete the CSS files after processing the SASS. The same for Javascript: since the generated JS files are then reduced in one file, I would like all previous JS files to be deleted after Typescript transpiling.
How to achieve this?
Perhaps I can create a new task in which I can delete all the "intermediate" files, but now I know if this can violate the philosophy of Gulp.
How can I run all tasks and then only get app.min.js files?
source share