Porque não temos um gulp.task para o LESS

Por que não precisa! Se deu problema no sass pode ser outra coisa. Você diz que deu erro, qual? Alguma mensagem?

Eu criei uma tarefa para o sass e tbm adicionei ele ao browsersync como watcher. Porém, quando eu cometo algum erro de sintaxe, ele informa o que houve e derruba o servidor.

//gulpfile.js

var gulp = require('gulp')
  ,imagemin = require('gulp-imagemin')
  ,clean = require('gulp-clean')
  ,concat = require('gulp-concat')
  ,htmlReplace = require('gulp-html-replace')
  ,uglify = require('gulp-uglify')
  ,usemin = require('gulp-usemin')
  ,cssmin = require('gulp-cssmin')
  ,browserSync = require('browser-sync').create()
  ,jshint = require('gulp-jshint')
  ,jshintStylish = require('jshint-stylish')
  ,csslint = require('gulp-csslint')
  ,autoprefixer = require('gulp-autoprefixer')
  ,sass = require('gulp-sass');

gulp.task('default', ['copy'], function() {
  gulp.start('build-img', 'usemin');
});

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('build-img', function() {

  return gulp.src('dist/img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/img'));
});

gulp.task('usemin', function() {
  return gulp.src('dist/**/*.html')
    .pipe(usemin({
      js: [uglify],
      css: [autoprefixer]
    }))
    .pipe(gulp.dest('dist'));
});


// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

gulp.task('server', function() {
    browserSync.init({
        server: {
            baseDir: 'src'
        }
    });

    gulp.watch("scss/*.scss", ['sass']);

    gulp.watch('src/**/*').on('change', browserSync.reload);

    gulp.watch('src/js/**/*.js').on('change', function(event) {
        console.log("Linting " + event.path);
        gulp.src(event.path)
            .pipe(jshint())
            .pipe(jshint.formatter(jshintStylish));
    });

    gulp.watch('src/css/**/*.css').on('change', function(event) {
        console.log("Linting " + event.path);
        gulp.src(event.path)
            .pipe(csslint())
            .pipe(csslint.formatter());
    }); 


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


});

Erro no terminal

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: scss/main.scss
Error: Invalid CSS after "p": expected "{", was ""
        on line 6 of scss/main.scss
>> p
   ^

    at options.error (/Users/joselialcosta/workspace/palmela-site/html/node_modules/node-sass/lib/index.js:272:32)

npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/Cellar/node/6.2.2/bin/node" "/usr/local/bin/npm" "run" "gulp" "server"
npm ERR! node v6.2.2
npm ERR! npm  v3.9.5
npm ERR! code ELIFECYCLE
npm ERR! html@1.0.0 gulp: `gulp "server"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the html@1.0.0 gulp script 'gulp "server"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the html package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp "server"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs html
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls html
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/joselialcosta/workspace/palmela-site/html/npm-debug.log

Eu sei o que é. O problema é o seguinte. Quando há um erro no SASS, esse erro capturado pelo compilador derruba seu servidor. Precisamos capturar esse erro e silencia-lo.

Vou ver aqui em um projetinho meu como fiz e já te passo. Chato isso né? Mas há solução para tudo.

Espera ai, eu explico isso no curso! Veja na parte que streamns podem explodir!

https://cursos.alura.com.br/course/gulp/section/7/task/2

Veja o que faço com o less:

gulp.watch('src/less/**/*.less').on('change', function(event) {
       var stream = gulp.src(event.path)
            .pipe(less().on('error', function(erro) {
              console.log('LESS, erro compilação: ' + erro.filename);
              console.log(erro.message);
            }))
            .pipe(gulp.dest('src/css'));
    });

No sass fica assim:

gulp.task('sass', function() {
    return gulp.src("scss/*.scss")
        .pipe(sass().on('error', function(erro) {
              console.log('SASS, erro compilação: ' + erro.filename);
              console.log(erro.message);
            }))
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

Eu uso o evento on('error') para lidar com o mesmo problema que acontece com o LESS. Você precisa fazer a mesma coisa com o SASS.

Se não resolver, tem que monitorar a lista gigante de problemas do SASS na thread deles, justamente esse problema que você esta tendo:

https://github.com/gulpjs/gulp/issues/259

Só que a sua task do SASS esta estranha. É isso mesmo? Eu não uso SASS, por isso não tenho intimidade com esse módulo. Você está no pipe do sass ligando com browser Sync. Nunca fiz assim, nem sei se isso funciona!

Então, acho que é isso, eu vi esse código na documentação do browser-sync mesmo.

https://www.browsersync.io/docs/gulp

Enfim. Muito, mas muito obrigada, Flavio! Vc é um excelente mestre!

Então, testa o lançe do .on('error') para ver se o SASS, assim como LESS, para de derrubar seu server.

Aguardo seu retorno. Ah, e obrigado pelo feedback.

Então, ele não derruba o servidor, aponta o erro ocorrido no terminal porém não dá reload na página :/ Mesmo consertando o erro ele nao recompila o sass e consequentemente eu que tenho que derrubar o servidor e rodar novamente.

Tentou fazer o reload igual eu faço com less?

Sim, coloquei oreload e deu certo! Muito obrigada!

Excelente!

Consegui configurar aqui o meu GULP para Rodar com SASS e BrowserSync... Seria legal mudar o nome do Tópico para algo como GULP + SASS + BrowserSync...pois acabei encontrando o tópico na tentativa e erro Valeu!