CODEWITHSUNDEEP
javascriptnode.jssassgulp
Corey
Corey

Reputation: 45

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 -->

Upvotes: 0

Views: 231

Answers (2)

Mark
Mark

Reputation: 181449

You have this link:

<link rel="stylesheet" href="css/style.css">

but your sass task doesn't explicitly output "style.css" unless you have a style.scss file which would typically import all other scss files as partials (like "_colors.scss"). Note the underscore indicating that file is a partial. In that case gulp-sass will create "style.css" which imports all those partials. Otherwise it will create one css file for each of your non-partial scss files - but you only link to one of those.

The other alternative is to concat your css files into one file named "style.css".

Upvotes: 0

Flow Wolf
Flow Wolf

Reputation: 509

1: Where is the output css of all those sass files going? is that referenced in the html calling the styles? 2: Maybe you are missing the destination folder? take this example:

gulp.src('src/scss/application.scss')
    .pipe(sass({
      includePaths: [
       'node_modules/foundation-sites/scss',
       'node_modules/compass-mixins/lib'
      ],
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(gulp.dest('./public/css/'))

If you check last line I call gulp.dest to define the output of the sass file.

Upvotes: 0

Related Questions