0

Preciso de uma ajuda, gostaria que as tarefas server, sass e watch rodassem juntas, ou seja, escrevo scss, em seguida este é copilado para css e por fim o navegador atualiza automaticamente as alterações. Tentei várias vezes porém a tarefa server prevalece sobre as demais

Código do 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);
});

2 Respostas 2

0

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']);
3
  • Obrigado pela ajuda Adrian! O seu script tem muitas tarefas, eu só quero usar as que estão no js que compartilhei. O meu objetivo é exatamente o que você descreveu. 7/11/2018 às 20:53
  • Eu compartilhei o script todo pra quem sabe você pudesse usar alguma parte ou pegasse o fluxo correto. Mas que bom que conseguiu resolver seu problema. :) 8/11/2018 às 11:13
  • Valeu Adrian! Obrigado! 8/11/2018 às 13:43
0

Solucionei o problema, uni a tarefa watch com a sass e server, sendo assim basta usar o comando npm run gulp watch no terminal, que todas as 3 tarefas rodarão simultaneamente:

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']);
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .