New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to uglify all .js files within a directory? #23

Closed
mmatzanke opened this Issue Feb 7, 2013 · 10 comments

Comments

Projects
None yet
8 participants
@mmatzanke

mmatzanke commented Feb 7, 2013

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

@jsoverson

This comment has been minimized.

Show comment
Hide comment
@jsoverson

jsoverson Feb 7, 2013

Member

If you are looking to uglify all files into one file, then you can use the standard src->dest syntax in your Gruntfile

uglify : {
  yourTask : {
    src : 'src/**/*.js',
    dest : 'build.js'
  }
}

If you are looking to individually uglify every file in a directory, that is not supported directly but is something I'd like to get in sometime. Right now, you would need to specify each source and destination file individually, eg

uglify : {
  yourTask : {
    files : {
      'dest/a.js' : 'src/a.js',
      'dest/b.js' : 'src/b.js',
    }
  }
}

You can programmatically generate the configuration in order to make this more automatic.

Member

jsoverson commented Feb 7, 2013

If you are looking to uglify all files into one file, then you can use the standard src->dest syntax in your Gruntfile

uglify : {
  yourTask : {
    src : 'src/**/*.js',
    dest : 'build.js'
  }
}

If you are looking to individually uglify every file in a directory, that is not supported directly but is something I'd like to get in sometime. Right now, you would need to specify each source and destination file individually, eg

uglify : {
  yourTask : {
    files : {
      'dest/a.js' : 'src/a.js',
      'dest/b.js' : 'src/b.js',
    }
  }
}

You can programmatically generate the configuration in order to make this more automatic.

@mmatzanke

This comment has been minimized.

Show comment
Hide comment
@mmatzanke

mmatzanke Feb 7, 2013

Thx!!! So i've to prepare the configuration first.

mmatzanke commented Feb 7, 2013

Thx!!! So i've to prepare the configuration first.

@MMRandy

This comment has been minimized.

Show comment
Hide comment
@MMRandy

MMRandy Feb 13, 2013

Wow, the lack of wildcard support for uglifying multiple, separate files seems a little surprising given that it appears to be so prevalent in most plugins that do these types of things.

Sure hope this gets added soon :)

MMRandy commented Feb 13, 2013

Wow, the lack of wildcard support for uglifying multiple, separate files seems a little surprising given that it appears to be so prevalent in most plugins that do these types of things.

Sure hope this gets added soon :)

@cowboy

This comment has been minimized.

Show comment
Hide comment
@cowboy

cowboy Feb 13, 2013

Member

If you're using grunt 0.4.x, see the "Building the files object dynamically" section of the grunt Configuring tasks guide for some helpful info.

Member

cowboy commented Feb 13, 2013

If you're using grunt 0.4.x, see the "Building the files object dynamically" section of the grunt Configuring tasks guide for some helpful info.

@MMRandy

This comment has been minimized.

Show comment
Hide comment
@MMRandy

MMRandy Feb 13, 2013

Thx @cowboy...that's exactly what I am doing now...upgrading everything from 0.3x to 0.4. I'll give that a look. I have already done 14 other tasks successfully...2 to go, this one and some type of regex string-replace that works with 0.4. That one is eluding me at the moment.

MMRandy commented Feb 13, 2013

Thx @cowboy...that's exactly what I am doing now...upgrading everything from 0.3x to 0.4. I'll give that a look. I have already done 14 other tasks successfully...2 to go, this one and some type of regex string-replace that works with 0.4. That one is eluding me at the moment.

@MMRandy

This comment has been minimized.

Show comment
Hide comment
@MMRandy

MMRandy Feb 13, 2013

Wow, that was easy. Upgrading to 0.4.x is worth the effort...pretty bad a$$. Thx again!

p.s. Sorry to hijack the thread @cowboy, but where would be the best place to ask general questions about where to find certain plugins, like the 0.4.x compatible regex search & replace I mentioned above? Thx again.

MMRandy commented Feb 13, 2013

Wow, that was easy. Upgrading to 0.4.x is worth the effort...pretty bad a$$. Thx again!

p.s. Sorry to hijack the thread @cowboy, but where would be the best place to ask general questions about where to find certain plugins, like the 0.4.x compatible regex search & replace I mentioned above? Thx again.

@shama

This comment has been minimized.

Show comment
Hide comment
@shama

shama Mar 11, 2013

Member

@MMRandy Check out this page: http://gruntjs.com/help-resources In short IRC or stackoverflow are your best options.

Closing as it appears the original issue has been solved.

Member

shama commented Mar 11, 2013

@MMRandy Check out this page: http://gruntjs.com/help-resources In short IRC or stackoverflow are your best options.

Closing as it appears the original issue has been solved.

@shama shama closed this Mar 11, 2013

@cyberience

This comment has been minimized.

Show comment
Hide comment
@cyberience

cyberience Nov 3, 2015

