Como grunhir vários arquivos de script enquanto mantém a estrutura de pastas

StackOverflow https://stackoverflow.com//questions/22045950

Pergunta

Não encontrei uma boa maneira de grudar em vários arquivos de script espalhados por várias pastas, mantendo intacta a estrutura de pastas, incluindo os arquivos uglificados.A única razão pela qual quero fazer isso é poder aumentar o desempenho da parte "herdada" da página da Web em que estou trabalhando.

Eu encontrei uma maneira de contornar isso que não quero fazer, pois levará muito tempo, e é como nesta resposta (eles especificam cada par src e destino separadamente):como configurar o grunt.js para minificar arquivos separadamente

Um exemplo do que desejo alcançar:

**src dir (no uglify applied):**
src
 |- app1
    |- randomFile.js
    |- scripts
       |- file1.js
       |- file2.js
    |- libs
       |- file3.js
       |- file4.js
 |- app2
   |- scripts
       |- file1.js
       |- file2.js

**destination dir (uglify applied, same file name):**
dist
 |- app1
    |- randomFile.js
    |- scripts
       |- file1.js
       |- file2.js
    |- libs
       |- file3.js
       |- file4.js
 |- app2
    |- scripts
       |- file1.js
       |- file2.js

A propósito, quero fazer o mesmo com arquivos CSS, se possível.

Alguém sabe se isso é possível?

Foi útil?

Solução

O princípio em Rafa Heringera resposta na postagem que você vinculou parece promissor, com um pequeno toque:

uglify: {
    min: {
        files: grunt.file.expandMapping(['path/**/*.js', 'path2/**/*.js'], 'destination/', {
            rename: function(destBase, destPath) {
                return destBase+destPath.replace('.js', '.min.js');
            }
        })
    }
}

A única diferença aqui é o asterisco duplo entre o caminho base e o nome do arquivo curinga com sua extensão.Isso passará por todas as subpastas e - esperançosamente - produzirá cada achado que encontrar em sua pasta correta.

A saída seria:

path/test.js => destination/path/test.min.js
path/subpath1/abc.js => destination/path/subpath1/abc.min.js
path/subpath2/yey.js => destination/path/subpath2/yey.min.js
path2/foo.js => destination/path2/foo.min.js

Quando se trata de fazer o mesmo com CSS (usando o grunhido-contrib-cssmin plugin), a abordagem mencionada acima ainda funcionaria, mas você teria que combiná-la com as configurações relevantes do plugin que devem estar em vigor para gerar resultados minificados CSS do jeito que você quiser.

PS: Ainda não tentei executá-lo sozinho!

Outras dicas

Semelhante à resposta de @DioNNiS, mas armazena arquivos minificados no mesma pasta:

    uglify: {
        all: {
            files: [{
                expand: true,
                cwd: 'path/to/js/',
                src: ['*.js', '!*.min.js'],
                dest: 'path/to/js/',
                ext: '.min.js'
            }]
        }
    }

Na verdade, você pode usar a seguinte abordagem:

uglify: {
  all: {
    files: [{
      expand: true,
      cwd: 'js/',
      src: ['*.js', '**/*.js'],
      dest: 'js-min/',
      ext: '.min.js',
    }],
  },
}

A resposta de Wallace é ótima, mas se os arquivos que você está tentando minimizar não existirem antes do início do grunhido (ou seja,se você estiver dependendo de outra tarefa), não funcionará porque o mapa é gerado antes de qualquer tarefa ser executada.

Eu criei uma solução para reduzir os arquivos gerados individualmente, usando o pacote de nós uglify-js em vez de grunt-contrib-uglify.

  • Adicione uglify-js ao seu package.json
  • Adicione um dos seguintes exemplos ao seu Grunfile (basta substituir "YOUR FILES HERE" pelo(s) glob(s) apropriado(s) se você estiver usando o Exemplo 1).
  • Se você precisar alterar o destino ou a extensão do arquivo minificado, use o Exemplo 2.Ele usa grunt.file.recurse com um retorno de chamada que fornece o diretório raiz, subdiretório e nome de arquivo de cada arquivo (é mais fácil construir um caminho de destino personalizado).Substitua "PASTA" pelo diretório que deseja verificar e crie seu próprio "PASTA PERSONALIZADA AQUI".

