Uso do Sass ao invés de Less

Poste seu script pra gente.

var gulp = require('gulp')
    ,imagemin = require('gulp-imagemin')//npm install gulp-imagemin --save-dev
    ,clean = require('gulp-clean')//npm install gulp-clean --save-dev
    ,concat = require('gulp-concat')//npm install gulp-concat --save-dev
    ,htmlReplace = require('gulp-html-replace')//npm install gulp-html-replace --save-dev
    ,usemin = require('gulp-usemin')//npm install gulp-usemin --save-dev
    ,uglify = require('gulp-uglify')//npm install gulp-uglify --save-dev
    ,cssmin = require('gulp-cssmin')//npm install gulp-cssmin --save-dev
    ,browserSync = require('browser-sync')//npm install browser-sync --save-dev
    ,jshint = require('gulp-jshint')//npm install jshint gulp-jshint --save-dev
    ,jshintStylish = require('jshint-stylish')//npm install --save-dev jshint-stylish
    ,csslint = require('gulp-csslint')//npm install --save-dev gulp-csslint
    ,sass = require('gulp-sass');

// tarefa para criar a pasta dist com todos arquivos
gulp.task('copy', ['clean'], function() {

    return gulp.src('src/**/*') // retorna uma stream dizendo que finalizou a tarefa "assincrona"
        .pipe(gulp.dest('dist'));
});

// tarefa para apagar
gulp.task('clean', function( ) {

    return gulp.src('dist') // retorna uma stream dizendo que finalizou a tarefa "assincrona"
        .pipe(clean());
});


// Tarefa para reduzir imagens
gulp.task('build-img', function() {

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


// Tarefa que aplica o uglify e mimifica os arquivos css e js, onde apontados no arquivo html
gulp.task('usemin', function() {

    gulp.src('dist/**/*.html')
    .pipe(usemin({
        js: [ uglify()],
        css: [ cssmin() ]
        // html: [ htmlmin({ collapseWhitespace: true }) ],
        // inlinejs: [ uglify() ],
        // inlinecss: [ cleanCss(), 'concat' ]
        }))
        .pipe(gulp.dest('dist'));
});

gulp.task('sass', function() {

    return gulp.src('src/sass/**/*.scss')
       .pipe(sass().on('error', sass.logError))
       .pipe(autoprefixer('last 4 version'))
       .pipe(gulp.dest('src/css'));
}); 

//Tarefa para atualizar o browser
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) { // verifica erros nos arquivos .js
        console.log("Linting " + event.path);
        gulp.src(event.path)
            .pipe(jshint())
            .pipe(jshint.reporter(jshintStylish));

    });

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

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

    });
});



//Tarefa default
gulp.task('default', ['copy'], function() {

    gulp.start('build-img', 'usemin');
});

``````

Por que você não usou a mesma estratégia do LESS, só mudando para sass? Mas aparentemente parece esta OK seu código. Já viu se é bug no SASS? Eu não ensinei SCSS no curso por causa de bugs do módulo que depende de ruby. Não sei se resolveram.

Então, cheguei a testar desta forma que você falou e testei mais outra compartilhado no stackoverflow, mas também ocorre a mesma coisa. Vou dar uma pesquisada sobre os bugs entre eles, não estava ciente. Obrigado!

Por favor teve alguma resposta sobre o bug?

Opa! Não achei nada sobre o bug não, mas arrumei uma solução temporária, não passando a extensão do arquivo ".scss", usando apenas o asterisco " * ".

Boa noite Mario Antonio, Tudo bem? o gulpfile,js seria assim? Porque para mim não funcionou. Obrigado

var gulp = require('gulp')
    ,imagemin = require('gulp-imagemin')//npm install gulp-imagemin --save-dev
    ,clean = require('gulp-clean')//npm install gulp-clean --save-dev
    ,concat = require('gulp-concat')//npm install gulp-concat --save-dev
    ,htmlReplace = require('gulp-html-replace')//npm install gulp-html-replace --save-dev
    ,usemin = require('gulp-usemin')//npm install gulp-usemin --save-dev
    ,uglify = require('gulp-uglify')//npm install gulp-uglify --save-dev
    ,cssmin = require('gulp-cssmin')//npm install gulp-cssmin --save-dev
    ,browserSync = require('browser-sync')//npm install browser-sync --save-dev
    ,jshint = require('gulp-jshint')//npm install jshint gulp-jshint --save-dev
    ,jshintStylish = require('jshint-stylish')//npm install --save-dev jshint-stylish
    ,csslint = require('gulp-csslint')//npm install --save-dev gulp-csslint
    ,sass = require('gulp-sass');

