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

Sem a concatenação e minificação dos scripts

Olá, eu segui todos os passos do professor Flávio, não teve erro no terminal, porém no projeto, ele não concatenou nem minificou. Não localizei algum erro em scripts. Alguém poderia explicar? Segui as orientações:

gulpfile.js

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

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: [cssmin]
        }))
        .pipe(gulp.dest('dist'));
});

projetgrunt/src/index.html

Deixei espaço em comentários.

  <!--  build:css css/index.min.css  -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/mobile.css">
    <!--  endbuild  -->

  <!--  build:js js/index.min.js  -->
  <script src="js/jquery.js"></script>
  <script src="js/home.js"></script>
  <!--  endbuild  -->

Terminal:

camilabd@camilabd-Inspiron-5420:~/Documentos/projetgrunt$ npm run gulp
> projetgrunt@1.0.0 gulp /home/camilabd/Documentos/projetgrunt
> gulp

[18:19:58] Using gulpfile ~/Documentos/projetgrunt/gulpfile.js
[18:19:58] Starting 'clean'...
[18:19:58] Finished 'clean' after 36 ms
[18:19:58] Starting 'copy'...
[18:19:58] Finished 'copy' after 56 ms
[18:19:58] Starting 'default'...
[18:19:58] Starting 'build-img'...
[18:19:58] Starting 'usemin'...
[18:19:58] Finished 'default' after 37 ms
[18:20:01] Finished 'usemin' after 3.06 s
[18:20:04] gulp-imagemin: Minified 32 images (saved 181.09 kB - 8.7%)
[18:20:04] Finished 'build-img' after 5.74 s
camilabd@camilabd-Inspiron-5420:~/Documentos/projetgrunt$

Então ele não gerou os seguintes arquivos: "css/index/min.css" e "js/index.min.js".

13 respostas

Olá Camila, acredito que o problema está na chamada dos pacotes uglify e cssmin, pois eles devem ser utilizados com parênteses:

gulp.task('usemin', function(){
    return gulp.src('dist/**/*.html')
        .pipe(usemin({
            js: [uglify()],
            css: [cssmin()]
        }))
        .pipe(gulp.dest('dist'));
});

Olá Divaldo, aconteceu a mesma coisa, não minificou.

:/

Camila, você esta verificando se minificou ou não dentro da pasta dist? É nessa pasta que você deve verificar e não dentro da pasta src.

Confirma para mim.

Inclusive, peguei o seu código (que eu vi que estava correto), rodei local, fui lá na pasta distgerada e os arquivos concatenados e minificados estavam lá.

Quando você for fazer a verificação, veja pelo sistema de arquivos do seu sistema operacional favorito. Se usa Sublime ou outro editor, pode ser que o editor demore a exibir o arquivo que foi gerado pelo script, pois ele não fica sabendo logo de cara que há um novo arquivo.

Sendo assim, não há nada de errado com seu código.

Olá Flávio,

Eu já verifiquei dentro da pasta dist. Pode ser, eu uso o Sublime 3.

Então, usando seu código foram gerados os arquivos index.min.css e index.min.js. Os demais arquivos continuam lá porque foram copiados, mas seu projeto só carrega o index.min.css e o index.min.js. Esses são arquivos criados e que só existem na pasta dist.

Quero dizer que não minificou ainda rs, acho que pelo comando ele não apagou e não copiou. Não tem os arquivos index.min.css e index.min.js dentro do dist.

Como você esta rodando a task?

Eu rodei como npm run gulp. Dai ele rodou a task default.

camilabd@camilabd-Inspiron-5420:~/Documentos/projetgulp$ npm run gulp

> projetgulp@1.0.0 gulp /home/camilabd/Documentos/projetgulp
> gulp "default"

[14:59:14] Using gulpfile ~/Documentos/projetgulp/gulpfile.js
[14:59:14] Starting 'clean'...
[14:59:14] Finished 'clean' after 16 ms
[14:59:14] Starting 'copy'...
[14:59:14] Finished 'copy' after 59 ms
[14:59:14] Starting 'default'...
[14:59:14] Starting 'build-img'...
[14:59:14] Starting 'usemin'...
[14:59:14] Finished 'default' after 34 ms
[14:59:14] Finished 'usemin' after 36 ms
[14:59:17] gulp-imagemin: Minified 32 images (saved 181.09 kB - 8.7%)
[14:59:17] Finished 'build-img' after 2.94 s
camilabd@camilabd-Inspiron-5420:~/Documentos/projetgulp$

O problema não é a finalização do usemin depois do default?

Faça um teste novamente, mas sem os parêntes:

  js: [uglify],
  css: [cssmin]

Do jeito original. Não faço ideia do que seja. Peguei seu script, exatamente como está, coloquei no projeto do curso e os arquivos apareceram lá corretamente.

Vou deixar um tempo aberto para ver se alguém tem alguma ideia.

"O problema não é a finalização do usemin depois do default?".

Não é o problema. Aqui faz o mesmo procedimento e gera os arquivos. Eu tenho os arquivos

projeto/dist/css/index.min.css

projeto/dist/js/index.min.js

Isso usando o seu script, no início do seu post.

Os novos arquivos.

solução!

O mais intrigante é que usei deu script.

Mas vi que seu metadado esta assim

<!--  build:css css/index.min.css  -->

Tem dois espaços depois de. <!--. Deveria ter um apenas como no exemplo abaixo.

<!-- build:css css/index.min.css  -->

Já vi dar problemas. Confira se depois de todos os seus. <!-- há um espaço apenas. No meu teste não usei seu html, só o script.

Bom dia,

Nossa Flávio, foi por isso mesmo (os dois espaços depois do metadada) kkkkk, obrigada por ter observado isso , agora deu tudo certo. :)