Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Chris Skinner
Chris Skinner
3,807 Points
Posted by Chris Skinner
Chris Skinner
3,807 Points

Dynamic Mapping and Concat with Grunt Uglify

Hi,

I'm trying to use dynamic mapping AND concat Javascript files with Grunt Uglify.

I have the following which is not working correctly.

Here is my folder structure:

javascript
    |- account
        |- custom.js
    |- bills
        |- billing-one.js
        |- billing-two.js
    |- test (output folder)

Here is what I'm expecting:

javascript
    |- account
        |- custom.js
    |- bills
        |- billing-one.js
        |- billing-two.js
    |- test
        |- billing-one.min.js (this file includes billing-one.js AND custom.js)
        |- billing-two.min.js (this file includes billing-two.js AND custom.js)

This is what I'm currently getting:

javascript
    |- account
        |- custom.js
    |- bills
        |- billing-one.js
        |- billing-two.js
    |- test
        |- bills
            |- billing-one.min.js (this file includes just billing-one.js)
            |- billing-two.min.js (this file includes just billing-two.js)
        |- account 
            |- custom.min.js (this file includes just custom.js)

It is not including the custom.js file but instead creates a 2 folders test/account/custom.min.js 'test/bills/billing-one.js' - see above

options: {
beautify: true,
mangle: false,
compress: false,
preserveComments: 'all'
},
files: [
{
    expand: true,     // Enable dynamic expansion.
    cwd: 'javascript/',      // Src matches are relative to this path.
    src: [[bills/*.js'], 'account/custom.js'], // Actual pattern(s) to match.
    dest: 'test/',   // Destination path prefix.
    ext: '.min.js',   // Dest filepaths will have this extension.
    extDot: 'first'   // Extensions in filenames begin after the first dot
},
],

I want all the Javascript files within the bills/ folder to contain custom.js

So if there are 2 files: bills/billing-one.js bills/billing-two.js

I would expect test/ folder to include

test/billing-one.min.js (this file would contain billing-one + custom.js) test/billing-two.min.js (this file would contain billing-two + custom.js)

I don't want to hard code the file names in. If more files are added tobills/ folder the should be concat and output to the test/ folder.

Any help much appreciated.

1 Answer

Chris Skinner
Chris Skinner
3,807 Points
Chris Skinner
Chris Skinner
3,807 Points

Solved using banner: https://github.com/gruntjs/grunt-contrib-uglify#banner although the documentation isn't that clear on the fact you can use grunt.file.read to add a whole js file

uglify: {
  options: {
    banner: grunt.file.read('./javascript/account/custom.js'),
    beautify: true,
    mangle: false,
    compress: false,
    preserveComments: 'all'
  },
  files: {
    expand: true,
    cwd: 'javascript/',
    src: ['bills/*.js'],
    dest: 'test/',
    ext: '.min.js',
    extDot: 'first'
  },
}