Combine and Minify Multiple Css/Js Files

Combine and Minify Multiple CSS / JS Files

I ended up using CodeKit to concatenate my CSS and JS files. The feature that I find really useful is the ability to do the concatenation upon file save; because it monitors the respective CSS / JS assets. Once I got them properly combined e.g. to 1 CSS and 1 JS files, all other files simply can refer to these 2.

You can even ask CodeKit to do on-the-fly minification / compression.

Disclaimer: I am not affiliated in any way with CodeKit. I randomly found it on the web and it has served as a great tool in my development process. It also comes with good updates since I first used it more than a year ago.

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

concat.js is being included in the concat task's source files public/js/*.js. You could have a task that removes concat.js (if the file exists) before concatenating again, pass an array to explicitly define which files you want to concatenate and their order, or change the structure of your project.

If doing the latter, you could put all your sources under ./src and your built files under ./dest

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

Then set up your concat task

concat: {
  js: {
    src: 'src/js/*.js',
    dest: 'dest/js/concat.js'
  },
  css: {
    src: 'src/css/*.css',
    dest: 'dest/css/concat.css'
  }
},

Your min task

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

The build-in min task uses UglifyJS, so you need a replacement. I found grunt-css to be pretty good. After installing it, load it into your grunt file

grunt.loadNpmTasks('grunt-css');

And then set it up

cssmin: {
  css:{
    src: 'dest/css/concat.css',
    dest: 'dest/css/concat.min.css'
  }
}

Notice that the usage is similar to the built-in min.

Change your default task to

grunt.registerTask('default', 'concat min cssmin');

Now, running grunt will produce the results you want.

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js

When Should I Combine my JS and CSS Files?

To be honest, it depends.
People are often, wrongly, obsessed with merge-min... That's not always the case. The need for merge-min depends on a few things:
Sometimes it's faster and BETTER practice to load 2 css files than one big one? Why? Because they'll load in parallel. That simple.

So don't go with the merge-min obsession. If your users are returning, daily users, do merge and rely on browser cache. If not, optimise parallel loads by not merging.

And ignore the simplistic: 'yes you must merge because that's what was best 10 years ago and I've never questioned it' :)

minify and combine all js files from an html file

Your folder structure:

gulpfile.js
/src
    index.html
    /css
    /js
       /file1.js
       /file2.js
       /file3.js

/build
    index.html
    /css
    /js

in src/index.html use these comments:

<head>
  <!--build:js js/scripts.min.js -->
  <script type="text/javascript" src="js/file1.js"></script>
  <script type="text/javascript" src="js/file2.js"></script>
  <script type="text/javascript" src="js/file3.js"></script>
  <!-- endbuild -->

  <!--build:css css/styles.min.css-->
  <link href="css/bootstrap.css" rel="stylesheet" />
  <link href="css/mdb.css" rel="stylesheet" />
  <link href="css/styles.css" rel="stylesheet" />
  <!--endbuild-->
</head>

in gulpfile.js write this code:

var gulp = require('gulp');
// This plugin concatenates any number of CSS and JavaScript files into a single file
var useref = require('gulp-useref');
// Requires the gulp-uglify plugin for minifying js files
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
// Requires the gulp-cssnano plugin for minifying css files
var cssnano = require('gulp-cssnano')


gulp.task('build', function () {
    return gulp.src('app/*.html')
      .pipe(useref())
      // Minifies only if it's a JavaScript file
      .pipe(gulpIf('*.js', uglify()))
      // Minifies only if it's a CSS file
      .pipe(gulpIf('*.css', cssnano()))
      .pipe(gulp.dest('dist'))
});

After run the build task in command line, it automatically creates the build folders and internal files.

Should I combine my javascripts in one and css files in one for performance?

Each request for a file involves a round-trip to the server. The more individual files you request, the more round-trips and the slower the page load. Combining as many files in to one as possible reduces the number of requests, and therefore improves page load times.

This is a good rule-of-thumb, but don't get too hung up on it. If you need to load different version for different purposes, go ahead and do so, provided you don't split your code and CSS into too many small fragments

What constitutes 'too many' is site and system specific. Try some combinations and find what works for you. Every system is different.

Does minifying and concatenating JS/CSS files, and using sprites for images still provide performance benefits when using HTTP/2?

They're still useful. HTTP/2 reduces the impact of some of these practices, but it doesn't eliminate their impact.

Minification remains as useful as ever. Although HTTP/2 introduces new compression for message headers, that has nothing to do with minification (which is about message bodies). The compression algorithms for message bodies are the same, so minification saves just as much bandwidth as it did before.

Concatenation and sprites will have less of an impact than before, but they will still have some impact. The biggest issue with downloading multiple files instead of a single file with HTTP/1 isn't actually an HTTP-side problem, per se: there is some bandwidth-based overhead in requesting each file individually, but it's dwarfed by the time-based overhead of tearing down the TCP/IP session when you're done with one file, then starting up a new one for the next, and repeating this for every file you want to download.

The biggest focus of HTTP/2 is eliminating that time-based overhead: HTTP/1.1 tried to do this with pipelining, but it didn't catch on in the browser (Presto is the only engine that got it completely right, and Presto is dead). HTTP/2 is another attempt, which improves on HTTP/1.1's methods while also making this kind of thing non-optional, and it stands to be more successful. It also eliminates some of the bandwidth-based overhead in making multiple requests, by compressing headers, but it cannot eliminate that overhead completely, and when downloading multiple files, those requests still have to be made (as part of a single TCP/IP session, so there is less overhead, but not zero). So while the impact of concatenating and spriting is proportionally smaller, there is still some impact, especially if you use many files.

Another thing to consider, when it comes to concatenation and spriting, is compression. Concatenated files of similar types tend to compress better than the individual files do, because the compression algorithm can exploit similarities between the concatenated pieces of data. A similar principle applies to sprites: putting similar images in different regions of the same file usually results in a smaller file, because the image's compression can exploit similarities in the different regions.

Combine and Minify Multiple Css/Js Files