5

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?

smartmouse
  • 13,912
  • 34
  • 100
  • 166

0 Answers0