node.js-如何使用UglifyJS缩小文件夹中的多个Javascript文件?

您好,我正在使用uglifyJs来最小化我的javascript文件,它一次可以处理一个文件,我想要的是将存在于名为JS的文件夹中的所有javascript文件最小化为名为JSM的文件夹。 我的JS文件夹中有2个文件,分别称为test1.js和test2.js,我想对该文件夹运行uglify并在JSM文件夹中生成test1.min.js和test2.min.js,所以有一种方法可以 这个? 像这样的命令:

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

或任何可以帮助我的想法。

谢谢。

OussamaLord asked 2020-08-09T19:57:52Z
6个解决方案
84 votes

我知道这似乎是一个巨大的步骤,但我真的建议您使用grunt。一旦掌握了它,这真的很简单。

这是速成课程:

  1. 安装NodeJS
  2. 安装Grunt CLI(只需在控制台/终端中输入此命令):

    npm install -g grunt-cli
  3. 在项目的根目录中创建一个简单的 // 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' ]); 文件:

    {   “ name”:“ my-project-name”,   “ version”:“ 1.0.0”,   “ devDependencies”:{     “ grunt”:“〜0.4.2”,     “ grunt-contrib-uglify”:“〜0.2.4”,     “ grunt-contrib-watch”:“〜0.5.3”   }}
  4. 找到该文件后,只需在控制台中输入: // 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' ]); (在项目的根目录中)。这将安装必要的grunt插件/依赖项(来自上面的软件包文件)。

  5. 现在,在项目的根目录中创建一个简单的 // 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' ]); (这是项目的一种配置):

    module.exports = function(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. 完成后,您只需要构建它即可。 在控制台中输入:

    地面

    或者-更好-如果您键入执行以下命令-grunt将监视源文件中的更改,如果您更改了其中任何一个,它将自动生成它们:

    咕watch声--force

然后,您可以添加更多插件,例如:css缩小,css预处理器(less,sass,手写笔),jshint等。

tborychowski answered 2020-08-09T19:59:04Z
18 votes

如果您在Linux / Mac上并且可以访问bash,则可以在多个JS文件上使用uglifyjs,如下所示:

rm *.min.js; for f in *.js; do short=${f%.js}; uglifyjs $f > $short.min.js; done
Calpau answered 2020-08-09T19:59:24Z
8 votes

除了上述答案,我现在在.bashrc文件中进行了设置:

alias minify='rm *.min.js; for f in *.js; do short=${f%.js}; uglifyjs $f > $short.min.js; done'
mmorrey answered 2020-08-09T19:59:44Z
6 votes

仅npm的方式:

  1. 跑:

     npm run uglifyjs
    
  2. 然后向您的 npm run uglifyjs 添加以下内容:

     npm run uglifyjs
    
  3. 然后运行:

     npm run uglifyjs
    

请注意,如果您需要生成与源文件( npm run uglifyjs )相同的文件夹,请执行以下操作:

  1. 跑:

     npm run uglifyjs
    
  2. 然后向您的 npm run uglifyjs 添加以下内容:

     npm run uglifyjs
    
  3. 然后运行:

     npm run uglifyjs
    
Peter Butkovic answered 2020-08-09T20:00:34Z
2 votes

您可以在gruntfile.js中使用此配置:

uglify: {
        all: {
            files: [{
                expand: true,
                cwd: '<path to js folder>',
                src: ['**/*.js', '!*.min.js'],
                dest: '<path to js folder>',
                ext: '.js'
            }]
        }
    }
Kop4lyf answered 2020-08-09T20:00:54Z
0 votes

制作一个bat文件,从每一行开始

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
Fabio answered 2020-08-09T20:01:14Z
translate from https://stackoverflow.com:/questions/17008472/how-to-minify-multiple-javascript-files-in-a-folder-with-uglifyjs