0

Meu GULP:

var gulp      = require('gulp'),
	sass        = require('gulp-ruby-sass'),
	imagemin    = require('gulp-imagemin'),
	changed     = require('gulp-changed'),
	browserSync = require('browser-sync'),
    livereload = require('gulp-livereload');

gulp.task('sass', function () {
  gulp.src('./assets/sass/*.scss')
    .pipe(sass({compass: false}))
    .on('error', function (err) { console.log(err.message); })
    .pipe(gulp.dest('./dist/css'))
    .pipe(livereload());
});

gulp.task('jpg', function() {
	gulp.src('./assets/img/**/*.jpg')
		.pipe(changed('./dist/img/'))
		.pipe(imagemin({
			progressive: true
		}))
		.pipe(gulp.dest('./dist/img/'));
});

gulp.task('browser-sync', function() {
    browserSync.init(['./dist/css/**', './views/**'], {
        server: {
            baseDir: './',
            index: './views/index.html'
        }
    });
});

gulp.task('watch', ['sass', 'browser-sync'], function () { 
    livereload.listen();
    gulp.watch('./assets/sass/**/*.scss', ['sass']);
});

Quando executo, tudo funciona, mas o SASS não detecta alterações. O Index.html funciona.

O que pode estar errado?

1 Resposta 1

0

O problema está no módulo gulp-ruby-sass que é na minha humilde opinião ultrapassada. Te aconselho a fazer o seguinte (prometo que não vai doer):

  • Rode o comando npm uninstall --save | --save-dev gulp-ruby-sass, o pipe foi apenas para dividir os parâmetros, você deverá escolher apenas um, isso dependerá aonde foi que você instalou a dependência, se foi dentro de dependencies: {} então é --save ou se foi dentro de devDependencies: {} então é --save-dev. Para mais informações acesse https://docs.npmjs.com/cli/uninstall

  • Logo em seguida instale o módulo npm install --save-dev gulp-sass, esse módulo é uma versão mais atualizada do gulp-ruby-sass com algumas melhorias (inclusive de performance).

  • Por último, vá até o gulpfile.js e substitua o parâmetro de require() de gulp-ruby-sass para gulp-sass e rode a task novamente.


Update

Também te aconselho a utilizar a extensão **/*.(js|css|jpg|etc) pois utilizando o marcador ** você consegue rodar as tasks de uma forma recursiva, ou seja, a task será rodada dentro dos sub-diretórios do diretório especificado.

Como por exemplo a task gulp sass definida gulp.task('./assets/sass/*.scss') rodará apenas para os arquivos .scss dentro de ./assets/sass/, porém se você programar a task para rodar recursivamente, ela terá acesso a sub-diretórios dentro de ./assets/sass/, ficando dessa forma gulp.task('./assets/sass/**/*.scss'), simples né?

3
  • Obrigado pela dica!
    – Shelon
    Commented 18/07/2016 às 10:29
  • Se a resposta foi útil pra você, ficaria feliz se pudesse marcar ela como a correta.
    – iszwnc
    Commented 18/07/2016 às 11:52
  • Marcado :) e foi o que fiz, rodou perfeitamente.
    – Shelon
    Commented 18/07/2016 às 12:29

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 .