gruntjs / grunt-contrib-uglify Goto Github PK

If you use source_map: 'public/compiled/dod.min.js.map' it adds to the javascript:

//@ sourceMappingURL=public/compiled/dod.min.js.map

This is where I want to store the file but not the url I want browsers to hit to get the source map.

see
#62
#58
#56

Is there any way to make UglifyJS2 name mangling stable? I noticed if I uglify the same file multiple times, the output may be different (ordering and assignment of mangles variables names).

This code is redundant, since we have it in a shared lib:

https://github.com/gruntjs/grunt-contrib-uglify/blob/master/tasks/lib/min.js

That being said, see gruntjs/grunt-lib-contrib#5

I'm new to Grunt and uglify, i'm trying to use them in a small project in order to learn then.
My question is how to tell to uglify to ignore a CDN path..

Running "uglify:dist/https:/maps.googleapis.com/maps/api/js?key={}&sensor=false" (uglify) task
Verifying property uglify.dist/https exists in config...ERROR
>> Unable to process task.
Warning: Required config property "uglify.dist/https" missing. Use --force to continue.

I need to replace all strings to Unicode symbols like closure compiler do in advanced mode. Is it possible?

When uglifying the following html document:

<span>
  <div>
    test
  </div>
</span>

... the result is:

<span>
  </span><div>
    test
  </div> 

I tested it with version 0.2.0 from npm.

uglify: {
            options: {
                mangle: false
            },
            my_target: {
                files: {
                    'publish/js/**/*.js': ['src/js/**/*.js']
                }
            }
        },

Throws me following errors:

Warning: Unable to create directory "c:\project\publish\js**" (Error code: ENOENT). Use --force to continue.

See mishoo/UglifyJS@26746ce and mishoo/UglifyJS@75f0bbe for changesets introducing the option to UglifyJS 2.

Basically, --screw-ie8 disables hacks used to retain compatibility with IE<9. The drawback is, it also introduces bugs, see e.g.: mishoo/UglifyJS#485

