On our production server, I have minified javascript published and I&#39;m not including a map file with it, because I don&#39;t want the user to be able to understand what&#39;s happening based on the error.  

I have a  logging service I&#39;ve written to forward the angular exceptions (caught by $exceptionHandler) to myself via email.  However, this stack trace is near unreadable:

    n is not defined
        at o (http://localhost:9000/build/app.min.js:1:3284)
        at new NameController (http://localhost:9000/build/app.min.js:1:3412)
        at e (http://localhost:9000/build/bower.min.js:44:193)
        at Object.g.instantiate (http://localhost:9000/build/bower.min.js:44:310)
        at b.$get (http://localhost:9000/build/bower.min.js:85:313)
        at d.compile (http://localhost:9000/build/bower.min.js:321:23333)
        at aa (http://localhost:9000/build/bower.min.js:78:90)
        at K (http://localhost:9000/build/bower.min.js:67:39)
        at g (http://localhost:9000/build/bower.min.js:59:410)
        at http://localhost:9000/build/bower.min.js:58:480 &lt;ui-view class=&quot;ng-scope&quot;&gt;

What I&#39;m wondering is:  Is there a program where I can analyze this stack trace against the actual non-minified source code via map file (or not via map file if there&#39;s another way)



How can I take a minified javascript stack trace and run it against a source map to get the proper error?

I&#39;m using SCSS in my NodeJS project and have my script working to turn all my seperate SCSS files into a single CSS file using the following command

    node-sass -w public/css/scss/style.scss public/css/style.css

My only issue is that I also want the CSS file to be minified. Is this possible with Node-sass? The docs say there is an option for &#39;compact&#39; but it doesn&#39;t seem to work when I try

    node-sass -w compact public/css/scss/style.scss public/css/style.css

Thank you in advance for any help.

Minify CSS with Node-sass

What is the difference between jquery.min.js and jquery.js?

Which one has support for all functions?

What&#39;s the difference between jquery.js and jquery.min.js?

Is there any module in NodeJS to concatenate and minify JavaScript files?

Concat and minify JS files in Node

Any recommendations for a CSS minifier?

I’ll be rooting around Google and trying some out, but I suspected that the smart, proficient and curiously handsome StackOverflow community might have already evaluated the pros and cons of the heavyweights.

Any recommendations for a CSS minifier?

Single Page Javascript Application
----------

I have built a sophisticated ajax-driven single page webapp that uses a RESTful backend web service serving JSON. The javascript is split into many different files, each file representing some sort of feature or component.

While the service has been in *alpha* testing, I&#39;ve just be serving all these files separately without minification. But now that I&#39;d like to launch a *beta* version, I really need to combine files, minify them, and version them. I want to add this to my build process, using Maven.

Javascript File Types
-------------
I&#39;m using the following &quot;types&quot; of javascript files, of which #3 and #4 are my concerns:

1. External files, such a jquery and jquery-ui served from the Google CDN. Rarely change these versions, can be handled manually.
2. Jquery plugins that I&#39;m hosting myself, such as fullcalendar or ui-layout. Again, I rarely update these to new versions and can handle it manually.
3. Application-wide javascript code. Custom javascript that is spread across many files and can change occasionally. All of these files need to be loaded for the app to work.
4. Feature-specific javascript code. Custom javascript that is loaded on demand when a specific feature is requested. This code can change quite frequently and is not loaded at startup.

Build Objectives
-----

I&#39;d like to do the following during my build process:

* Concatenate all type 3 javascript files together, minify them, and save as a single file with a version number. For instance: `app-2.0.6.min.js`, where 2.0.6 is the maven project version.
* All type 4 files should be individually minified and saved as separate files with version numbers in the name. For instance: `feature-abc-56ab32de29.min.js`, where 56ab32de29 is the version number of that specific file.
* Update HTML files with `&lt;script&gt;` tags to point to javascript files with the correct version numbers.
* Update Javscript files that load type 4 feature javascript files to point to the right versions.

Questions
-----

* Is there a maven plugin that will assist with the concatenation?

* Is there a maven plugin that will assist with the minification? Ideally, I&#39;d like to use Google Closure Compiler, but would work with others if simpler.

* Is there a maven plugin that will assist with the versioning? 

* Is there a way to have the type 4 javascript files have independent version numbers? Ideally, if a file doesn&#39;t change between version 2.0.5 and 2.0.6, there is no need for users to download a new version and their cached version would work fine. I&#39;m using GIT for source control, so would there be a way to use a file&#39;s GIT hashcode for versioning?

* Is there a solution that will compress the javascript that is inline in regular HTML files without killing the HTML?

* Is there a solution that will compress and version my CSS files as well?


Maven plugin for versioning and minifying javascript

so far the smallest bundle I can create with angular cli is by running 

&gt; ng build --aot true -prod

I was wondering if the build process also removes unused css classes e.g. from bootstrap?

If not how can I add libraries like purifycss to it?


**EDIT April 2018**

I still did not find any satisfying solution to his problem, especially one that is compatible with the lazy loading modules with angular...


Cheers


Can angular-cli remove unused css?

Is there a way to run:

 `sass --watch a.scss:a.css`

but have `a.css` end up being minified?

How would I avoid having to run a separate minification step as I compile my stylesheet?

sass --watch with automatic minify?

I have a gulp rjs task that concatenates and uglifies all my custom .JS files (any non vendor libraries).

What i am trying to do, is exclude some files/directories from this task (controllers and directives).

**Heres my tree:**

     - application
        - resources
          - js
            main.js
            - vendor
                - jquery
                - modernzr
                - angular
            - controllers
                - controller1
                - controller2
                - controller3
            - directives
                - directives1
                - directives2
                - directives3
            - widgets
                - widget1
                - widget2
                - widget3
                - widget4
            - modules
                - modules1
                - modules2
                - modules3
                - modules4


**Here my gulp.js**

    dir = {
    	app: 		&#39;application&#39;,
    	dest: 		&#39;dest&#39;,
    };

    config = {
    	src: {
    		js: dir.app + &#39;/resources/js&#39;
    	},
    	dest: {
    		js: dir.dest + &#39;/resources/js&#39;
    	}
    };

    gulp.task(&#39;rjs&#39;, function() {
    
    	  rjs({
    			baseUrl: config.src.js,
    			out: &#39;main.js&#39;,
    			name: &#39;main&#39;,
    			mainConfigFile: config.src.js + &#39;/main.js&#39;,
    			exclude: [ &#39;jquery&#39;, &#39;angular&#39;]			
    		})
    		.pipe(prod ? uglify({ mangle: false, outSourceMap: true, compress: { drop_console: true } }) : gutil.noop())
    		.pipe(gulp.dest(config.dest.js))
    		.pipe(filesize())
    		.pipe(dev ? connect.reload() : gutil.noop());
    
    });

Excluding files/directories from Gulp task

I am looking for a php script or class that can minify my php page html output like google page speed does.

How can I do this?

How to minify php page html output?

I had a somewhat lively discussion the other day about minifying Javascript and CSS versus someone who prefers using Gzip.

I&#39;ll call this person X.

X said that Gzip allready minifies the code, since it zips your files.

I disagree. Zip is a **lossless** method of shrinking filesize. Lossless means the original must be restored perfectly, meaning info must be stored to be able to restore the spaces, the un-needed characters, commented code and everything else. That takes up more space, since more must be compressed.

I have no method of testing, but I believe that the Gzip of this code:

    .a1 {
        background-color:#FFFFFF;
        padding: 40px 40px 40px 40px;
    }

Will still be bigger than the Gzip of this code:

    .a1{body:background-color:#FFF;padding:40px}

Is there anybody who can prove this right or wrong.&lt;br /&gt;And please don&#39;t come saying &quot;It&#39;s right because that&#39;s what I&#39;ve always used&quot;.

I am asking for scientific proof here.

Gzip versus minify

What JavaScript minifier do you recommend?

Is there a good JavaScript minifier?

I&#39;m interested in hearing how you prefer to automate Javascript minification for your Java web apps. Here are a few aspects I&#39;m particularly interested in:

* How does it **integrate?** Is it part of your build tool, a servlet filter, a standalone program post-processing the WAR file, or something else?
* Is it **easy to enable and disable**? It&#39;s very unfunny to try and debug a minified script, but it&#39;s also useful for a developer to be able to test that the minification doesn&#39;t break anything.
* Does it work **transparently**, or does it have any side effects (apart from the ones inherent in minification) that I have to consider in my day-to-day work?
* **Which minifier** does it use?
* Does it **lack any features** that you can think of?
* What do you like about it?
* What *don&#39;t* you like about it?

This will mostly serve as a reference for my future projects (and hopefully other SOer&#39;s will find it informative, too), so all kinds of tools are interesting.

(Note that **this is not a question about which minifier is best**. We have plenty of those around already.)


How do you automate Javascript minification for your Java web applications?

Is there an option to compile TypeScript code&#39;s output as minified? Or are we left to deal with that in a separate process? And does obfuscation affect the answer?

Is it possible to compile TypeScript into minified code?

I know you _can_ minify PHP, but I&#39;m wondering if there is any point. PHP is an interpreted language so will run a little slower than a compiled language. My question is: would clients see a visible speed improvement in page loads and such if I were to minify my PHP?

Also, is there a way to compile PHP or something similar?


Is there a point to minifying PHP?

I&#39;m building a normal webpage which requires me to load about five CSS files and ten Javascript files.

 - When loading them separately in the HTML page, my webpage loads fine.
 - Now for production, I concatenated all the Javascript into a single file, in the order needed, and all the CSS into another file. But when I try to run the web page with the concatenated files it throws an error saying:

    `Uncaught TypeError: undefined is not a function`

On the line where jquery.min.js is being loaded in the concatenated Javascript file.

What can I do to mitigate this? I want to concatenate all files and minify them for production. Please help.


&lt;br&gt;
**EDIT:** I merged the Javascript and CSS in the order they were when they were being loaded individually and were working fine.

Uncaught TypeError: undefined is not a function on loading jquery-min.js

Is there a online tool that we can input the [HTML][1] source of a page into and will minify the code?

I would do that for aspx files as it is not a good idea to make the webserver gzip them...

  [1]: http://en.wikipedia.org/wiki/HTML


HTML minification?

*Note: This question is only relevant for Grunt 0.3.x and has been left for reference. For help with the latest Grunt 1.x release please see my comment below this question.*

I&#39;m currently trying to use Grunt.js to setup an automatic build process for first concatenating and then minifying CSS and JavaScript files.

I have been able to successfully concatenate and minify my JavaScript files, although each time I run grunt it seems to just append to the file instead of overwriting them.

As for the minifying or even concatenating CSS, I have been unable to do this as of yet!

In terms of grunt CSS modules I have tried using `consolidate-css`, `grunt-css` &amp; `cssmin` but to no avail. Could not get my head around how to use them!

My directory structure is as follows (being a typical node.js application):

 - app.js
 - grunt.js
 - /public/index.html
 - /public/css/[various css files]
 - /public/js/[various javascript files]

Here is what my grunt.js file currently looks like in the root folder of my application:

	module.exports = function(grunt) {
	
	  // Project configuration.
	  grunt.initConfig({
	    pkg: &#39;&lt;json:package.json&gt;&#39;,
	    concat: {
	      dist: {
	        src: &#39;public/js/*.js&#39;,
	        dest: &#39;public/js/concat.js&#39;
	      }
	    },
	    min: {
	      dist: {
	        src: &#39;public/js/concat.js&#39;,
	        dest: &#39;public/js/concat.min.js&#39;
	      }
	    },
	    jshint: {
	      options: {
	        curly: true,
	        eqeqeq: true,
	        immed: true,
	        latedef: true,
	        newcap: true,
	        noarg: true,
	        sub: true,
	        undef: true,
	        boss: true,
	        eqnull: true,
	        node: true
	      },
	      globals: {
	        exports: true,
	        module: false
	      }
	    },
	    uglify: {}
	  });
	
	  // Default task.
	  grunt.registerTask(&#39;default&#39;, &#39;concat min&#39;);
	
	};

So just to summarise I need help with two questions:

 1. How to concatenate and minify all my css files under the folder `/public/css/` into one file, say `main.min.css`
 2. Why does grunt.js keep on appending to the concatenated and minified javascript files `concat.js` and `concat.min.js` under `/public/js/` instead of overwriting them each time the command `grunt` is run?

----------

**Updated 5th of July 2016 - Upgrading from Grunt 0.3.x to Grunt 0.4.x or 1.x**

`Grunt.js` has moved to a new structure in `Grunt 0.4.x` (the file is now called `Gruntfile.js`). Please see my open source project [Grunt.js Skeleton](https://github.com/jasdeepkhalsa/gruntjs-skeleton) for help with setting up a build process for `Grunt 1.x`.

Moving from `Grunt 0.4.x` to `Grunt 1.x` [should not introduce many major changes](http://gruntjs.com/upgrading-from-0.4-to-1.0).

How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

Are there any command line scripts and/or online tools that can reverse the effects of minification similar to how Tidy can clean up horrific HTML?

(I&#39;m specifically looking to unminify a minified JavaScript file, so variable renaming might still be an issue.)

Tool to Unminify / Decompress JavaScript

How can I estimate the size of my JavaScript file after it is gzipped? Are there online tools for this? Or is it similar to using winzip for example?

How can I estimate the size of my gzipped script?

Having the darnedest time trying to figure out why minification is not working.

I have injected via an array object my providers prior the function per numerous suggestions across the web and yet still &quot;Unknown provider: aProvider &lt;- a&quot;

Regular:

    var app = angular.module(&#39;bpwApp&#39;, [&#39;ui.bootstrap&#39;, &#39;ui&#39;, &#39;myTabs&#39;])
        .config([&#39;$routeProvider&#39;, &#39;$locationProvider&#39;, function($routeProvider, $locationProvider){
        $routeProvider.
            when(&#39;/&#39;, {templateUrl: &#39;partials/home.jade&#39;, controller: HomeCtrl});
        
        $locationProvider.html5Mode(true);
        }])

Minified: 

    var app = angular.module(&#39;bpwApp&#39;, [&#39;ui.bootstrap&#39;, &#39;ui&#39;, &#39;myTabs&#39;])
        .config([&#39;$routeProvider&#39;, &#39;$locationProvider&#39;, function(a, b){
        a.
            when(&#39;/&#39;, {templateUrl: &#39;partials/home.jade&#39;, controller: HomeCtrl});
        
        b.html5Mode(true);
        }])

Any suggestion would be much obliged!


Angular.module minification bug

What&#39;s the difference between concat, uglify, and minify tasks in grunt? I set up an uglify task for all of my site&#39;s javascript tasks, and it seemed to both minify and concatenate them. Grunt&#39;s site has a great description for how to configure each task, but it doesn&#39;t seem to explain what each task actually does.

What&#39;s the difference between concat and uglify and minify?

I&#39;m using webpack and want to deploy my site. If I minify and bundle my JavaScript code, I&#39;ve got this error:

&gt; **Parse error:** Unexpected token: name (`Button`)

Here is my not bundled code:

    &#39;use strict&#39;;
    
    export class Button { // &lt;-- Error happens on this line
        constructor(translate, rotate, text, textscale = 1) {
            this.position = translate;
            this.rotation = rotate;
            this.text = text;
            this.textscale = textscale;
        }
    }

Note in bundled code the keyword `export` is removed. In development, there are no errors thrown. Here you could find my configuration file of WebPack:

    var webpack = require(&#39;webpack&#39;);

    var PROD = true;

    module.exports = {
        entry: &quot;./js/entry.js&quot;,
        output: {
            path: __dirname,
            filename: PROD ? &#39;bundle.min.js&#39; : &#39;bundle.js&#39;
        },
        module: {
            loaders: [
                {
                    test: /\.css$/,
                    loader: &quot;style-loader!css-loader&quot;
                }
            ]
        },
        plugins: PROD ? [
            new webpack.optimize.UglifyJsPlugin({
                compress: { 
                    warnings: false 
                },
                output: {
                    comments: false,
                },
            })
        ] : []
    };

If I change `PROD` to false, I&#39;ve no error, if true I&#39;ve got error from above. My question is can I enable ES6 in Webpack?

How to minify ES6 code using Webpack?

&gt; **Possible Duplicate:**  
&gt; [Why minify assets and not the markup?](https://stackoverflow.com/questions/1306792/why-minify-assets-and-not-the-markup)  

&lt;!-- End of automatically inserted text --&gt;

I have seen a lot of sites using minified CSS and JavaScript to increase website response time but I have never seen any sites use minified HTML. Why would you not want your HTML to be minified?

Why do many sites minify CSS and JavaScript but not HTML?

I was wondering, since Clojure Compiler and UglifyJS not only optimize code for size but also for performance (although I think size is the main priority), would my node.js app run faster if it was minified ? I know it may depend from app, but I&#39;m asking this in general.

Does it make sense to minify code used in NodeJS?

Is there a plugin, add-on, Greasemonkey script or something similar (at worst, an easy to use proxy?) that automatically **unminifies** the Javascript files included on a site?

I know about e.g. [jsbeautifier.org](http://jsbeautifier.org/) but doing this externally doesn&#39;t allow me to set breakpoints in the unminified code, for example.

Typical use cases for me:

 - Analysing and learning from complex web frontends.
 - Debugging Greasemonkey scripts which interact with the existing code.

I&#39;m primarily interested in a solution that works with Firebug, but if there&#39;s something for the dev tools of Chrome or Opera, I&#39;d like to hear about it as well.


All Minify Solutions on Gang of Coders

Total of 26 Minify Solutions