Sunday, 19 March 2017

sass not compiling with gulp/plumber/browsersync

I'm just getting back into programming and trying to get the skeleton of an SPA afloat. I've gotten it to the point where Gulp is watching all my tasks. It is recognizing when I change HTML and BrowserSync is working fine without having to refresh. The problem I'm having is more SCSS/CSS related. It was working the last time I checked, I did an npm update so now everything is updated. It doesn't seem to want to watch for changes with scss. I am thinking it is partly due to just how it is linked within files or maybe the gulpfile is setup incorrectly for a sass task.

My folder set up is:

project app css/ scss/ index.html js/ gulpfile.js

Anyone seeing something I'm not seeing here? Again, everything loads up, bootstrap is applied, browsersync enabled, but no changes are being minified into CSS from my style.scss.

Thanks!

Gulp File:

/* Required */

var gulp = require('gulp');
var     uglify = require('gulp-uglify');
var     rename = require('gulp-rename');
var     sass = require('gulp-sass');
var     browserSync = require('browser-sync').create();
var     reload = browserSync.reload;
var plumber = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');

/* Scripts Task */

gulp.task('scripts', function(){
        gulp.src(['app/js/**/*.js', '!app/js/**/*min.js'])
        .pipe(plumber())
        .pipe(rename({suffix:'.min'}))
        .pipe(uglify())
        .pipe(gulp.dest('app/js'))
        .pipe(reload({stream:true}));
});

/* Sass Task */

gulp.task('sass', function(){
        return gulp.src('app/scss/**/*.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer('last 2 versions'))
        .pipe(gulp.dest('app/css'))
        .pipe(reload({stream:true}));
});

/* HTML Task */

gulp.task('html', function(){
        gulp.src('app/**/*.html')
        .pipe(plumber())
        .pipe(reload({stream:true}));
});

/* Browser-Sync Task */

gulp.task('default', ['browser-sync'], function () {
});

gulp.task('browser-sync', function() {
        browserSync.init(null, {
                proxy: "http://localhost:5000",
        files: ["public/**/*.*"],
        browser: "opera",
        port: 7000,
        });
});

/* gulp.task('nodemon', function (cb) {
        
        var started = false;
        
        return nodemon({
                script: 'server.js'
        }).on('start', function () {
                // to avoid nodemon being started multiple times
                // thanks @matthisk
                if (!started) {
                        cb();
                        started = true; 
                } 
        });
}); */

/* Watch Task */

gulp.task('watch', function(){
        gulp.watch('app/js/**/*.js', ['scripts']);
        gulp.watch('app/scss/**/*.scss', ['sass']);
        gulp.watch('app/**/*.html', ['html']);
})

/* Default */

gulp.task('default', ['scripts', 'sass', 'html', 'browser-sync', 'watch']);

Stylesheet Includes:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <!-- Modernizr -->


via Corey

No comments:

Post a Comment