In some environments where support for IE<9 is not needed (I'm working on two such projects right now) passing --screw-ie8 to uglifyjs is safer than not doing that.

During development, having an automatic sourceMapRoot starting like "file:///Users/.../" could be really convenient (like Sass sourcemap does) to avoid a specific definition (more flexible conf when mutliple dev/env).
Do you think it's a doable & nice idea ?
I'm new too node & grunt, so you can slap me if there is something like '<%= grunt.pwd %'> :)

I have a src and build folder. In src folder there is a foo.js file, its content is:

var p=function(a){
        console.log(a)
}
p('ciao')

My Gruntfile.js is:

module.exports = function(grunt) {

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

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

If i run grunt in the root directory of the project (that contains src/ and build/ folders) it throws:

Running "uglify:build" (uglify) task
Warning: Uglification failed. Use --force to continue.

Aborted due to warnings.

I'm using grunt 0.4

Until mishoo/UglifyJS#33 is closed there are still some other options that would be helpful to support.

Wrap will wrap your code within a closure, helpful to make sure no functions are leaking into the global scope.

Define will define variables in the closure which provides an easy way to hardcode in the JS data like the the build date, version, and debug information.

This line:

https://github.com/gruntjs/grunt-contrib-uglify/blob/master/tasks/lib/uglify.js#L83

There's an issue on webkit but they don't support the new //# syntax for source maps: https://code.google.com/p/chromium/issues/detail?id=243722 - which means that stable chrome isn't requesting the sourcemap file at all.

I've found if I use both syntax in the file did sourcemaps work - so that might be a stop gap solution whilst support lands in the browsers.

It looks like the link target was removed in a past commit:

[multi task]: https://github.com/gruntjs/grunt/wiki/Configuring-tasks

I think https://github.com/gruntjs/grunt-contrib-uglify#advanced-source-maps is out of date and not supported.

I found this format to work:

options: {
  source_map: 'path/to/source-map.js',             // your sourcemap output
  source_map_root: 'http://example.com/path/to/src/',   // the location of your original's source
},

When minifying multiple files, it doesn't appear to be possible to specify a seperate banner and footer for each output file.

uglify: {
    options: {
    },
    vendor: {
        banner: '/*! Third Party Scripts: <%= grunt.template.today("yyyy-mm-dd") %> */\n',
        src: 'js/build/vendor.js',
        dest: 'js/build/vendor.min.js'
    },
    dashboard: {
        banner: '/*! Dashboard Scripts: <%= grunt.template.today("yyyy-mm-dd") %> */\n',
        src: 'js/build/dashboard.js',
        dest: 'js/build/dashboard.min.js'
    },
    home: {
        banner: '/*! Homepage Scripts: <%= grunt.template.today("yyyy-mm-dd") %> */\n',
        src: 'js/build/home.js',
        dest: 'js/build/home.min.js'
    },
    article: {
        banner: '/*! Article Scripts: <%= grunt.template.today("yyyy-mm-dd") %> */\n',
        src: 'js/build/article.js',
        dest: 'js/build/article.min.js'
    }
}

The preserveComments option should support RegExps, as UglifyJS2 does.

I have set up a task to minify, add the suffix .min and write to file to the same folder:

expected result
dragin/without_dots.js.js -> dragin/without_dots.js.min.js
dragin/dragin.jquery.js -> dragin/dragin.jquery.min.js

obtained result
dragin/without_dots.js.js -> dragin/without_dots.js.min.js
dragin/dragin.jquery.js -> dragin/dragin.min.js

the .jquery part of dragin.jquery.js gets cut off

Output of

grunt uglify:dragin --verbose --debug --stack

Running "uglify:dragin" (uglify) task
Verifying property uglify.dragin exists in config...OK
Files: htdocs/assets/dragin/dragin.jquery.js -> htdocs/assets/dragin/dragin.min.js
Files: htdocs/assets/dragin/without_dots.js -> htdocs/assets/dragin/without_dots.min.js
Minifying with UglifyJS...Reading htdocs/assets/dragin/dragin.jquery.js...OK
OK
Writing htdocs/assets/dragin/dragin.min.js...OK
File "htdocs/assets/dragin/dragin.min.js" created.
Minifying with UglifyJS...Reading htdocs/assets/dragin/without_dots.js...OK
OK
Writing htdocs/assets/dragin/without_dots.min.js...OK
File "htdocs/assets/dragin/without_dots.min.js" created.

Done, without errors.

My task configuration

      // Does not work with filenames containing dots
      dragin: {
        // Grunt will search for "**/*.js" under "lib/" when the "minify" task
        // runs and build the appropriate src-dest file mappings then, so you
        // don't need to update the Gruntfile when files are added or removed.
        files: [
          {
            expand: true,     // Enable dynamic expansion.
            cwd: 'htdocs/assets/dragin/',      // Src matches are relative to this path.
            src: ['**/*.js', '!*.min.js'], // Actual pattern(s) to match.
            dest: 'htdocs/assets/dragin/',   // Destination path prefix.
            ext: '.min.js'    // Dest filepaths will have this extension.
          }
        ]
      }

When i run the grunt command in terminal, I have it set to use the uglify plugin to deal with my JavaScript files; however, I am also creating sourceMaps using Uglify, which are being minified for me. Is there any way to not have that done, these files are also being generated dynamically as of now based on each JavaScript file.

I'm tweaking the new phpwebapp yeoman generator to suit a CMS I develop with. I'm getting this error message:

Running "uglify:dist/_themes/cb/js/vendor/modernizr.js" (uglify) task
Warning: Uglification failed. Use --force to continue.

Any of the build blocks in my html will cause this same error. I've confirmed that the paths to the files are all valid, though.

Here is the build block for the above error:

<!-- build:js _themes/cb/js/vendor/modernizr.js -->
<script src="components/modernizr/modernizr.js"></script>
<!-- endbuild -->

using grunt 0.4.1 and uglify 0.1.2.

I don't know what to check next or what other information would be helpful in getting help. Can anyone offer a suggestion?

Thanks.

• better descriptions
• more consistency

I was wondering if you could add some custom wrapping around optimized source (a bit like r.js wrap option).

Right now I think the wrap option only allow to wrap all inside an IIFE.

But in production, I'd like to wrap these in a try/catch block to send error in a logging system (try/catch so we get a stacktrace/sourcemap support).

Do you think that would be possible?

I have Grunt tasks that compile coffeescript and other files to a build/public/js directory. I'd like uglify to minify the contents of that directory, so build/public/js/something.js is minified to build/public/js/something.min.js.

I can't figure out how to declare that dynamically, however, using the { dest: src } syntax in the files examples. I could create the list up front in the config, but they don't exist until an earlier grunt task is run that puts them there, so the files to minify are unknown up front.

I'm hoping there's some kind of wildcard syntax... any suggestions?

Thanks!

Im seeing the error

TypeError: Object # has no method 'options'
at Object.module.exports (/Volumes/Meraki/co/manage/node_modules/grunt-contrib-uglify/tasks/uglify.js:19:24)
at Object.task.registerMultiTask.thisTask (/Volumes/Meraki/co/manage/node_modules/grunt/lib/grunt/task.js:109:15)
at Object.task.registerTask.thisTask.fn (/Volumes/Meraki/co/manage/node_modules/grunt/lib/grunt/task.js:58:16)
at Task. (/Volumes/Meraki/co/manage/node_modules/grunt/lib/util/task.js:343:36)
at Task. (/Volumes/Meraki/co/manage/node_modules/grunt/lib/util/task.js:319:9)
at Task. (/Volumes/Meraki/co/manage/node_modules/grunt/lib/util/task.js:346:11)
at Task. (/Volumes/Meraki/co/manage/node_modules/grunt/lib/util/task.js:319:9)
at Task. (/Volumes/Meraki/co/manage/node_modules/grunt/lib/util/task.js:346:11)
at Task. (/Volumes/Meraki/co/manage/node_modules/grunt/lib/util/task.js:319:9)
at Task. (/Volumes/Meraki/co/manage/node_modules/grunt/lib/util/task.js:346:11)

File versions:
├─┬ [email protected]
│ └─┬ [email protected]

The banner option appends lines to the file which change the line numbering that was used by the source map module. This results in unusable source maps.

I'm not sure what the right fix is, here are some thoughts:

• When both options are used warn the user the the source map will not be essentially broken and unusable.
• When both options are used warn the user that the banner option is being ignored so that the source maps will work.
• Figure out if Uglify has a banner option that is compatible with source maps and use that instead.
• File a ticket or PR with uglify to support this feature.

Note: I haven't researched the Uglify side of things to see if maybe there is an Uglify option for this already that we should be using.

I tried to use some example from README, and ....
Object # has no method 'options'
I defined 'options' :)
I'm doing something wrong or this is BUG ..?

if i do this:

var fileList = [ "js/file1.js", "js/file2.js", "js/file2.js" ];//will be generated
var buildDir = "build";
var distDir = "dist";

// Project configuration.
grunt.initConfig({
    uglify: {
        min: {
            files: [
                {
                    cwd: buildDir,
                    expand: true,
                    src: fileList,
                    dest: distDir + "/js/my.min.js"
                }
            ]
        }
    }
});

after grunt this, I got minified copies of every source file, in a directory "dist/js/my.min.js/".

But I want only one minified concatenation of the files. Is that a bug in the uglify task?

Our directory structure:

assets/
  js/
    pager.js # source file
root/
  js/
    pager.js # uglified file

Our Gruntfile.coffee:

    uglify:
      development:
        options:
          sourceMap: (fileName) ->
            fileName.replace /\.js$/, '.map'
          sourceMapRoot: '/assets/js/'
          sourceMappingURL: (path) ->
            path.replace( /^root\//, '/' ).replace( /\.js$/, '.map' )
          sourceMapPrefix: 2
          beautify: true
          mangle: false
        expand: true
        cwd: 'assets/js'
        src: [ '*.js' ]
        dest: 'root/js/'
        ext: '.js'

I got root/js/pager.js and root/js/pager.map.

But file field in source map is filled with root/js/pager.js instead of js/pager.js.

{"version":3,"file":"root/js/pager.js","sources":["pager.js"], ... }

How to fix this?

-p, --prefix       Skip prefix for original filenames that appear in source
                   maps. For example -p 3 will drop 3 directories from file
                   names and ensure they are relative paths.

This seems to be required when the js is stored in a subdirectory that isn't exposed on the web, such as /public/js/ vs /js.

I'm not sure what the Uglify2 api flag is for this feature.

The README shows this usage:

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});

