如何使用UglifyJS缩小文件夹中的多个Javascript文件? [英] How to minify multiple Javascript files in a folder with UglifyJS?

问题描述

您好，我正在使用uglifyJs来最小化我的javascript文件，它一次可以很好地处理一个文件，我想要的是将一个名为JS的文件夹中的所有javascript文件最小化为一个名为JSM的文件夹，为了清楚起见，我的JS文件夹中有2个文件，分别称为test1.js和test2.js，我想对该文件夹运行uglify并在JSM文件夹中生成test1.min.js和test2.min.js，所以这里有一个做到这一点的方法?像这样的命令:

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 -c -m JS/*.js JSM/*.min.js

或者任何可以帮助我的想法.

Or any idea that can help me.

谢谢.

推荐答案

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

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.

这是速成班:

1. 安装 NodeJS

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

1. Install NodeJS

2. Install Grunt CLI (just enter this in console/terminal):

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插件/依赖项(来自上面的软件包文件).

Once you have that, just type: npm install to the console (in the root of your project). This will install the necessary grunt plugins/dependencies (from the package file above).

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

Now create a simple gruntfile.js in 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

或者-更好-如果您键入以下命令来执行-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

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

You can then add more plugins, like: css minification, css preprocessors (less, sass, stylus), jshint, etc.

这篇关于如何使用UglifyJS缩小文件夹中的多个Javascript文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！