Developers have two tasks to perform when we try to optimize CSS and JavaScript files for production: minification and concatenation.
One problem developers face when automating this process is that it's difficult to concatenate your scripts in the correct order.
Say we have included 3 script tags in index.html.
<body>
<!-- other stuff -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
</body>
These scripts are located in two different directories. It'll be difficult to concatenate them with traditional plugins like gulp-concatenate.
Thankfully, there's a useful Gulp plugin, gulp-useref that solves this problem.
Gulp-useref concatenates any number of CSS and JavaScript files into a single file by looking for a comment that starts with "<!--build:" and ends with "<!--endbuild-->". Its syntax is:
<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
<type> can either be js, css, or remove. It's best to set type to the type of file that you're trying to concatenate. If you set type to remove, Gulp will remove the entire build block without generating a file.
<path> here refers to the target path of the generated file.
We'll want the final JavaScript file to be generated in the js folder, as main.min.js. Hence, the markup would be:
<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
Now let's configure the gulp-useref plugin in the gulpfile. We'll have to install the plugin and require it in the gulpfile.
$ npm install gulp-useref --save-dev
var useref = require('gulp-useref');
Setting up the useref task is similar to the other tasks we've done so far. Here's the code:
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'))
});
Now if you run this useref task, Gulp will take run through the 3 script tags and concatenate them into dist/js/main.min.js.
The file however, isn't minified right now. We'll have to use the gulp-uglify plugin to help with minifying JavaScript files. We also need a second plugin called gulp-if to ensure that we only attempt to minify JavaScript files.
$ npm install gulp-uglify --save-dev
// Other requires...
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
.pipe(gulp.dest('dist'))
});
Gulp should now automatically minify the `main.min.js` file whenever you run the useref task.
One neat thing I've yet to reveal with Gulp-useref is that it automatically changes all the scripts within "<!--build:" and "<!--endbuild-->" into one single JavaScript file that points to `js/main.min.js`.
Wonderful, isn't it?
We can use the same method to concatenate any CSS files (if you decided to add more than one) as well. We'll follow the same process and add a build comment.
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/another-stylesheet.css">
<!--endbuild-->
We can also minify the concatenated CSS file as well. We need to use a package called gulp-cssnano plugin to help us with minification.
$ npm install gulp-cssnano
var cssnano = require('gulp-cssnano');
gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
Now you'd get one optimized CSS file and one optimized JavaScript file whenever you run the useref task.
Let's move on and optimize images next.
Click here for For next Step: "Optimizing Images"
Table of Contents: "Table of Contents to learn"
Post a Comment