Running that (with grunt 0.4.0) I get "Files: [no src]".

In grunt Getting Started page the src/dst usage is shown: http://gruntjs.com/getting-started

Which is the correct one?

I just pushed fixes for a few issues but I'm not an author on NPM. Adding this issue as a reminder for @tkellen @cowboy or @shama to publish v0.1.2

re: gruntjs/grunt#411

Mishoo hasn't documented the API for anything but the CLI yet, but let's do this soon.

https://github.com/mishoo/UglifyJS2

Is there a option ascii to set? I want to convert the non-ascii to unicode。like UglifyJS's option --ascii

think you~

When trying to use the sourcemap for a pretty large project and specifying sourceMapRoot in the options, in the resulting minified JavaScript-File, the root path is not prepended:

sth.min.js looks like

(function(e){ ... /* lots of minified code */ })
//@ sourceMappingURL=js-min/sth.min.map

but it should look like

(function(e){ ... /* lots of minified code */ })
//@ sourceMappingURL=/path/to/assets/js-min/sth.min.map

the @sourceMappingURL is missing the root-path. Any ideas on this? Or am I using it wrong? In my Gruntfile I do:

uglify: {
  sth: {
    options: {
      sourceMapRoot: '/path/to/assets/',
      sourceMap: 'js-min/sth.min.map'
    },
    files: {
      'js-min/sth.min.js': [
        // lot's of js-files in /js/libs/*.js and /js/plugins/*.js
      ]
    }
  }
}  

