Marcelo Formentão
Marcelo Formentão

Reputation: 846

Have to run gulp more than once to get Style changes

I'm having a problem with compiling my CSS, when I make a change in my SASS file it doesn't change the final file, just after trying more than once.

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var rename = require('gulp-rename');
    var postcss = require('gulp-postcss');
    var autoprefixer = require('autoprefixer');
    var cssnano = require('cssnano');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');

    //CSS Tasks
    gulp.task('styles', function() {
        console.log("Compilling SASS");
        gulp.src('app/sass/style.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([ autoprefixer() ]))
        .pipe(rename('999_style.css'))
        .pipe(gulp.dest('app/css/'));
    });
    gulp.task('stylescompress', ['styles'], function() {
        console.log("Concating and moving all the css files in styles folder");
        gulp.src("app/css/**.css")
        .pipe(concat('style.css'))
        .pipe(postcss([ cssnano() ]))
        .pipe(gulp.dest('css/'));
    });

    //Javascript Tasks
    gulp.task('jscompress', function() {
        //console.log("Concating and moving all the js files in javascript folder");
        gulp.src("app/js/**.js")
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest('js/'))
        .pipe(rename('scripts.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('js/'))
    });

    //Watch task
    gulp.task('default',function() {
        gulp.watch(['app/sass/**/*.scss'],['stylescompress'])
        .on('change', function(event) {
            console.log('SASS - File ' + event.path + ' was ' + event.type + ', running tasks...');
        });
        gulp.watch(['app/js/**/*.js'],['jscompress'])
        .on('change', function(event) {
            console.log('SCRIPTS - File ' + event.path + ' was ' + event.type + ', running tasks...');
        });
    });

As you can see, I used all according to Gulp Docs, but I didn't find out what's going on.

Upvotes: 3

Views: 1039

Answers (2)

Shadowloom
Shadowloom

Reputation: 1

Install browser-sync and add

var browserSync = require('browser-sync').create();

In your sass task add browserSync

gulp.task('sass', function() {
    console.log("Compilling SASS");
    gulp.src('app/sass/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([ autoprefixer() ]))
    .pipe(rename('999_style.css'))
    .pipe(gulp.dest('app/css/'))
    .pipe(browserSync.reload({
      stream: true
    }))
});

Then add a 'watch' task

gulp.task('watch', ['browserSync', 'sass'], function() {
  gulp.watch('src/scss/**/*.scss', ['sass']);
});

Then in your 'default'

gulp.task('default', function(callback) {
  runSequence(['sass', 'browserSync', 'watch'],
    callback
  )
})

Now run gulp watch :)

Upvotes: 0

Marcelo Formentão
Marcelo Formentão

Reputation: 846

I was missing a return of when it was done, making Gulp understand when it should call the next task, it's documented in Gulp Docs

I used the stream to make gulp understand when each task end, like this:

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

Upvotes: 4

Related Questions