CODEWITHSUNDEEP
gulppipe
Jens Törnell
Jens Törnell

Reputation: 24768

Gulp change src

I have this task. First I do one thing with one src. Then I do another thing with another src. How do I "merge" them to be just one pipeline?

gulp.task('css', function() {
    gulp.src('site/patterns/site/site.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(rename('index.css'))
        .pipe(gulp.dest('assets/css'))
        .pipe(minifyCss())
        .pipe(rev())
        .pipe(gulp.dest('assets/css'))
        .pipe(rev.manifest())
        .pipe(revDel({ dest: 'assets/css' }))
        .pipe(gulp.dest('assets/css'))
        .pipe(notify("CSS generated!"))
    ;
    gulp.src( ['assets/css/index-*.css'], {read: false})
        .pipe( revOutdated() ) // leave 2 recent assets (default value) 
        .pipe( cleaner() );
});

Upvotes: 1

Views: 1895

Answers (2)

Dem Pilafian
Dem Pilafian

Reputation: 5976

It's true that separate tasks should not be merged or turned into a single pipeline, but elevating every little micro subtask into a separate task just to make sure it executes in the right order can quickly bloat your gulpfile.js. For complicated build environments, it's easy to end up with so many tasks and dependencies that no one can figure out what's happening.

To execute a subtask serially at the end of a task, use gulp-ignore to clear out the src vinyl stream followed by gulp-add-src to effectively create a new stream.

package.json

"devDependencies": {
   "gulp-add-src": "~0.2",
   "gulp-ignore":  "~2.0",

gulpfile.js

const addsrc = require('gulp-add-src');
const ignore = require('gulp-ignore');
...
gulp.task('generate-css', () =>
   gulp.src('site/patterns/site/site.scss')
      .pipe(sass().on('error', sass.logError))
      ...
      .pipe(ignore.exclude(true))  //clear out src vinyl stream
      .pipe(addsrc.prepend('assets/css/index-*.css'))  //new stream
      .pipe(revOutdated())
      .pipe(cleaner())
   );

This approach makes the task more cohesive, but when in doubt go with separate tasks.

Upvotes: 1

Sven Schoenung
Sven Schoenung

Reputation: 30564

You don't merge them and you don't turn them into a single pipeline. What you have here is two dependent tasks. You should treat them as such.

You want your second pipeline to run only after the first has finished, so that all your .css files have been generated into assests/css. So you put each pipeline into a separate task and make the second depend on the first:

gulp.task('generate-css', function() {
  return gulp.src('site/patterns/site/site.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(rename('index.css'))
    .pipe(gulp.dest('assets/css'))
    .pipe(minifyCss())
    .pipe(rev())
    .pipe(gulp.dest('assets/css'))
    .pipe(rev.manifest())
    .pipe(revDel({ dest: 'assets/css' }))
    .pipe(gulp.dest('assets/css'))
    .pipe(notify("CSS generated!"));
});

gulp.task('css', ['generate-css'], function() {
  return gulp.src( ['assets/css/index-*.css'], {read: false})
    .pipe( revOutdated() ) // leave 2 recent assets (default value) 
    .pipe( cleaner() );
});

Upvotes: 5

Related Questions