The Gruntfile.js is not in the root-path of the project but in /path/to/assets/ - is this a problem?

Hi, thanks for the great works, Grant team.

This example
https://github.com/Takazudo/test

makes rollover.min.js from rollover.js
https://github.com/Takazudo/test/blob/master/js/rollover.js

But this task creates 0 byte file like below.
https://github.com/Takazudo/test/blob/master/js/rollover.min.js

[Takazudo]$ grunt
Running "uglify:rollover" (uglify) task
File "js/rollover.min.js" created.
Uncompressed size: 37 bytes.
Compressed size: 0 bytes gzipped (0 bytes minified).

Done, without errors.

This seems to happen when the source file is pretty small.

$ uglifyjs -o rollover.min.js rollover.js

does not fail.
It seems something wrong in contrib-uglify.

Here's my environment

Node: v0.8.20 (Mac OS X10.8.2)
grunt-cli: v0.1.6

I'm happy if this was fixed.

I also don't see an equivalent page listed in: https://github.com/gruntjs/grunt/wiki/_pages

With new grunt I have problems with minification

Loading "uglify.js" tasks...OK
+ uglify
Loading "Gruntfile.js" tasks...OK
+ build, default, test, urchin

Running tasks: uglify

Running "uglify" task

Running "uglify:beautify" (uglify) task
Verifying property uglify.beautify exists in config...OK
Files: plugin/beautify.js -> beautify.js
Minifying with UglifyJS...Reading plugin/beautify.js...OK
Warning: Uglification failed. Used --force, continuing.
Warning: Cannot read property 'min' of undefined Used --force, continuing.

``

grunt-cli v0.1.6
grunt v0.4.1
grunt-contrib-uglify v0.2.0

Hey I'm new with this task,

I would like to know how to uglify all *.js files within a directory via task description object within the grunt file? Probably i do not understand it like the way i should ;-).

greetz Martin

I have 4 TypeScript files under the ts directory.

I can compile them all into one main.js file with source map at main.js.map. (Using the typescript:base task)

But when I try to uglify them... it's not working if I compile more than one TypeScript files, and it is working if I use one file...

It's like the uglify is getting confused when the sourceMapIn was made with more than one file...

How would you compile a TypeScript project with more than one file, into one file with a sourcemap (Back to the original ts files)

Here's the grunt file:

module.exports = function (grunt) {
    grunt.initConfig({
        uglify: {
            dist: {
                options: {
                    sourceMap: '../js/main.min.map',
                    sourceMapIn: 'main.js.map',
                    sourceMapRoot: '../ts/'
                },
                files: {
                    '../js/main.min.js': ['main.js']
                }
            }
        },
        typescript: {
            base: {
                 src: ['**/*.ts'],
                 dest: '../js/main.js',
                 options: {
                     module: 'amd',
                     sourcemap: true,
                     declaration: false
                 }
             }
        }
    });

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

    grunt.file.setBase('../ts');

    grunt.registerTask('default', ['typescript:base', 'uglify:dist']);
};

According to my reading of the UglifyJS docs, you should be able to disable all compression, but I couldn't do this with the latest release of this task.

Source maps fail when

• Source files are specified with relative paths (js/source)
• Destination files are not in the project root directory (js/build)
• Source map files are not placed in the project root directory (js/build)

Browsers look for the source map file in the destination file. The path in the destination file is considered relative to the destination file, not the web root.

If the source map file is found, the file it refers to is considered relative to the source map file not the web root.

So in the following scenario, the browser looks for the source file in /js/build/js/source

One workaround is to place the source map files in the project root and place both the destination and source files in js/build/ then make sure the sourceMappingURL starts with "../../"

== Ideal ==

        uglify: {
            options: {
                sourceMap: '<% filename %>.map',
                sourceMapRoot: 'http://localhost/',
                banner: '/*! <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            vendor: {
                src: 'js/build/vendor.js',
                dest: 'js/build/vendor.min.js'
            },
            home: {
                src: 'js/build/home.js',
                dest: 'js/buildhome.min.js'
            }
        }

