sassgulpgulp-sasslivereloadgulp-browser-sync

Browsersync without scss?


I'm new to gulp, and I'm trying to set up browsersync without scss. all of the examples i have seen have you set it up for pre-processing sass. How can I set it to watch the plain css? Here's my gulpfile.js:

const gulp = require('gulp'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass');


// Static server & watch scss + html files
gulp.task('watch', ['sass'], function() {

browserSync.init({
server: '.'
});

gulp.watch('./assets/**/*.scss', ['sass'], browserSync.reload);
gulp.watch('./*.html').on('change', browserSync.reload);
gulp.watch('./js/**/*.js', browserSync.reload);

});

// Compile Sass into CSS & inject into browsers
gulp.task('sass', function() {
return gulp.src('./assets/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});


// default will also watch
gulp.task('default', ['watch']);

Solution

  • Try this block of code. It worked for me. I don't think the sass = require('gulp-sass') is necessary, though.

    const gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    sass = require('gulp-sass');
    
    
    // Static server & watch scss + html files
    gulp.task('watch', function() {
    
    browserSync.init({
    server: '.'
    });
    
    gulp.watch('./assets/*.css', browserSync.reload);
    gulp.watch('./*.html').on('change', browserSync.reload);
    gulp.watch('./js/*.js', browserSync.reload);
    
    });
    
    
    // default will also watch
    gulp.task('default', ['watch']);