Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Problema com múltimas entradas no usemin

Bom dia Instrutor, como vai?

Estou tendo um problema com o usemin, quando passo múltiplos arquivos como entrada ele me retorna o seguinte erro: (map stream is not writable), porém funciona e gera o bundle passando apenas um arquivo. Como poderia resolver?

gulp.task('usemin', () => {
    let folder = '';

    gulp.src(
            // `${path.origin}${folder}index.html`
            `${path.origin}${folder}**/*.html`
        )
        .pipe(usemin({
            js: [uglify()],
            css: [cssmin()],
        }))
        .pipe(gulp.dest(`${path.deploy}${folder}`));
});

Segue link do meu gulpfile: gulpfile.js

3 respostas

Oi Giuliano, primeiro, eu não entendi a utilidade da variável folder na sua task. Aqui no fórum você cortou o minifyHtml, por quê? O erro imprime apenas isso? Não indica mais nada? linha do erro? task?

Lembra sempre de colar a mensagem de erro completa, isso ajuda bastante.

solução!

Boa tarde Wanderson, obrigado pelo retorno mas consegui solucionar o problema. Te respondendo, estava utilizando a variável folder para especificar algumas pastas como css, sass e img, porém, para focar somente no problema fiz uma limpeza no código que acabou ficando desta forma:

const gulp = require('gulp')
    , usemin = require('gulp-usemin')
    , clean = require('gulp-clean')
    , imagemin = require('gulp-imagemin')
    , uglify = require('gulp-uglify')
    , cssmin = require('gulp-cssmin')
    , htmlReplace = require('gulp-html-replace');

let path = {
    origin: './',
    deploy: './dist'
};

gulp.task('clean', () => {
    return gulp
        .src(path.deploy)
        .pipe(clean());
});

gulp.task('img', () => {
    gulp
        .src(`${path.origin}/img/**/*`)
        .pipe(imagemin())
        .pipe(gulp.dest(`${path.deploy}/img`));
});

gulp.task('usemin', () => {
    gulp
        .src(`${path.origin}/**/*.html`)
        .pipe(usemin({
            js: [uglify()],
            css: [cssmin()],
        }))
        .pipe(gulp.dest(path.deploy));
});

gulp.task('default', ['clean'], () => gulp.start('usemin', 'img'));

Abaixo segue a mensagem completa do erro:

C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\gulp-cssmin\node_modules\map-stream\index.js:82
    if(ended) throw new Error('map stream is not writable')
              ^

Error: map stream is not writable
    at Stream.stream.write (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\gulp-cssmin\node_modules\map-stream\index.js:
82:21)
    at DestroyableTransform.ondata (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\through2\node_modules\readable-stream
\lib\_stream_readable.js:612:20)
    at emitOne (events.js:115:13)
    at DestroyableTransform.emit (events.js:210:7)
    at addChunk (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\through2\node_modules\readable-stream\lib\_stream_readab
le.js:284:12)
    at readableAddChunk (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\through2\node_modules\readable-stream\lib\_strea
m_readable.js:271:11)
    at DestroyableTransform.Readable.push (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\through2\node_modules\readable
-stream\lib\_stream_readable.js:238:10)
    at DestroyableTransform.Transform.push (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\through2\node_modules\readabl
e-stream\lib\_stream_transform.js:146:32)
    at DestroyableTransform.endStream [as _flush] (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\gulp-concat\index.js:9
6:10)
    at DestroyableTransform.<anonymous> (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\through2\node_modules\readable-s
tream\lib\_stream_transform.js:138:49)
    at Object.onceWrapper (events.js:314:30)
    at emitNone (events.js:105:13)
    at DestroyableTransform.emit (events.js:207:7)
    at prefinish (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\through2\node_modules\readable-stream\lib\_stream_writa
ble.js:596:14)
    at finishMaybe (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\through2\node_modules\readable-stream\lib\_stream_wri
table.js:604:5)
    at endWritable (C:\Users\giuliano.gusmao\Cursos\Alura\gulp\projeto\node_modules\through2\node_modules\readable-stream\lib\_stream_wri
table.js:615:3)

Não consegui identificar o problema através do erro gerado, então pesquisei na documentação do usemin e vi que bastava passar a função como parâmetro e não precisa invoca-la como estava fazendo. Segue gulpfile solucionado:

const gulp = require('gulp')
    , usemin = require('gulp-usemin')
    , clean = require('gulp-clean')
    , imagemin = require('gulp-imagemin')
    , uglify = require('gulp-uglify')
    , cssmin = require('gulp-cssmin')
    , htmlReplace = require('gulp-html-replace');

let path = {
    origin: './',
    deploy: './dist'
}

// limpar pasta de deploy 
gulp.task('clean', () => {
    return gulp
        .src(path.deploy)
        .pipe(clean());
});

gulp.task('img', () => {
    gulp
        .src(`${path.origin}/img/**/*`)
        .pipe(imagemin())
        .pipe(gulp.dest(`${path.deploy}/img`));
});

gulp.task('usemin', () => {
    gulp
        .src(`${path.origin}/**/*.html`)
        .pipe(usemin({
            js: [uglify],
            css: [cssmin],
        }))
        .pipe(gulp.dest(path.deploy));
});

gulp.task('default', ['clean'], () => gulp.start('usemin', 'img'));

Obrigado e Abs!

Ótimo Giuliano, fico feliz que tenha encontrado a solução. O erro eu explico, ele está dizendo que não é possível escrever no stream. O stream é o fluxo de dados que corre de uma função para outra dentro do gulp. Quando a função src lê os arquivos, ele transforma essa leitura em stream e assim as outras funções agem sobre esse stream, pegou a ideia?

O problema era que uma das funções não estava conseguindo modificar o stream. Por isso teve o erro.

Estou marcando seu post como solução do tópico.