Gulp only loads CSS after browser refresh

Question

When I launch gulp, everything works fine as it should be but when I launch gulp clean (removes build folder) and then I launch gulp again it goes as follows:

• The browser opens
• the html file loads with no mark up
• Browser-sync refreshes the browser
• Now the CSS file loads and html shows with mark up

When checking my console, I notice an error main.css can't be found but it's definitely loaded when I check the sources tab..

gulp.task('compass', function(){
    gulp.src('_sass/**/*.scss')
        .pipe(compass({
            css: 'css/',
            sass: '_sass/',
            image: 'images/',
            logging: true,
            style: 'compressed'
        }))
        .on('error', function(error){
            console.log('Compass Error')
            console.log(error)
        })
        .pipe(minifyCSS({
            keepBreaks: false,
            keepSpecialComments:true
        }))
        .pipe(gulp.dest('css/'));
        console.log('COMPASS')
});

gulp.task('css', function(){
    gulp.src('_css/**/*.css')
        .pipe(gulp.dest('css/'))
});

gulp.task('js', function () {
    gulp.src(['_scripts/plugins/*.js','_scripts/main.js'])
        .pipe(concat(pkg.name + '.js'))
        .pipe(gulp.dest('scripts/'))
        .pipe(rename(pkg.name + '.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('scripts/'));

    gulp.src(['_scripts/vendor/*.js'])
        .pipe(concat(pkg.name + '.js'))
        .pipe(gulp.dest('scripts/'))
        .pipe(rename('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('scripts/'));
});

gulp.task('html', ['jekyll'], function() {
    // --> Minhtml
    gulp.src([
        path.join('_site/', '*.html'),
        path.join('_site/', '*/*/*.html'),
        path.join('_site/', '*/*/*/*.html')
    ])
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('_site/'))
    .pipe(browserSync.reload({stream:true}));
    console.log('HTML')
});

gulp.task('html-watch',['html'], function(done){
    browserSync.reload();
    done();
});

gulp.task('browser-sync', function() {
    browserSync.init(null, {
        server: {
            baseDir: './_site/'
        },
        browser: "google chrome"
    });
});

gulp.task('default', ['css', 'compass', 'js', 'html'], function (event) {
    //--> HTML
    gulp.watch([
        path.join('./', '*.html'),
        path.join('./', '*/*.html'),
        path.join('./', '*/*.md'),
        path.join('./', '*/*.markdown'),
        '!_site/*.html',
        '!_site/*/*.html'
    ], ['html-watch']);

    //--> JS & SASS tasks
    gulp.watch('_sass/**/*.scss', ['compass']);
    gulp.watch('_scripts/**/*.js', ['js']);

    // ---> CSS
    gulp.watch('_css/**/*.css', ['css']);

    //After compass & sass tasks are run, start jekyll
    gulp.watch(['css/*.css', 'scripts/*.js'],['jekyll-watch']);
    gulp.run('browser-sync');
});

// Clean build folders
gulp.task('clean', function (cb) {
  del.sync([
    'scripts',
    'css',
    '_site'
  ], cb);
});

Answer 1

You have browserSync.reload(); only in tasks html and html-watch, so it's reloading only when .html .md etc are changed. You need to put have it in CSS and JS tasks too.

gulp.task('compass', function(){
  gulp.src('_sass/**/*.scss')
    .pipe(compass({
        css: 'css/',
        sass: '_sass/',
        image: 'images/',
        logging: true,
        style: 'compressed'
    }))
    .on('error', function(error){
        console.log('Compass Error')
        console.log(error)
    })
    .pipe(minifyCSS({
        keepBreaks: false,
        keepSpecialComments:true
    }))
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.reload({stream:true}));
    console.log('COMPASS')
});

gulp.task('css', function(){
  gulp.src('_css/**/*.css')
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.reload({stream:true}));
});

gulp.task('js', function () {
  gulp.src(['_scripts/plugins/*.js','_scripts/main.js'])
    .pipe(concat(pkg.name + '.js'))
    .pipe(gulp.dest('scripts/'))
    .pipe(rename(pkg.name + '.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('scripts/'))
    .pipe(browserSync.reload({stream:true}));

  gulp.src(['_scripts/vendor/*.js'])
    .pipe(concat(pkg.name + '.js'))
    .pipe(gulp.dest('scripts/'))
    .pipe(rename('vendors.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('scripts/'))
    .pipe(browserSync.reload({stream:true}));
});

Edit:

Also, your default task is not waiting properly for ['css', 'compass', 'js', 'html'] to finish. You should return a promise for this to work properly.

On css and scss tasks, just add return before gulp.src:

return gulp.src('_css/**/*.css')

return gulp.src('_sass/**/*.scss')

On js task this is a bit more complicated since it has two gulp.src's but you can look here (github) for advise or divide it to two tasks.