Solucionado (ver solução)
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!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software