// tarefa para criar a pasta dist com todos arquivos
gulp.task('copy', ['clean'], function() {

    return gulp.src('src/**/*') // retorna uma stream dizendo que finalizou a tarefa "assincrona"
        .pipe(gulp.dest('dist'));
});

// tarefa para apagar
gulp.task('clean', function( ) {

    return gulp.src('dist') // retorna uma stream dizendo que finalizou a tarefa "assincrona"
        .pipe(clean());
});


// Tarefa para reduzir imagens
gulp.task('build-img', function() {

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


// Tarefa que aplica o uglify e mimifica os arquivos css e js, onde apontados no arquivo html
gulp.task('usemin', function() {

    gulp.src('dist/**/*.html')
    .pipe(usemin({
        js: [ uglify()],
        css: [ cssmin() ]
        // html: [ htmlmin({ collapseWhitespace: true }) ],
        // inlinejs: [ uglify() ],
        // inlinecss: [ cleanCss(), 'concat' ]
        }))
        .pipe(gulp.dest('dist'));
});

gulp.task('sass', function() {

    return gulp.src('src/sass/**/**')
       .pipe(sass().on('error', sass.logError))
       .pipe(autoprefixer('last 4 version'))
       .pipe(gulp.dest('src/css'));
}); 

//Tarefa para atualizar o browser
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) { // verifica erros nos arquivos .js
        console.log("Linting " + event.path);
        gulp.src(event.path)
            .pipe(jshint())
            .pipe(jshint.reporter(jshintStylish));

    });

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

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

    });
});



//Tarefa default
gulp.task('default', ['copy'], function() {

    gulp.start('build-img', 'usemin');
});

Opa! claro, acho que acabei usando o padrao do Less, modificado para o SASS, foi tantas tentativas que nem lembro mais, mas só funcionou usando o "*". Abaixo segue o codigo e também o link do meu github(https://github.com/MarioRodeghiero/front-end-boilerplate), onde disponibilizo um boiler-plate (para usar basta baixar e aplicar "npm install" no diretorio ) meu sistema é MAC OS.

var gulp = require('gulp')
    , imagemin = require('gulp-imagemin')//npm install gulp-imagemin --save-dev
    , clean = require('gulp-clean')//npm install gulp-clean --save-dev
    , concat = require('gulp-concat')//npm install gulp-concat --save-dev
    , htmlReplace = require('gulp-html-replace')//npm install gulp-html-replace --save-dev
    , usemin = require('gulp-usemin')//npm install gulp-usemin --save-dev
    , uglify = require('gulp-uglify')//npm install gulp-uglify --save-dev
    , cssmin = require('gulp-cssmin')//npm install gulp-cssmin --save-dev
    , browserSync = require('browser-sync')//npm install browser-sync --save-dev
    , jshint = require('gulp-jshint')//npm install jshint gulp-jshint --save-dev
    , jshintStylish = require('jshint-stylish')//npm install --save-dev jshint-stylish
    , csslint = require('gulp-csslint')//npm install --save-dev gulp-csslint
    , sass = require('gulp-sass');

// tarefa para criar a pasta dist com todos arquivos
gulp.task('copy', ['clean'], function() {
    return gulp.src('src/**/*') // retorna uma stream dizendo que finalizou a tarefa "assincrona"
        .pipe(gulp.dest('dist'));
});


// tarefa para apagar
gulp.task('clean', function( ) {
    return gulp.src('dist') // retorna uma stream dizendo que finalizou a tarefa "assincrona"
        .pipe(clean());
});


// Tarefa para reduzir imagens
gulp.task('build-img', function() {
   return gulp.src('dist/img/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
});


// Tarefa que aplica o uglify e mimifica os arquivos css e js, onde apontados no arquivo html
gulp.task('usemin', function() {
   return gulp.src('dist/**/*.html')
        .pipe(usemin({
         js: [ uglify()],
         css: [ cssmin() ]
        }))
        .pipe(gulp.dest('dist'));
});

//Tarefa para atualizar o browser
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) { // verifica erros nos arquivos .js
        console.log("Linting " + event.path);
        gulp.src(event.path)
            .pipe(jshint())
            .pipe(jshint.reporter(jshintStylish));
    });

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

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



//Tarefa default
gulp.task('default', ['copy'], function() {

    gulp.start('build-img', 'usemin');
});