How to uglify multiple .js files in a folder and output them to a different folder?

Question

I'm new to grunt, and I can't figure out how to define paths when using the plugin grunt-contrib-uglify-es.

This is my folder structure :

.
├── controllers
├── models
├── public
│   ├── build
│   │   ├─ foo.min.js
│   │   └─ x.min.js
│   ├── css
│   ├── font
│   └── js
│        ├─ foo.js
│        └─ x.js
├── routes
├── tests
├── utils
└── views

and this is my grunt task :

// take all js file in public/js/ and put them in public/build/
uglify: {
  options: {
    mangle: false,
          banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
  },
  build: {
    files: [{
      expand: true,
      src: 'public/js/*.js',
      dest: 'public/build/',
      rename: function (dst, src) {
        console.log(dst);
        console.log(src);
        return src;
      }
    }]
  }
}

When I run grunt, it creates the file(s) into public/js and overwrites the existing file(s). I don't understand why.

I also tried this :

expand: true,
src: 'js/*.js',
dest: 'build/',
cwd: 'public/',

And now it create a new folder js at the root with all the files inside.

I would like to compress every .js file in public/js/ and then put them in public/build/

I'm clearly lost, can you help me please?

RobC · Accepted Answer · 2019-03-27 10:24:34Z

1

To meet your requirement, when building the files object dynamically you need to utilize;

The cwd option - which is described as follows:
- cwd All src matches are relative to (but don't include) this path.
The rename function, which is described as:

rename Embeds a customized function, which returns a string containing the new destination and filename. This function is called for each matched src file (after extension renaming and flattening).

Gruntfile:

The following configuration will meet your desired result.

module.exports = function (grunt) {

  grunt.loadNpmTasks('grunt-contrib-uglify-es');

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        mangle: false,
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {

        // Change your configuration to this...
        files: [{
          expand: true,
          cwd: 'public/js',
          src: '*.js',
          dest: 'public/build/',
          rename: function (dst, src) {
            return dst + '/' + src.replace('.js', '.min.js');
          }
        }]
      }
    }
  });

  grunt.registerTask('default', ['uglify']);
};

answered Mar 27, 2019 at 10:24

RobC

25.3k21 gold badges87 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jean-loup Monnier Over a year ago

Thanks for your explanation :)

Collectives™ on Stack Overflow

How to uglify multiple .js files in a folder and output them to a different folder?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related