== Workaround ==
Source maps must be placed in the root directory

        uglify: {
            options: {
                sourceMap: function (path) {
                    return path.replace(/js\/build\/(.*).min.js/, "$1.map.js");
                },
                sourceMappingURL: function (path) {
                    return path.replace(/js\/build\/(.*).min.js/, "../../$1.map.js");
                },
                sourceMapRoot: 'http://localhost/',
                banner: '/*! <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            vendor: {
                src: 'js/build/vendor.js',
                dest: 'js/build/vendor.min.js'
            },
            home: {
                src: 'js/build/home.js',
                dest: 'js/buildhome.min.js'
            }
        }

I have just upgraded the grunt-contrib-uglify plugin from 0.1.1 to 0.1.2 and it takes about 6 times longer to uglify the exact same files.
I'm using node 0.8.20 x64 on Windows 7 x64.

The sourceMappingURL prefix is currently "//#" as shown on the following line:

https://github.com/gruntjs/grunt-contrib-uglify/blob/master/tasks/lib/uglify.js#L83

However, this doesn't work in Chrome (v27.0.1453.93). Chrome expects "//@", which is also referenced in the UglifyJS2 docs:

--source-map-url   The path to the source map to be added in //@ sourceMappingURL.  Defaults to the value passed with --source-map.

I'm new to grunt so I've started out trying to uglify a single file but running in to problems. I'm using grunt 0.4.1 and contrib-uglify 0.2.1.

My Gruntfile.js contains;

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    uglify: {
      my_target: {
        files: {
          'public/tmp/output.min.js': ['public/js/namepsace.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
};

Running grunt uglify --verbose results in successful outputs until;

Running "uglify:my_target" (uglify) task
Verifying property uglify.my_target exists in config...OK
Files: [no src] -> public/tmp/output.min.js
Minifying with UglifyJS...Warning: Uglification failed. Use --force to continue.

Aborted due to warnings.

The source file paths are correct relative to the Gruntfile.js file.

Any help would be grateful.

that works:

    uglify: {
        dbg: {
            options: {
                compress: false,
                mangle  : false,
                beautify: true
            },
            files: [{
                src:[ "build/js/file1.js", "build/js/file2.js", "build/js/file3.js" ],
                dest: 'dist/js/myScript.js'
            }]
        }
    }

that works too:

    uglify: {
        min: {
            files: [{
                src:[ "build/js/file1.js", "build/js/file2.js", "build/js/file3.js" ],
                dest: 'dist/js/myScript.min.js'
            }]
        }
    },

but together:

    uglify: {
        dbg: {
            options: {
                compress: false,
                mangle  : false,
                beautify: true
            },
            files: [{
                src:[ "build/js/file1.js", "build/js/file2.js", "build/js/file3.js" ],
                dest: 'dist/js/myScript.js'
            }]
        },
        min: {
            files: [{
                src:[ "build/js/file1.js", "build/js/file2.js", "build/js/file3.js" ],
                dest: 'dist/js/myScript.min.js'
            }]
        }
    },

it throw the error:

Running "uglify" task

Running "uglify:dbg" (uglify) task
Verifying property uglify.dbg exists in config...OK
Files: [no src] -> 'dist/js/myScript.js'
Minifying with UglifyJS...Warning: Uglification failed. Use --force to continue.

But why? The task configuration looks correct for me.

Gruntfilejs

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      dist: {
        src: ['js/main.js', 'js/plugin.js'],
        dest: '../dist/js/main.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

OS: Windows 32bit
grunt: "~0.4.0rc6
grunt-contrib-uglify: ~0.1.0

My grunt watch task runs uglify and each time a js file is saved, the uglify task seems to be looping infinitely. What might be causing this?

Here's my uglify task:

uglify: {
    js : {
        options: {
            mangle: false,

            sourceMap: '_script.min.js.map',

            sourceMappingURL: '../../_script.min.js.map'
        },
        files: {
            'js/_compiled/_script.min.js' : jsFileList
        }
    }
},

People complain when we don't fail tasks on missing files. This kills the whole task if a file is missing:

Should the task fail? Should it just log that a file was missing and continue?

Current output:

File "public/compiled/dod.js" created.

If a source maps was requested it could output something like

Files "public/compiled/dod.js" and "public/compiled/dod.js.map" created.

Starting from the file:

var j;
(function () {
    'use strict';
    j = function j() {};
})();

when I invoke grunt uglify, I get this:

var j;(function(){"use strict";n=function n(){}})();

which is an obvious syntax error. My Gruntfile.js (a simplified version):

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        uglify: {
            all: {
                files: {
                    'dist/out.min.js': [ 'dist/out.js' ]
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', ['uglify']);
};

For this project I use grunt 0.4.0 and grunt-contrib-uglify 0.1.1.