web-dev-qa-db-fra.com

Comment réduire plusieurs fichiers Javascript dans un dossier avec UglifyJS?

Bonjour, j'utilise uglifyJs pour minimiser mes fichiers javascript, cela fonctionne bien avec un fichier à la fois, ce que je cherche c'est de minimiser tous les fichiers javascript présents dans un dossier appelé JS dans un dossier appelé JSM, pour être clair J'ai 2 fichiers dans mon dossier JS appelés test1.js et test2.js et je veux exécuter uglify sur ce dossier et générer test1.min.js et test2.min.js dans le dossier JSM, donc y a-t-il un moyen de le faire cette? une commande comme:

uglifyjs -c -m JS/*.js JSM/*.min.js

Ou toute idée qui peut m'aider.

Merci.

node.jsuglifyjsuglifyjs2
42
OussamaLord

Je sais que cela peut sembler une étape énorme, mais je recommanderais vraiment d'utiliser grunt . C'est vraiment simple une fois que vous avez compris.

Voici un cours intensif:

  1. Installer NodeJS

  2. Installez Grunt CLI (entrez simplement ceci dans la console/le terminal):

     npm install -g grunt-cli

  3. Créez un simple package.json fichier à la racine de votre projet:

     {
 "nom": "mon-nom-projet", 
 "version": "1.0.0", 
 "devDependencies": {
 "grunt": "~ 0.4.2", 
 "grunt-contrib-uglify": "~ 0.2.4", 
 "grunt-contrib-watch": "~ 0.5 .3 "
} 
}

  4. Une fois que vous avez cela, tapez simplement: npm install à la console (à la racine de votre projet). Cela installera les plugins/dépendances grunt nécessaires (à partir du fichier de package ci-dessus).

  5. Créez maintenant un simple gruntfile.js à la racine de votre projet (c'est une sorte de configuration pour votre projet):

     module.exports = fonction (grunt) {
 grunt.initConfig ({
 

        // define source files and their destinations
    uglify: {
        files: { 
            src: 'js/*.js',  // source files mask
            dest: 'jsm/',    // destination folder
            expand: true,    // allow dynamic building
            flatten: true,   // remove all unnecessary nesting
            ext: '.min.js'   // replace .js to .min.js
        }
    },
    watch: {
        js:  { files: 'js/*.js', tasks: [ 'uglify' ] },
    }
});

// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');

// register at least this one task
grunt.registerTask('default', [ 'uglify' ]);

     
};

  6. Une fois cela fait, il vous suffit de le construire. Tapez dans la console:

    grognement

    ou - mieux - si vous tapez exécutez la commande ci-dessous - grunt surveillera vos fichiers source pour les changements, et si vous changez l'un d'eux - il les construira automatiquement:

     grunt watch --force

Vous pouvez ensuite ajouter plus de plugins, comme: minification css, préprocesseurs css (less, sass, stylus), jshint, etc.

84
tborychowski

Si vous êtes sous Linux/Mac et avez accès à bash, vous pouvez utiliser uglifyjs sur plusieurs fichiers JS comme ceci:

rm *.min.js; for f in *.js; do short=${f%.js}; uglifyjs $f > $short.min.js; done
18
Calpau

Suite à la réponse ci-dessus, j'ai maintenant cette configuration dans mon fichier .bashrc:

alias minify='rm *.min.js; for f in *.js; do short=${f%.js}; uglifyjs $f > $short.min.js; done'
8
mmorrey

manière npm uniquement:

  1. courir:

    npm install uglifyjs-folder --save-dev

  2. et ensuite ajouter à votre package.json quelque chose comme:

    "uglifyjs": "uglifyjs-folder js -eo jsm"

  3. puis lancez:

     npm run uglifyjs

Veuillez noter que si vous devez générer dans le même dossier que les fichiers source (js), ce qui suit devrait faire le travail:

  1. courir:

    npm install del-cli uglifyjs-folder --save-dev

  2. et ensuite ajouter à votre package.json quelque chose comme:

    "uglifyjs": "del js/*.min.js; uglifyjs-folder js -eo js"

  3. puis lancez:

     npm run uglifyjs
6
Peter Butkovic

Vous pouvez utiliser cette configuration dans gruntfile.js:

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

créer un fichier de chauve-souris avec un début à chaque ligne commençant

start uglifyjs app\main.js -mt sort -c -e -o app\main.ug.js
start uglifyjs app\lib.js -mt sort -c -e -r myfunctionname -o app\lib.ug.js
start uglifyjs app\controllers\bbbCtrl.js -mt sort -c  -o     app\controllers\bbbCtrl.ug.js
start uglifyjs app\controllers\aaaCtrl.js -mt sort -c -e -o app\controllers\aaaCtrl.ug.js
0
Fabio