Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
11
respostas

Erro com csslint

Olá pessoal, estou tentando usar o browser sync mas ele está apresentando o seguinte erro no terminal:

Linting /Users/joselialcosta/workspace/palmela-site/html/src/css/main.css
/Users/joselialcosta/workspace/palmela-site/html/gulpfile.js:66
            .pipe(csslint.reporter());
                          ^

TypeError: csslint.reporter is not a function
    at EventEmitter.<anonymous> (/Users/joselialcosta/workspace/palmela-site/html/gulpfile.js:66:27)
    at emitOne (events.js:96:13)
    at EventEmitter.emit (events.js:188:7)
    at Gaze.<anonymous> (/Users/joselialcosta/workspace/palmela-site/html/node_modules/glob-watcher/index.js:17:11)
    at emitTwo (events.js:106:13)
    at Gaze.emit (events.js:191:7)
    at Gaze.emit (/Users/joselialcosta/workspace/palmela-site/html/node_modules/gaze/lib/gaze.js:129:32)
    at /Users/joselialcosta/workspace/palmela-site/html/node_modules/gaze/lib/gaze.js:415:16
    at StatWatcher._pollers.(anonymous function) (/Users/joselialcosta/workspace/palmela-site/html/node_modules/gaze/lib/gaze.js:326:7)
    at emitTwo (events.js:111:20)
    at StatWatcher.emit (events.js:191:7)
    at StatWatcher._handle.onchange (fs.js:1481:10)

A parte to meu gulpfile que contém o CSSLint é a seguinte:

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

Estou utilizando a versao 1.0.0 .

Eu consigo subir o gulp numa boa, porém ao ter algum erro no .less ele derruba o server e aparece este erro.

11 respostas

Onde esta seu arquivo completo?

Aqui está ele:

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-less');

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



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

    ]

    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.reporter(jshintStylish));
    });

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

    gulp.watch('./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'));
    });  



});

Tem um ] perdido no meio do código, pfvr desconsidere ele pois foi de um comentário que eu apaguei. No código original ele está comentado.

Você instalou a versão que uso no curso?

Cola seu package.json para eu ver.

Se você atualizou a versão peço que refaça tudo com as versões homologadas por mim.

Novas versões mudam api, possuem bugs que teríamos que investigar.

solução!

Parece não existir mais o .reporter(), por isso seu erro. Eu tive a curiosidade de consultar a documentação do gulp-csslint e lá vi que mudaram para formatter().

https://www.npmjs.com/package/gulp-csslint

 .pipe(csslint.formatter());

MAS ATENÇÃO: há várias issues dessa versão mais atualizada e o pessoal tem reclamando bastante. Como se diz no ditado, use por conta e risco :)

Josélia, só para deixar claro. Não é que atualizar seus módulos seja algo ruim, é bom. Mas antes de atualizar tem que pesquisar minuciosamente se mudaram a a API ou se a versão atual possui bugs para você não bater cabeça.

Tente o lance do formatter para vermos se vai.

Oi Flávio! Agora está funcionando perfeitamente! Eu passei por esse lance de ter que consultar a documentação de um modulo do node esses dias, é bem complicado fazer um upgrade assim as cegas.

Sobre o package.json que vc perguntou, aqui está ele: Pode reparar que alguns estao com uma versao bem além da que vc recomendou no video, então deve ter sido realmente isso o lance das versões.

{
  "name": "html",
  "version": "1.0.0",
  "description": "Arquivos HTML originais, antes do slice para views do AngularJS",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bower": "^1.7.9",
    "browser-sync": "^2.14.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-csslint": "^1.0.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-html-replace": "^1.6.1",
    "gulp-imagemin": "^2.3.0",
    "gulp-jshint": "^2.0.1",
    "gulp-less": "^3.0.3",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^1.4.1",
    "gulp-usemin": "^0.3.14",
    "jshint-stylish": "^2.2.1"
  }
}

No mais muito obrigada!

Então, só para eu ter certeza, quando você usou o formatter funcionou ou fez downgrade das versões?

Oi Flavio, desculpa a demora... Então,funcionou perfeitamente com o formatter.

OBrigada!

Obrigado por me informar! Sucesso e bom estudo Josélia!