How to make Gulp wait until dest file is finished?

Jaakko Karhu

I want to run gulp-sass and after that check, what is the size of the generated css file.

If I have the following in my gulpfile:

gulp.task('sass', function () {

  gulp.src('src/scss/style.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest(buildPath+'css'))
    .pipe(connect.reload());
});

gulp.task('css.size', ['sass'], function() {
  gulp.src(buildPath+'css/style.css')
      .pipe(filesize())
})

gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {

  gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
  gulp.watch('./src/**/*.scss', ['sass']);
  gulp.watch(buildPath+'css/style.css', ['css.size']);
});

I end up in the never ending limbo of building css file, apparently because the css.size task has to wait for the sass task to finish. Correct me if I am wrong. For me it does not make sense, but I have not found any other explanation, especially because if I comment the style.css watch task, the sass task is ran only once, as expected.

Now, if I modify the gulpfile like this:

gulp.task('sass', function () {

  gulp.src('src/scss/style.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest(buildPath+'css'))
    .pipe(connect.reload());
});

gulp.task('css.size', ['sass'], function() {
  gulp.src(buildPath+'css/style.css')
      .pipe(filesize())
})

gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {

  gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
  gulp.watch('./src/**/*.scss', ['sass', 'css.size']);
});

or like this

gulp.task('sass', function () {

  gulp.src('src/scss/style.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest(buildPath+'css'))
    .pipe(connect.reload());
  gulp.src(buildPath+'css/style.css')
      .pipe(filesize())
});

gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {

  gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
  gulp.watch('./src/**/*.scss', ['sass']);
});

I get the wrong results. The file is apparently not compiled yet and I get the file size of the old file.

How should I arrange my tasks so I could get the file size of freshly built css file?

sebbab

Make your sass task return the stream. Like this:

gulp.task('sass', function () {
  return gulp.src('src/scss/style.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest(buildPath+'css'))
    .pipe(connect.reload());
});

Note the return before the gulp.src. That way, the css.size task will know when the sass task finishes, and start after it.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to wait until my batch file is finished

From Dev

How to make python wait until the previous task is finished?

From Dev

How do I make an Excel RefreshAll wait to close until finished?

From Dev

How to make python wait until the previous task is finished?

From Dev

How to make JS wait until protocol execution finished

From Dev

How to make a python Script wait until download has finished

From Dev

Make Excel VBA wait until operation is finished

From Dev

how to make gulp.dest dynamic

From Java

How to wait until all async calls are finished

From Dev

How to wait until an animation is finished in Swift?

From Dev

How to wait until all NSOperations is finished?

From Dev

how to wait until a web request with HttpWebRequest is finished?

From Dev

How to wait until some jQuery methods are finished?

From Dev

How to wait until networking by Alamofire has finished?

From Dev

How to get jQuery to wait until an animation is finished?

From Dev

Android - How to wait until a SnapshotListener has finished?

From Dev

C# .Net - How to make application wait until all threads created in Library are finished

From Dev

Wait until function is finished

From Dev

How do I wait to delete a file until after the program I started has finished using it?

From Dev

Make slideToggle wait until other div's slideUps have finished?

From Dev

How to wait until all tasks are finished before running code

From Dev

How to wait until all tasks finished without blocking UI thread?

From Dev

In NodeJs how can I wait until my http get is finished?

From Dev

How can I wait until NSXMLParserDelegate methods finished?

From Dev

How to wait until an http request is finished before moving on?

From Dev

How to wait until canvas has finished re-rendering?

From Dev

Wait until forEach loop is finished?

From Dev

Wait until gobalEval has finished

From Dev

On click myFunction and wait until it is finished

Related Related

  1. 1

    How to wait until my batch file is finished

  2. 2

    How to make python wait until the previous task is finished?

  3. 3

    How do I make an Excel RefreshAll wait to close until finished?

  4. 4

    How to make python wait until the previous task is finished?

  5. 5

    How to make JS wait until protocol execution finished

  6. 6

    How to make a python Script wait until download has finished

  7. 7

    Make Excel VBA wait until operation is finished

  8. 8

    how to make gulp.dest dynamic

  9. 9

    How to wait until all async calls are finished

  10. 10

    How to wait until an animation is finished in Swift?

  11. 11

    How to wait until all NSOperations is finished?

  12. 12

    how to wait until a web request with HttpWebRequest is finished?

  13. 13

    How to wait until some jQuery methods are finished?

  14. 14

    How to wait until networking by Alamofire has finished?

  15. 15

    How to get jQuery to wait until an animation is finished?

  16. 16

    Android - How to wait until a SnapshotListener has finished?

  17. 17

    C# .Net - How to make application wait until all threads created in Library are finished

  18. 18

    Wait until function is finished

  19. 19

    How do I wait to delete a file until after the program I started has finished using it?

  20. 20

    Make slideToggle wait until other div's slideUps have finished?

  21. 21

    How to wait until all tasks are finished before running code

  22. 22

    How to wait until all tasks finished without blocking UI thread?

  23. 23

    In NodeJs how can I wait until my http get is finished?

  24. 24

    How can I wait until NSXMLParserDelegate methods finished?

  25. 25

    How to wait until an http request is finished before moving on?

  26. 26

    How to wait until canvas has finished re-rendering?

  27. 27

    Wait until forEach loop is finished?

  28. 28

    Wait until gobalEval has finished

  29. 29

    On click myFunction and wait until it is finished

HotTag

Archive