Simultaneous tasks in Gulp

Question

I need some help, I’d like the chores server, Sass and watch run together, ie write scss, then this is copied to css and finally the browser automatically updates the changes. I tried several times but the task server prevails over the others

Code of the gulpfile:

var gulp = require('gulp')
,sass = require('gulp-sass')
,watch = require('gulp-watch')
,browserSync = require ('browser-sync');

gulp.task('sass', function () {
   	 return gulp.src('src/sass/*.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(gulp.dest('src/css'));
	});

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

gulp.task('server',function(){
	browserSync.init({ 
		server: {
			baseDir :'src'
		}		
	});
	gulp.watch('src/**/*').on('change', browserSync.reload);
});

Answer 1

I couldn’t understand exactly what I meant here:

[...] but the server task prevails over the others

You could give an example of what happens today?

But as I understand it, you want when saving the scss file, it will embed Sass and the page will be automatically updated with Browsersync.

My standard gulpfile does it perfectly, see if it works as you expect:

gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    prefix = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    notify = require('gulp-notify'),
    rename = require('gulp-rename');


var browserSync = require('browser-sync').create();
var reload = browserSync.reload;


// Static Server + watching scss/html files
gulp.task('serve', ['compileStyles'], function() {

    browserSync.init({
        server: "./"
    });

    var watcher = gulp.watch(["sass/*.{sass,scss}", "scss/**/*.{sass,scss}"], ['compileStyles']);
    gulp.watch("*.html").on('change', browserSync.reload);
    gulp.watch("js/*.js").on('change', browserSync.reload);
    gulp.watch("css/*.css").on('change', browserSync.reload);


    watcher.on('change', function(event) {
        console.log('SASS/SCSS File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

function processSass(gulp, file) {
    gulp.src('sass/' + file + '.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(rename(file + '.css'))
        .pipe(gulp.dest('css/'))
        .pipe(prefix('last 3 version'));
    //.pipe(minifycss());
}

function processScss(gulp, file) {
    gulp.src('scss/' + file + '.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(rename(file + '.css'))
        .pipe(gulp.dest('css/'))
        .pipe(prefix('last 3 version'));
    //.pipe(minifycss());
}

gulp.task('compileStyles', function() {

    processSass(gulp, 'style');
    processSass(gulp, 'fonts');
    processScss(gulp, 'bootstrap/bootstrap');

    gulp.src('./')
        .pipe(notify("Arquivos Atualizados com sucesso!"));

    browserSync.reload();
});

gulp.task('default', ['serve']);

Answer 2

I solved the problem, joined the task watch with the Sass and server, so just use the command npm run Gulp watch at the terminal, that all 3 tasks will run simultaneously:

var gulp = require('gulp')
,sass = require('gulp-sass')
,watch = require('gulp-watch')
,browserSync = require ('browser-sync');

gulp.task('sass', function () {
   	 return gulp.src('src/sass/*.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(gulp.dest('src/css'));
	});

gulp.task('server',function(){
	browserSync.init({ 
		server: {
			baseDir :'src'
		}		
	});
	gulp.watch('src/**/*').on('change', browserSync.reload);
});

gulp.task('watch', ['sass', 'server'], function () {  
    gulp.watch('src/sass/*.scss', ['sass']);
});