Exemplo 1: Com grunt.file.expand

grunt.registerTask('uglifyFiles', 'Uglifies files', function () {
    var jsp = require("uglify-js").parser,
        pro = require("uglify-js").uglify,
        count = 0;

    grunt.file.expand(['YOUR FILES HERE']).forEach(function (abspath) {
        // Exclude already minified files (with extension .min.js)
        if (!abspath.match(/\.min\.js$/i)) {
            // Get Abstract Syntax Tree
            var ast = jsp.parse(grunt.file.read(abspath));
            // If mangling
            // ast = pro.ast_mangle(ast);
            // If squeezing
            ast = pro.ast_squeeze(ast);
            // Write new file
            grunt.file.write(abspath.replace(/\.js$/i, '.min.js'), pro.gen_code(ast));
            count += 1;
        }
    });

    grunt.log.oklns("Successfully uglified " + count + " files");
});

Exemplo 2: Com grunt.file.recurse

grunt.registerTask('uglifyFiles', 'Uglifies files', function () {
    var jsp = require("uglify-js").parser,
        pro = require("uglify-js").uglify,
        count = 0;

    grunt.file.recurse('FOLDER', function callback(abspath, rootdir, subdir, filename) {
        // Exclude already minified files (with extension .min.js)
        if (!abspath.match(/\.min\.js$/i)) {
            // Get Abstract Syntax Tree
            var ast = jsp.parse(grunt.file.read(abspath));
            // If mangling
            // ast = pro.ast_mangle(ast);
            // If squeezing
            ast = pro.ast_squeeze(ast);
            // Write new file, using abspath or rootdir, subdir and filename
            grunt.file.write('CUSTOM PATH HERE', pro.gen_code(ast));
            count += 1;
        }
    });

    grunt.log.oklns("Successfully uglified " + count + " files");
});

Esta solução não está funcionando para mim.

Este é um exemplo funcional:

        path: {
            build: {
               src: 'assets',
               js: 'js',
               css: 'css'
            },
            js: 'js',
            css: 'css'
        },
        uglify: {
            scripts: {
                expand: true,
                cwd: '<%= path.js %>/',
                src: [
                    '**/*.js', 
                    '*.js',
                    //skip minified scripts
                    '**/!*.min.js', 
                    '!*.min.js'
                ],
                dest: '<%= path.build.src %>/<%= path.build.js %>/',
                rename: function (destBase, destPath) {
                    return destBase + destPath.replace('.js', '.min.js');
                }
            }
        },
        //same options for css minify
        cssmin: {
            styles: {
                expand: true,
                cwd: '<%= path.css %>/',
                src: [
                    '**/*.css',
                    '*.css',
                    //skip minified styles
                    '**/!*.min.css', 
                    '!*.min.css'
                ],
                dest: '<%= path.build.src %>/<%= path.build.css %>/',
                rename: function (destBase, destPath) {
                    return destBase + destPath.replace('.css', '.min.css');
                }
            }
        },
        //and watch it for changes
        watch: {
            js: {
                files: [
                    '<%= path.js %>/*.js',
                    '<%= path.js %>/**/*.js'
                ],
                tasks: [
                    'uglify:scripts'
                ],
                options: {
                    livereload: true
                }
            },
            css: {
                files: [
                    '<%= path.css %>/*.css',
                    '<%= path.css %>/**/*.css'
                ],
                tasks: [
                    'cssmin:styles'
                ],
                options: {
                    livereload: true
                }
            }
        }
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top