I currently have 3 watch tasks as so:
gulp.task('watch', function(){
gulp.watch(sassDir + '/*.scss', ['sass']);
gulp.watch(cssDir + '/*.css', ['css']);
gulp.watch(jsDir + '/*.js', ['js']);
})
My issue right now is that when Sass throws an error all watch tasks stops.
I then added .pipe(sass({errLogToConsole: true})) - which seems to keep my sass watch task alive even with an error, however the two other watch tasks doesnt seem to run.
How do I keep all of my watch tasks a live, so that an error in my sass file doesn't stop everything from being compiled?
My setup:
gulp.task('sass', function () {
gulp.src(sassDir + '/**/*.scss')
.pipe(sass({errLogToConsole: true}))
.pipe(gulp.dest(sassTargetDir));
});
gulp.task('css', function() {
gulp.src(cssDir + '/**/*.css')
.pipe(autoprefix({
browsers: ['last 40 versions'],
cascade: false
}))
.pipe(gulp.dest(cssTargetDir))
.pipe(minify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(cssTargetDir));
});
gulp.task('js', function() {
gulp.src(jsDir + '/**/*.js')
.pipe(gulp.dest(jsTargetDir))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(jsTargetDir))
});
gulp.task('watch', function(){
gulp.watch(sassDir + '/*.scss', ['sass']);
gulp.watch(cssDir + '/*.css', ['css']);
gulp.watch(jsDir + '/*.js', ['js']);
})
gulp.task('default', ['sass','css','js','watch']);
errLogToConsole is deprecated (or doesn't work) with Gulp 2.0+. Try using this in place of .pipe(sass({errLogToConsole: true})).
.pipe(sass().on('error', sass.logError))
I use that with the watch command and the errors don't stop Gulp.
I got this from the Gulp sample code and a few more up-to-date Gulp guides. Check here in the future. https://github.com/dlmanning/gulp-sass
Related
I have the following gulp task:
gulp.task("stylePipe", function(){
var postcssPlugins = [
autoprefixer({browsers: ['last 2 version']}), // autoprefixer
cssnano() // css minifier
];
gulp.src("src/sass/*.scss")
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass().on("error", sass.logError)) // scan for errors
.pipe(postcss(postcssPlugins)) // runs postcss plugins listed above
.pipe(rename({ extname: '.min.css' }))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest("dist/css")); // compile into dist
});
gulp.task("styleWatch", ["stylePipe"], browsersync.reload);
gulp.task("watch", function(){
browsersync({
server: {
baseDir: "dist/"
}
});
gulp.watch("src/sass/*.scss", ["styleWatch"]);
});
I want to watch for changes in all the subdirectories listed below
using only the main.scss as src in the gulp.src("src/sass/*.scss") (main.scss is the only file that should be preprocessed whenever there is a change in the subdirectories' files).
How can I accomplish this?
I simply modified
gulp.watch("src/sass/*.scss", ["styleWatch"]);
into
gulp.watch("src/sass/**/*.scss", ["styleWatch"]);
Trying to get the css to update on the browser using browser sync via Gulp on Node.js... What am I doing wrong?
This is the Gulp.js file
var themename = 'playtest haha 1';
var gulp = require('gulp'),
// Prepare and optimize code etc
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
image = require('gulp-image'),
jshint = require('gulp-jshint'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
// Only work with new or updated files
newer = require('gulp-newer'),
// Name of working theme folder
root = '../' + themename + '/',
scss = root + 'sass/',
js = root + 'js/',
img = root + 'images/',
languages = root + 'languages/';
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root));
});
// Optimize images through gulp-image
gulp.task('images', function() {
return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
.pipe(newer(img))
.pipe(image())
.pipe(gulp.dest(img));
});
// JavaScript
gulp.task('javascript', function() {
return gulp.src([js + '*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest(js));
});
// Watch everything
gulp.task('watch', function() {
browserSync.init({
open: 'external',
proxy: 'http://localhost/wordpress', /* add your local host so the task can since the browser thing a bob*/
port: 8080
});
gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
gulp.watch(js + '**/*.js', ['javascript']);
gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
gulp.watch(root + '**/*').on('change', browserSync.reload);
});
// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);
I have using the "local server" link to view the website project on browser and the proxying :http://localhost (do I add the /wordpress path?)
Node.js terminal screen: https://imgur.com/a/9lUNi
Not sure why the css is not updating, the browser sync sign is shown on the browsers and seem to be in sync (tested with multiple browsers), the css is not updating?!
You need to pipe to browserSync at the end of your 'css' task ala:
// CSS via Sass and Autoprefixer
gulp.task('css', function() {
return gulp.src(scss + '{style.scss,rtl.scss}')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
indentType: 'tab',
indentWidth: '1'
}).on('error', sass.logError))
.pipe(postcss([
autoprefixer('last 2 versions', '> 1%')
]))
.pipe(sourcemaps.write(scss + 'maps'))
.pipe(gulp.dest(root))
.pipe(browserSync.reload({ stream:true }));
});
Your
gulp.watch(root + '**/*').on('change', browserSync.reload);
will probably run into lots of race conditions (as for instance running before the 'css' task finishes and running multiple times) and I would remove it and put the reload pipe at the end of your 'javascript' and 'images' tasks as well.
I just had a very frustrating couple of days battling css that refused to update and finally solved it by disabling caching in the Network tab of Chrome Developer Tools. Worked like a charm. I know this is an old question, but thought I'd add the suggestion here for people who find themselves in the same position in the future.
When I use partials on the scss structure, I have to deal with frequent browser sync error (like reloading forever). Notice that it is an intermittent error so it is not a common compiling problem (although it might be somewhat related) and it doesn't happen when I don't use partials. Also, I don't think it is project related or a gulpfile issue either, since it occurs with any project and I have tried more than one gulpfile structure. Anyway, you can check it out below:
var gulp = require('gulp');
var sass = require('gulp-sass');
var clean = require('gulp-clean');
var browserSync = require('browser-sync').create();
var autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function () {
gulp.src('src/scss/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('copy', ['clean'], function () {
return gulp.src('src/**/*')
.pipe(gulp.dest('dist'));
});
gulp.task('clean', function () {
return gulp.src('dist')
.pipe(clean());
});
gulp.task('serve',function () {
browserSync.init({
server: {
baseDir: 'src/'
}
});
gulp.watch('src/scss/*.scss', ['styles']);
gulp.watch('src/**/*').on('change', browserSync.reload)
});
gulp.task('default', ['styles', 'serve']);
A couple of things that might help: (1) add a return statement in your 'styles' task and (2) remove the second watch because it calls browserSync.reload which is already called at the end of the 'styles' task and you don't need to call it twice. So make these changes:
gulp.task('styles', function () {
// added return below
return gulp.src('src/scss/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({stream: true}));
});
and the second watch is unnecessary and possibly a problem:
gulp.task('serve',function () {
browserSync.init({
server: {
baseDir: 'src/'
}
});
gulp.watch('src/scss/*.scss', ['styles']);
// remove below watch
// gulp.watch('src/**/*').on('change', browserSync.reload)
gulp.watch("./*.html").on("change", browserSync.reload);
});
When I run my gulp file everything works as expected and I receive no errors. However, whenever I make changes to the SCSS files, the terminal shows the cleanCss, sass, and autoprefixer tasks running but the changes are not reflected in the final CSS file.
I have gone through everything and can't come up with why this is happening. The tasks running out of order is all I can think of but I can't figure out why they run fine on the first run but not on subsequent runs. Here's some of my code:
// default gulp task
gulp.task('default', ['cleanCss', 'cleanJs', 'cleanImg', 'sass', 'scripts', 'imagePro', 'autoprefixer', 'watch']);
//watch for changes
gulp.task('watch', function() {
gulp.watch('./assets/img/*', ['cleanImg', 'imagePro']);
gulp.watch('./assets/js/*.js', ['cleanJs', 'scripts']);
gulp.watch('./assets/sass/bootstrap/*.scss', ['cleanCss', 'sass', 'autoprefixer']);
});
//
//Compile scss to css
//
gulp.task('sass', ['cleanCss'], function () {
gulp.src('./assets/sass/*.scss')
.pipe(sass.sync().on('error', sass.logError))
// .pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('./assets/css'));
});
//
// Post Process CSS
//
// Add Vendor Prefixes
gulp.task('autoprefixer', ['cleanCss', 'sass'], function() {
gulp.src('./assets/css/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./assets/build/css'));
});
If you want your asynchronous tasks to run in order you need to return the stream. Example:
gulp.task('sass', ['cleanCss'], function () {
return gulp.src('./assets/sass/*.scss')
.pipe(sass.sync().on('error', sass.logError))
// .pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('./assets/css'));
});
Check the docs for Async task support in https://github.com/gulpjs/gulp/blob/master/docs/API.md
If I compile the scss with gulp-ruby-sass, gulp-autoprefixer works, but if a compile de scss with gulp-compass autoprefixer doen't work. This is the code:
gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
livereload = require('gulp-livereload'),
prefix = require('gulp-autoprefixer'),
compass = require('gulp-compass');
// Styles .scss files to .css
gulp.task('style', function(){
return sass('src/sass/style.scss', {
style: 'expanded'
})
.on('error', sass.logError)
.pipe(prefix('last 2 version'))
.pipe(gulp.dest('dist/'))
.pipe(livereload());
});
// Compass to .css
gulp.task('compass', function(){
gulp.src('src/sass/*.sass')
.pipe(compass({
config_file: './config.rb',
css: 'dist/',
sass: 'src/sass',
style: 'expanded'
}))
.pipe(prefix('last 2 versions'))
.pipe(gulp.dest('dist/'))
.pipe(livereload());
});
// Watch with compass
gulp.task('watch', function(){
livereload.listen();
gulp.watch('src/sass/*.scss', ['compass']);
});
// Watch with ruby-sass
gulp.task('watch2', function(){
livereload.listen();
gulp.watch('src/sass/*.scss', ['style']);
});
watch task works, watch2 task compile the scss but doesn't work autoprefixer.
That might be not a direct answer to your problem, but you might consider to replace "gulp-ruby-sass" and "gulp-compass" with "gulp-scss" package which is way more popular and see if that resolves your issue.
Take a look on my setup, you might like it and/or find some useful information: Reaper