Eu não consegui compreender exatamente o que quis dizer aqui:
[...] porém a tarefa server prevalece sobre as demais
Você poderia dar um exemplo do que acontece atualmente?
Mas, pelo que entendi, você quer que ao salvar o arquivo scss, ele compile o sass e a página seja atualizada automaticamente com o BrowserSync.
Meu gulpfile padrão faz isso perfeitamente, veja se funciona como você espera:
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']);