Gulp file not updating/building css in browser

Question

So I can compile scss to css fine.

However, whenever I change anything in my scss file it has no effect on the page unless I build styles.

My gulp file:

var gulp = require('gulp');
var sass = require('gulp-sass');
var concatCss = require('gulp-concat-css');

// Gulp watches
gulp.task('watch', function() {
  gulp.watch('app/scss/**/*.scss', ['sass']); // Sass watch
  // gulp.watch('dist/css/main.css');
});

// Sass compiler
gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass()) // Convert Sass to CSS
    .pipe(gulp.dest('app/css'))
});

// Compile css files
gulp.task('styles', function () {
  return gulp.src('app/css/**/*.css')
    .pipe(concatCss('main.css'))
    .pipe(gulp.dest('dist/css'));
});

/** Default builds **/

// Build
gulp.task('build', ['styles']);

// Watch and build changes
gulp.task('default', ['build', 'watch']);

My index.html file linked to my dist css file is this correct also?

<link rel="stylesheet" type="text/css" href="dist/css/main.css">

All that keeps happening is I gulp watch files okay but if I change anything (something simple like body background colour) nothing happens. Not even on hard refresh. I have to gulp build styles. I am new to gulp/learning but surely building styles after every change cannot be right?

Thank you for any suggestions. I know I asked about compiling, I worked out why that wasn't working, but I've been going around in circles with this one.

tiomno · Accepted Answer · 2017-08-20 10:27:57Z

1

I think what happens is that the watch task of gulp is only compiling the css from sass, but not concatenating the css in dist/css/main.css.

Add the task styles to the watch method of gulp and try again:

// Gulp watches
gulp.task('watch', function() {
  gulp.watch('app/scss/**/*.scss', ['sass', 'styles']); // Sass watch
});

Hope this helps! :)

answered Aug 20, 2017 at 10:27

tiomno

2,25730 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Gulp file not updating/building css in browser

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related