Come Grunt-Uglificare più file di script mentre mantengono la struttura delle cartelle

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

Domanda

Non ho trovato un buon modo per grugnare-Uglificare più file di script diffonditi su più cartelle mantenendo la struttura delle cartelle, inclusi intatti i file uglied. L'unica ragione per cui voglio fare questo è essere in grado di aumentare le prestazioni della parte "legacy" della pagina web che sto lavorando.

Ho trovato un modo intorno a questo che non voglio fare, poiché ci vorrà a molto tempo, e questo è quello di farlo come in questa risposta (specificano ogni SRC e Dest Pair Sepately): Come configurare Grunt.js per minificare i file separatamente

Un esempio di ciò che voglio ottenere: 

**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
.

BTW, vuole fare lo stesso per i file CSS, se possibile.

Qualcuno sa se è possibile?

È stato utile?

Soluzione

Il principio nella risposta generacodictagcode sul post che hai collegato a sembra promettente, con un po 'di torsione: 

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

L'unica differenza qui è il doppio asterisco tra il percorso di base e il nome del file jolly con la sua estensione.Ciò passerà attraverso tutte le sottocartelle e - si spera - la produzione di ciascuna scoperta trova nella sua giusta cartella.

L'uscita sarebbe: 

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 si tratta di fare lo stesso con Rafa Heringer (usando il grununt-contrib-cssmin Plugin), l'approccio sopra menzionato sarebbe ancora funzionante, ma si dovrebbe combinarlo con le configurazioni dei plugin pertinenti che devono essere in atto per l'uscita CSS di uscita Minified Il modo desiderato.

PS: non ho provato a farlo da solo!

Altri suggerimenti

Simile alla risposta di @DIconnis, ma memorizza i file minificati nella stessa cartella Same : 

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

In realtà è possibile utilizzare il seguente approccio: 

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

La risposta da Wallace è fantastica, ma se i file che stai tentando di minificare non esistono prima che inizi Grunt (cioè se dipende da un'altra attività), non funzionerà perché la mappa viene generata prima di qualsiasi attività è eseguito.

Ho trovato una soluzione per minificare i file generati individualmente, utilizzando il pacchetto del nodo ugly-js anziché Grunt-Contrib-uglify.

    .
  • Aggiungi ugly-js al tuo pacchetto.json
  • Aggiungi uno dei seguenti esemi al tuo Grunfile (sostituisci "i tuoi file qui" con il Glob (s) appropriato se si utilizza ESEMPIO 1).
  • Se è necessario modificare la destinazione o l'estensione del file minificato, utilizzare invece l'esempio 2. Utilizza Grunt.File.RECURSE con un callback che fornisce la directory principale, la voce secondaria e il nome del file di ciascun file (è più facile per costruire un percorso di destinazione personalizzato). Sostituisci "Cartella" dalla directory che desideri eseguire la scansione e crea il tuo "percorso personalizzato qui".

Esempio 1: con 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");
});
.

Esempio 2: con 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");
});
.

Questa soluzione non funziona per me.

Questo è un esempio di funzionamento: 

        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
                }
            }
        }
.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top