Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

usando o gulp com sass

Referente ao curso Gulp: automação de tarefas front-end

por Erick Alessandro dos Santos Castelo Branco
| 182.5k xp | 34 posts
Desenvolvedor

Bom professor, como já tinha feito o curso de sass, tava tentando implementá-lo ao invés do less mas não estou obtendo resultados. Primeiro tentei assim:

gulp.watch('sass/**/*.scss').on('change', function (event) {
       gulp.src(event.path)
           .pipe(sass())
           .pipe(gulp.dest('src/css'))
    });

Depois fui tentando assim :

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

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

Nenhum dos dois funcionaram. Usei o seguinte comando pra instalar: 

npm install gulp-sass --save-dev

E a versão do gulp-sass é ^3.1.0

4 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Bom dia! O que aconteceu? Alguma mensagem? Compartilhe o máximo de informação possível Erick, inclusive qual é o seu sistema operacional. Compartilhe também seu package.json.

por Erick Alessandro dos Santos Castelo Branco
| 182.5k xp | 34 posts
Desenvolvedor

Bom dia professor meu sistema operacional é o UBUNTU 16.04, meu package.json é esse:

{
  "name": "projeto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.9.8",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.2",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.6.0",
    "gulp-csslint": "^0.2.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-html-replace": "^1.5.4",
    "gulp-imagemin": "^2.3.0",
    "gulp-jshint": "^1.11.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^1.4.1",
    "gulp-usemin": "^0.3.14",
    "jshint-stylish": "^2.0.1"
  }
}

Eu criei uma pasta sass assim como o senhor criou o less, na raiz de src. E então eu criei o estilos.scss e colei la dentro o css de estilos.css. Comentei a tarefa default e coloquei o seguinte código: 

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

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

Ele me retorna isso no terminal: 

erick@PC-Erick:~/Documentos/gulp/projeto$ npm run gulp

> projeto@1.0.0 gulp /home/erick/Documentos/gulp/projeto
> gulp

[08:29:44] Using gulpfile ~/Documentos/gulp/projeto/gulpfile.js
[08:29:44] Starting 'default'...
[08:29:44] Finished 'default' after 15 ms

Ele simplesmente não gera o estilos.css, mas engraçado quando eu tento forçar um erro no estilos.scss ele acusa o erro. Por exemplo, criei uma variavel $cor-padrao = #33333 e omiti o ponto e vírgula e ele acusou o seguinte erro:

Error in plugin 'sass'
Message:
    src/sass/estilos.scss
Error: expected ':' after $cor-padrao in assignment statement
        on line 1 of src/sass/estilos.scss
>> $cor-padrao = #33333
   ^
solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

O erro que você esta recebendo é um ero de sintaxe do SASS, você escreveu um código errado e não do script do seu projeto.

Quando usamos SASS essa variável ai tem que ser declarada dessa forma:

$cor-padrão: #3333;

Veja que você usou o operador =, o que não é aceito.

Resumindo: o erro é um erro do bem, pois esta mostrando onde você feriu a sintaxe do SASS. E como o arquivo esta inválido, ele não vai gerar um arquivo CSS enquanto você não acertar a linguagem.

Sucesso e bom estudo meu aluno!

por Erick Alessandro dos Santos Castelo Branco
| 182.5k xp | 34 posts
Desenvolvedor

Realmente bisonhei na sintaxe. Obrigado Professor!