Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Não é possível com o usemin criar vários arquivos minificados na mesma página?

Referente ao curso Gulp: automação de tarefas front-end

por Adler
| 188.2k xp | 52 posts
Desenvolvedor Front end sênior

Boa noite, estou tentando criar dois arquivos minificados (JavaScript) na mesma página, porém não estou tendo sucesso :(

Estou fazendo da seguinte forma: 

        <!--build:js js/bundle.min.js-->
        <script src="./lib/angular/angular.min.js"></script>
        <script src="./lib/angular-ui-router/release/angular-ui-router.js"></script>
        <script src="./lib/angular-animate/angular-animate.min.js"></script>
        <script src="./lib/angular-aria/angular-aria.min.js"></script>
        <script src="./lib/angular-messages/angular-messages.min.js"></script>
        <script src="./lib/angular-material/angular-material.min.js"></script>
        <script src="./lib/angular-input-masks/angular-input-masks-standalone.min.js"></script>
        <script src="./lib/angular-jk-carousel/dist/jk-carousel.min.js"></script>
        <!--endbuild-->

        <!--build:js js/xxxx.min.js-->
        <script src="./js/app.js"></script>
        <script src="./js/filters/utils-filter.js"></script>
        <script src="./js/directives/directives.js"></script>
        <script src="./js/factories/utils-factory.js"></script>
        <script src="./js/services/login-service.js"></script>
        <script src="./js/controllers/login-controller.js"></script>
        <script src="./js/controllers/dash-controller.js"></script>
        <!--endbuild-->

Só que ele está dando o placeholder com o nome do primeiro arquivo (bundle.min.js) ao invés de colocar xxxx.min.js. Ou seja, ele está executando apenas a primeira ocorrência.

Obs: o placeholder com o arquivo css está normal.

7 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Bom dia! Confira o metadado. Veja a forma correta:

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

Veja os espaços depois e antes do --. Quando o espaço não é respeitado costuma dar problema.

por Adler
| 188.2k xp | 52 posts
Desenvolvedor Front end sênior

Vou verificar Flávio!

por Adler
| 188.2k xp | 52 posts
Desenvolvedor Front end sênior

Flávio testei aqui e está sem os espaços mesmos, pensei que podia ser problema com os controllers do Angular, mas criei duas classes com ES5 e o problema persistiu. Creio que deve ser algum bug do plug-in né?

Entrada: 

    <body>
        <div ui-view></div>

        <!--build:js js/bundle.min.js-->
        <script src="./lib/angular/angular.min.js"></script>
        <script src="./lib/angular-ui-router/release/angular-ui-router.js"></script>
        <script src="./lib/angular-animate/angular-animate.min.js"></script>
        <script src="./lib/angular-aria/angular-aria.min.js"></script>
        <script src="./lib/angular-messages/angular-messages.min.js"></script>
        <script src="./lib/angular-material/angular-material.min.js"></script>
        <script src="./lib/angular-input-masks/angular-input-masks-standalone.min.js"></script>
        <script src="./lib/angular-jk-carousel/dist/jk-carousel.min.js"></script>
        <!--endbuild-->

        <!--build:js js/minified.min.js-->
        <script src="./js/a.js"></script>
        <script src="./js/b.js"></script>
        <!--endbuild-->

Saída: 

    <body>
        <div ui-view></div>

        <script src="js/bundle.min.js"></script>

        <script src="js/bundle.min.js"></script>

        <script src="./js/app.js"></script>
        <script src="./js/filters/utils-filter.js"></script>
        <script src="./js/directives/directives.js"></script>
        <script src="./js/factories/utils-factory.js"></script>
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Tem que ter o espaço. Idêntico ao exemplo que te passei. Seu código continua com problema.

por Adler
| 188.2k xp | 52 posts
Desenvolvedor Front end sênior

O erro ainda continua :( Mesma saída que eu postei anteriormente.

solução!
por Adler
| 188.2k xp | 52 posts
Desenvolvedor Front end sênior

Descobri o erro Flávio, estava no meu arquivo gulpfile.js.

Estava da seguinte forma:

gulp.task('usemin', function() {
    return gulp.src('./src/**/*.html')
        .pipe(usemin({
            js : [uglify().on('error', function(e) {
                console.log('Uglify error: ' + e);
            })],
            css : [autoprefixer, cssmin]
        }))
        .pipe(gulp.dest('dist'))
});

O erro estava acontecendo porque eu estava tentando capturar o erro no uglify.

por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Caramba! Tipo de coisa que descobrimos só olhando o código mesmo. Fico muito contente de saber que você descobriu!