node.js 如何使用 UglifyJS 缩小文件夹中的多个 Javascript 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17008472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to minify multiple Javascript files in a folder with UglifyJS?
提问by OussamaLord
Hello I'm using uglifyJs to minify my javascript files, it's working well with one file at a time, what I'm loking for is to minify all the javascript files present in a folder called JS into a folder called JSM, to be clear I have 2 files inside my JS folder called test1.js and test2.js and I want to run uglify against that folder and generate test1.min.js and test2.min.js inside the JSM folder, so is there a way to do this? a command like :
您好，我正在使用 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
Or any idea that can help me.
或者任何可以帮助我的想法。
Thanks.
谢谢。
回答by Dziad Borowy
I know it might seem like a huge step but I would really recommend using grunt. It's really simple once you get the hang of it.
我知道这似乎是一个巨大的进步，但我真的建议使用grunt。一旦你掌握了它，这真的很简单。
Here's a crash course:
这是一个速成课程：
- Install NodeJS
Install Grunt CLI (just enter this in console/terminal):
npm install -g grunt-cli
Create a simple
package.jsonfile in the root of your project:{ "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" } }Once you have that, just type:
npm installto the console (in the root of your project). This will install the necessary grunt plugins/dependencies (from the package file above).Now create a simple
gruntfile.jsin the root of your project (it's a kind of config for your project):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' ]);Once that's done you just need to build it. Type in the console:
grunt
or - better - if you type execute the command below - grunt will monitor your source files for changes, and if you change any of them - it will build them automatically:
grunt watch --force
- 安装Node.js
安装 Grunt CLI（只需在控制台/终端中输入）：
npm install -g grunt-cli
package.json在项目的根目录中创建一个简单的文件：{ "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在您的项目的根目录中创建一个简单的（它是您项目的一种配置）：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' ]);完成后，您只需要构建它。在控制台输入：
grunt
或者 - 更好 - 如果您键入执行下面的命令 - grunt 将监视您的源文件的更改，如果您更改其中任何一个 - 它会自动构建它们：
grunt watch --force
You can then add more plugins, like: css minification, css preprocessors (less, sass, stylus), jshint, etc.
然后，您可以添加更多插件，例如：css minification、css 预处理器（less、sass、stylus）、jshint 等。
回答by Calpau
If you're on Linux/Mac and have access to bash, you can use uglifyjs on multiple JS files like so:
如果您使用的是 Linux/Mac 并且可以访问 bash，则可以在多个 JS 文件上使用 uglifyjs，如下所示：
rm *.min.js; for f in *.js; do short=${f%.js}; uglifyjs $f > $short.min.js; done
回答by mmorrey
Further to the above answer, I now have this set up in my .bashrc file:
除了上面的答案，我现在在我的 .bashrc 文件中设置了这个：
alias minify='rm *.min.js; for f in *.js; do short=${f%.js}; uglifyjs $f > $short.min.js; done'
回答by Peter Butkovic
npm-only way:
仅 npm 方式：
run:
npm install uglifyjs-folder --save-devand afterwards add to your
package.jsonsomething like:"uglifyjs": "uglifyjs-folder js -eo jsm"then run:
npm run uglifyjs
跑：
npm install uglifyjs-folder --save-dev然后添加到您的内容中
package.json，例如："uglifyjs": "uglifyjs-folder js -eo jsm"然后运行：
npm run uglifyjs
Please note, if you'd need to generate to the same folder as the source files are (js), following should do the job:
请注意，如果您需要生成与源文件 ( js)相同的文件夹，则应执行以下操作：
run:
npm install del-cli uglifyjs-folder --save-devand afterwards add to your
package.jsonsomething like:"uglifyjs": "del js/*.min.js; uglifyjs-folder js -eo js"then run:
npm run uglifyjs
跑：
npm install del-cli uglifyjs-folder --save-dev然后添加到您的内容中
package.json，例如："uglifyjs": "del js/*.min.js; uglifyjs-folder js -eo js"然后运行：
npm run uglifyjs
回答by Kop4lyf
You can use this configuration in gruntfile.js:
你可以在 gruntfile.js 中使用这个配置：
uglify: {
all: {
files: [{
expand: true,
cwd: '<path to js folder>',
src: ['**/*.js', '!*.min.js'],
dest: '<path to js folder>',
ext: '.js'
}]
}
}
回答by Fabio
make a bat file with start at each row beginning
制作一个 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
