关于node.js：如何使用UglifyJS缩小文件夹中的多个Javascript文件？


How to minify multiple Javascript files in a folder with UglifyJS?

您好，我正在使用uglifyJs来最小化我的javascript文件，一次只能处理一个文件，我希望将最小化一个名为JS的文件夹中的所有javascript文件压缩为一个名为JSM的文件夹，要清除，我的JS文件夹中有两个文件，分别称为test1.js和test2.js，我想对该文件夹运行uglify并在JSM文件夹中生成test1.min.js和test2.min.js ，有没有办法做到这一点？像这样的命令：

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

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

谢谢。

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

这里是速成班：

  • 安装NodeJS

  • 安装Grunt CLI(只需在控制台/终端中输入此内容)：

    1
    npm install -g grunt-cli

  • 在项目的根目录中创建一个简单的package.json文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
     "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"
      }
    }

  • 一旦有了，只需在控制台中输入：npm install(在项目的根目录中)。
    这将安装必要的grunt插件/依赖项(来自上面的软件包文件)。

  • 现在在项目的根目录中创建一个简单的gruntfile.js(这是项目的一种配置)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    module.exports = function (grunt) {
        grunt.initConfig({

    [cc]    // 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' ]);

    };

  • 完成后，您只需要构建它即可。在控制台中输入：

    1
    grunt

    或者-更好-如果键入以下命令，则-grunt将监视源文件中的更改，如果更改其中任何一个，它将自动构建它们：

    1
    grunt watch --force

    • 然后您可以添加更多插件，例如：css缩小，css预处理程序(less，sass，手写笔)，jshint等。

    相关讨论

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

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

    仅npm方式：

  • 运行：

    1
    npm install uglifyjs-folder --save-dev

  • ，然后在您的package.json中添加以下内容：

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

  • 然后运行：

    1
     npm run uglifyjs

    • 请注意，如果您需要生成与源文件(js)相同的文件夹，则应执行以下操作：

  • 运行：

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

  • ，然后在您的package.json中添加以下内容：

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

  • 然后运行：

    1
     npm run uglifyjs

    • 进一步回答上述问题后，我现在在.bashrc文件中进行了设置：

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    uglify: {
            all: {
                files: [{
                    expand: true,
                    cwd: '<path to js folder>',
                    src: ['**/*.js', '!*.min.js'],
                    dest: '<path to js folder>',
                    ext: '.js'
                }]
            }
        }

    uglify-js不支持ES6，所以我建议使用terser(要安装它，请运行npm install terser -g)
    在任何路径下递归执行terser的shell脚本下面：

    terser_path.sh

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    #!/bin/bash

    ####
    # Tiny shell script for terser any JavaScript project
    # usage:
    # ./terser_path <path_to_your_project>
    ####

    path="$1"

    find $path -name '*.js' -type f | while read f
    do
        folderpath=$(dirname"$f")
        filename=$(basename"$f")
        extension="${filename##*.}"
        filename="${filename%.*}"
        nf=$folderpath/$filename.min.$extension

    # ----- METHOD 1 : Replace the old file
    #    terser"$f" --output"$f" --compress --mangle
    # ----- METHOD 2 : Create .min.js file
        terser"$f" --output"$nf" --compress --mangle
         
    done

    您可以使用此npm模块软件包

    1
    2
     npm i uglify-js-minify-css-allfiles
     npm i uglify-js clean-css
    1
    2
    3
    4
    5
    // making index.js file
    const minifyAll = require('uglify-js-minify-css-allfiles');

    // Folder Name (you will change all files in Folders)
    minifyAll('../test/');

    npm打包站点

    制作一个蝙蝠文件，每行的开头都开始

    1
    2
    3
    4
    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