Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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'
  },
}