This may help you. using bash script to handle the multi file issue.
find . -type f -exec ls "{}" ; | grep .js | xargs -n 1 java -jar yuicompressor-2.4.8.jar
just change the yuicompressor part to your fav compressor, find will hunt the files and pass them 1 by 1 to xarg filtering only js files through grep. and xarg makes the file an imput paramet for the compressor.

cyberience commented Nov 3, 2015

This may help you. using bash script to handle the multi file issue.
find . -type f -exec ls "{}" ; | grep .js | xargs -n 1 java -jar yuicompressor-2.4.8.jar
just change the yuicompressor part to your fav compressor, find will hunt the files and pass them 1 by 1 to xarg filtering only js files through grep. and xarg makes the file an imput paramet for the compressor.

@omidraha

This comment has been minimized.

Show comment
Hide comment
@omidraha

omidraha Dec 12, 2016

Contributor

I use this:

uglify: {
	dev: {
		options: {
			mangle: true
		},
		files: [{
			expand: true,
			src: 'dist/assets/js/*.js',
			dest: 'dist/assets',
			cwd: '.',
			rename: function (dst, src) {
				// To keep src js files and make new files as *.min.js :
				// return dst + '/' + src.replace('.js', '.min.js');
				// Or to override to src :
				return src;
			}
		}]
	}
},
Contributor

omidraha commented Dec 12, 2016

I use this:

uglify: {
	dev: {
		options: {
			mangle: true
		},
		files: [{
			expand: true,
			src: 'dist/assets/js/*.js',
			dest: 'dist/assets',
			cwd: '.',
			rename: function (dst, src) {
				// To keep src js files and make new files as *.min.js :
				// return dst + '/' + src.replace('.js', '.min.js');
				// Or to override to src :
				return src;
			}
		}]
	}
},
@robots4life

This comment has been minimized.

Show comment
Hide comment
@robots4life

robots4life Mar 6, 2018

Original files in resources/vendor/js folder.
Minified files in resources/vendor/js/min folder and .min.js file ending.

uglify: {
  options: {
    mangle: false
  },
  all_vendor_js: {
    files: [
      {
        expand: true,
        cwd: "resources/vendor/js/",
        src: ["*.js", "!*.min.js"],
        dest: "resources/vendor/js/min/",
        ext: ".min.js"
      }
    ]
  }
},

If you want them to be minified to the same directory as they are in and give them a different file ending, .min.js, use this.

uglify: {
  options: {
    mangle: false
  },
  all_vendor_js: {
    files: [
      {
        expand: true,
        cwd: "resources/vendor/js/",
        src: ["*.js", "!*.min.js"],
        dest: "resources/vendor/js",
        ext: ".min.js"
      }
    ]
  }
},

..and if you need to uglify es6 code you can't but you can transpile it to es5 and then uglify it. To transpile you could use grunt-babel. This is what would take es6 js files and make es5 js files from them in a separate folder adding the es5.js file name.

    babel: {
      options: {
        sourceMap: true,
        presets: ["env"]
      },
      dist: {
        files: [
          {
            expand: true,
            cwd: "resources/js/es6/",
            src: ["*.js", "!*.es5.js"],
            dest: "resources/js/es5/",
            ext: ".es5.js"
          }
        ]
      }
    },

For babel you need
npm install --save-dev grunt-babel babel-core babel-preset-env --verbose
and grunt-tasks
npm install --save-dev load-grunt-tasks --verbose.

robots4life commented Mar 6, 2018

Original files in resources/vendor/js folder.
Minified files in resources/vendor/js/min folder and .min.js file ending.

uglify: {
  options: {
    mangle: false
  },
  all_vendor_js: {
    files: [
      {
        expand: true,
        cwd: "resources/vendor/js/",
        src: ["*.js", "!*.min.js"],
        dest: "resources/vendor/js/min/",
        ext: ".min.js"
      }
    ]
  }
},

If you want them to be minified to the same directory as they are in and give them a different file ending, .min.js, use this.

uglify: {
  options: {
    mangle: false
  },
  all_vendor_js: {
    files: [
      {
        expand: true,
        cwd: "resources/vendor/js/",
        src: ["*.js", "!*.min.js"],
        dest: "resources/vendor/js",
        ext: ".min.js"
      }
    ]
  }
},

..and if you need to uglify es6 code you can't but you can transpile it to es5 and then uglify it. To transpile you could use grunt-babel. This is what would take es6 js files and make es5 js files from them in a separate folder adding the es5.js file name.

    babel: {
      options: {
        sourceMap: true,
        presets: ["env"]
      },
      dist: {
        files: [
          {
            expand: true,
            cwd: "resources/js/es6/",
            src: ["*.js", "!*.es5.js"],
            dest: "resources/js/es5/",
            ext: ".es5.js"
          }
        ]
      }
    },

For babel you need
npm install --save-dev grunt-babel babel-core babel-preset-env --verbose
and grunt-tasks
npm install --save-dev load-grunt-tasks --verbose.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment