NodeJS 如何用UglifyJS缩小一个文件夹中的多个Javascript文件?

svujldwt  于 2023-01-08  发布在  Node.js
关注(0)|答案(9)|浏览(161)

你好,我正在使用uglifyJs来缩小我的javascript文件,它一次只能处理一个文件,我正在寻找的是将一个名为JS的文件夹中存在的所有javascript文件缩小到一个名为JSM的文件夹中,需要说明的是,我的JS文件夹中有两个文件,分别名为test1.js和test2.js,我希望对该文件夹运行uglify并生成test1.min.js和test2.min。js在JSM文件夹中,那么有没有办法做到这一点呢?一个类似于以下的命令:

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

或者任何能帮到我的想法。
谢谢。

s3fp2yjn

s3fp2yjn1#

我知道这看起来像是一个巨大的进步,但是我真的推荐使用grunt,一旦你掌握了它的窍门,它真的很简单。
下面是一个速成班:
1.安装NodeJS
1.安装Grunt CLI(只需在控制台/终端中输入即可):

npm install -g grunt-cli

1.在项目的根目录中创建一个简单的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"
  }
}

1.一旦你有了,只是键入:npm install到控制台(在你项目的根目录下)。这将安装必要的grunt插件/依赖项(来自上面的包文件)。
1.现在在项目的根目录下创建一个简单的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' ]);

 

};

1.完成后,您只需要构建它。在控制台中键入:

grunt

或者--更好的--如果你输入下面的execute命令-- grunt会监控你的源文件的变化,如果你改变了其中的任何一个--它会自动构建它们:

grunt watch --force

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

kxeu7u2r

kxeu7u2r2#

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

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

oymdgrw73#

仅npm方式:
1.运行:

npm install uglifyjs-folder --save-dev

1.然后在你的package.json里加上这样的内容

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

1.然后运行:

npm run uglifyjs

请注意,如果您需要生成到与源文件相同的文件夹(js),则应执行以下操作:
1.运行:

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

1.然后在package.json中添加如下内容:

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

1.然后运行:

npm run uglifyjs
vecaoik1

vecaoik14#

根据上面的回答,我现在在.bashrc文件中设置了以下内容:

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

oknwwptz5#

uglify-js不支持ES6+,所以我建议使用terser(要安装它,请运行npm install terser -g)下面是一个shell脚本,递归地对任何路径执行terser

术语路径.sh

#!/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
3wabscal

3wabscal6#

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

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

xsuvu9jc7#

创建一个bat文件,在每行的开头都有start

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
zc0qhyus

zc0qhyus8#

你可以使用这个npm模块软件包

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

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

npm package site

cyej8jka

cyej8jka9#

在Windows上使用uglifyjs和PowerShell。
使用Powershell迭代目录中的所有js文件(如果提供了-recurse,则包括子文件夹),并为每个文件调用uglifyjs命令。
请注意,这段代码将用丑化后的版本覆盖原始文件,如果不需要,请更改uglifyjs命令的参数。

Get-ChildItem "some directory path" -Recurse -Filter *.js | 
Foreach-Object {
    echo $_.FullName
    uglifyjs $_.FullName -o $_.FullName
}

相关问题