So I thought I would talk about a few of the Gulp plugins I use for my build process. I’ll split them down by styles, scripts, html etc.<\/p>\n
Styles<\/h2>\ngulp-sass<\/a><\/h3>\nThis plugin compiles your SASS into a CSS file. (If you couldn’t guess from it’s name). This is super useful, as you can write your styles in sass and this will compile it into CSS. This can be either on the fly with browsersync (we’ll talk about this later) or when you build the final project.<\/p>\n
gulp-cssnano<\/a><\/h3>\nThis plugin lets you minify your CSS within your build process. Minification enables a file to be smaller by removing whitespace and linebreaks, update variable names to be shorter, removing comments and changing some functions be less readable. (Such as changing the boolean false to !1).<\/p>\n
critical<\/a><\/h3>\nThis generates your critical CSS from your CSS and adds it to the <head> section. If you want some tips on how to improve your page speed. I have talked about this on a previous blog post<\/a>. <\/p>\nautoprefixer<\/a><\/h3>\nThis plugin is one of my favourites. It adds browser specific prefixes so you don’t have to. So for instance using the CSS ‘border-radius’, you may also want to include ‘-webkit-border-radius’, your gulp build process will add this for you.<\/p>\n
Scripts<\/h2>\ngulp-uglify<\/a><\/h3>\nThis is very similar to gulp-cssnano but it is used for JS. It minifies your scripts to help speed up your PLS, and speeds up execution times. <\/p>\n
gulp-eslint<\/a><\/h3>\nThis plugin tests your JS, it looks for any errors, looks for any unused variables or arguments. It can also fix any issues if you want it to. There are also various ESLint plugins which can detect problems with libraries too. The example below is an AngularJS app. <\/p>\n\n\n\n\n![\"An](\"https:\/\/dev.kloclabs.com\/wp-content\/uploads\/2022\/08\/image-1-1024x117.png\")
An example of ESLint output<\/figcaption><\/figure>\n\n\n\nHTML<\/h2>\ngulp-useref<\/a><\/h3>\nThis plugin concatenates any scripts or stylehseets. This helps if you’re using HTTP\/1.1 as it’s quicker to download 1 file rather than several. As we move to HTTP\/2 this becomes less relevant.<\/p>\n
gulp-htmlmin<\/a><\/h3>\nSimilar to gulp-cssnano or gulp-uglify this minifies yout HTML. (If you couldn’t guess already) There are various options you can use on this too which can make it more agressive. Such as removing quote marks where they’re not needed. <\/p>\n\n\n\n![\"Before](\"https:\/\/dev.kloclabs.com\/wp-content\/uploads\/2022\/08\/image-2-1024x350.png\")
Before running gulp-htmlmin<\/figcaption><\/figure>\n\n\n\n![\"\"](\"https:\/\/dev.kloclabs.com\/wp-content\/uploads\/2022\/08\/image-3-1024x273.png\")
After running gulp-htmlmin<\/figcaption><\/figure>\n\n\n\nAs you can see, it has removed line breaks and spaces and quotes around any single word attributes in this small file.<\/p>\n
Images<\/h2>\ngulp-imagemin<\/a><\/h3>\nThis plugin minifies any images used in the project. This is usually through the means of removing some quality from JPEG’s, removing any unused lines of code from SVG’s etc. This can help reduce the size of all the images used without the tedius task of doing it manually.<\/p>\n
Other<\/h2>\nbrowsersync<\/a><\/h3>\nBrowersync lets you preview your site, it’s great for working on in development as it taylors it for you. Here are a few of the benefits when using browsersync in development:<\/p>\n
When you save files, it will reload your siteKeep 2 browsers in sync with one another (I find this is especially beneficial when working on a desktop and mobile site). This works for both interactions, scrolling and navigation.Check your site in different network conditions<\/p>\n
gulp-load-plugins<\/a><\/h3>\nThis ones a realy simple one, it lets you pull in any plugins with the prefix gulp into your Gulpfile so you don’t have to have them all included. You can then use the plugins through the use of an object or your choice. <\/p>\n
gulp-rev<\/a><\/h3>\nThis plugin adds hashes to the end of file names of static assets. This is useful, especially if you want to be agressive with your caching on your server. You can set an expiry date far into the future for your CSS and JS. Then if any changes are made, they will have a different file name which, in turn will have a long cache. This will make your website or application faster because your users are able to cache major assets. As an example app.js <\/strong>may change to app-2f6e8c0f32.js<\/strong>. If saved as app.js, this may cause problems with users caching the JS and running out of date JS.<\/p>\ngulp-cdnizer<\/a><\/h3>\nI find this plugin useful as I try to use CDN’s where possible for any libraries used. It lets you replace any local libraries with the CDN equivalent. So I would use this for libraries such as AngularJS. I would have a local version to work in when developing which would be unminified. When building for production I would run that library through gulp-cdnizer and change it to a minified version on CDNJS<\/a> in production. <\/p>\ngulp-replace<\/a><\/h3>\ngulp-replace is a very simple plugin that takes a string and replaces it with another. I use this for replacing a comment in the HTML to Critical CSS. Most projects may not need it, but it’s a useful one to know about if you need it!<\/p>\n
gulp-flatten<\/a><\/h3>\n
This plugin compiles your SASS into a CSS file. (If you couldn’t guess from it’s name). This is super useful, as you can write your styles in sass and this will compile it into CSS. This can be either on the fly with browsersync (we’ll talk about this later) or when you build the final project.<\/p>\n
gulp-cssnano<\/a><\/h3>\nThis plugin lets you minify your CSS within your build process. Minification enables a file to be smaller by removing whitespace and linebreaks, update variable names to be shorter, removing comments and changing some functions be less readable. (Such as changing the boolean false to !1).<\/p>\n
critical<\/a><\/h3>\nThis generates your critical CSS from your CSS and adds it to the <head> section. If you want some tips on how to improve your page speed. I have talked about this on a previous blog post<\/a>. <\/p>\nautoprefixer<\/a><\/h3>\nThis plugin is one of my favourites. It adds browser specific prefixes so you don’t have to. So for instance using the CSS ‘border-radius’, you may also want to include ‘-webkit-border-radius’, your gulp build process will add this for you.<\/p>\n
Scripts<\/h2>\ngulp-uglify<\/a><\/h3>\nThis is very similar to gulp-cssnano but it is used for JS. It minifies your scripts to help speed up your PLS, and speeds up execution times. <\/p>\n
gulp-eslint<\/a><\/h3>\nThis plugin tests your JS, it looks for any errors, looks for any unused variables or arguments. It can also fix any issues if you want it to. There are also various ESLint plugins which can detect problems with libraries too. The example below is an AngularJS app. <\/p>\n\n\n\n\nAn example of ESLint output<\/figcaption><\/figure>\n\n\n\nHTML<\/h2>\ngulp-useref<\/a><\/h3>\nThis plugin concatenates any scripts or stylehseets. This helps if you’re using HTTP\/1.1 as it’s quicker to download 1 file rather than several. As we move to HTTP\/2 this becomes less relevant.<\/p>\n
gulp-htmlmin<\/a><\/h3>\nSimilar to gulp-cssnano or gulp-uglify this minifies yout HTML. (If you couldn’t guess already) There are various options you can use on this too which can make it more agressive. Such as removing quote marks where they’re not needed. <\/p>\n\n\n\nBefore running gulp-htmlmin<\/figcaption><\/figure>\n\n\n\nAfter running gulp-htmlmin<\/figcaption><\/figure>\n\n\n\nAs you can see, it has removed line breaks and spaces and quotes around any single word attributes in this small file.<\/p>\n
Images<\/h2>\ngulp-imagemin<\/a><\/h3>\nThis plugin minifies any images used in the project. This is usually through the means of removing some quality from JPEG’s, removing any unused lines of code from SVG’s etc. This can help reduce the size of all the images used without the tedius task of doing it manually.<\/p>\n
Other<\/h2>\nbrowsersync<\/a><\/h3>\nBrowersync lets you preview your site, it’s great for working on in development as it taylors it for you. Here are a few of the benefits when using browsersync in development:<\/p>\n
When you save files, it will reload your siteKeep 2 browsers in sync with one another (I find this is especially beneficial when working on a desktop and mobile site). This works for both interactions, scrolling and navigation.Check your site in different network conditions<\/p>\n
gulp-load-plugins<\/a><\/h3>\nThis ones a realy simple one, it lets you pull in any plugins with the prefix gulp into your Gulpfile so you don’t have to have them all included. You can then use the plugins through the use of an object or your choice. <\/p>\n
gulp-rev<\/a><\/h3>\nThis plugin adds hashes to the end of file names of static assets. This is useful, especially if you want to be agressive with your caching on your server. You can set an expiry date far into the future for your CSS and JS. Then if any changes are made, they will have a different file name which, in turn will have a long cache. This will make your website or application faster because your users are able to cache major assets. As an example app.js <\/strong>may change to app-2f6e8c0f32.js<\/strong>. If saved as app.js, this may cause problems with users caching the JS and running out of date JS.<\/p>\ngulp-cdnizer<\/a><\/h3>\nI find this plugin useful as I try to use CDN’s where possible for any libraries used. It lets you replace any local libraries with the CDN equivalent. So I would use this for libraries such as AngularJS. I would have a local version to work in when developing which would be unminified. When building for production I would run that library through gulp-cdnizer and change it to a minified version on CDNJS<\/a> in production. <\/p>\ngulp-replace<\/a><\/h3>\ngulp-replace is a very simple plugin that takes a string and replaces it with another. I use this for replacing a comment in the HTML to Critical CSS. Most projects may not need it, but it’s a useful one to know about if you need it!<\/p>\n
gulp-flatten<\/a><\/h3>\n
This generates your critical CSS from your CSS and adds it to the <head> section. If you want some tips on how to improve your page speed. I have talked about this on a previous blog post<\/a>. <\/p>\n This plugin is one of my favourites. It adds browser specific prefixes so you don’t have to. So for instance using the CSS ‘border-radius’, you may also want to include ‘-webkit-border-radius’, your gulp build process will add this for you.<\/p>\n This is very similar to gulp-cssnano but it is used for JS. It minifies your scripts to help speed up your PLS, and speeds up execution times. <\/p>\n This plugin tests your JS, it looks for any errors, looks for any unused variables or arguments. It can also fix any issues if you want it to. There are also various ESLint plugins which can detect problems with libraries too. The example below is an AngularJS app. <\/p>\n\n\n\n\n This plugin concatenates any scripts or stylehseets. This helps if you’re using HTTP\/1.1 as it’s quicker to download 1 file rather than several. As we move to HTTP\/2 this becomes less relevant.<\/p>\n Similar to gulp-cssnano or gulp-uglify this minifies yout HTML. (If you couldn’t guess already) There are various options you can use on this too which can make it more agressive. Such as removing quote marks where they’re not needed. <\/p>\n\n\n\n As you can see, it has removed line breaks and spaces and quotes around any single word attributes in this small file.<\/p>\n This plugin minifies any images used in the project. This is usually through the means of removing some quality from JPEG’s, removing any unused lines of code from SVG’s etc. This can help reduce the size of all the images used without the tedius task of doing it manually.<\/p>\n Browersync lets you preview your site, it’s great for working on in development as it taylors it for you. Here are a few of the benefits when using browsersync in development:<\/p>\n When you save files, it will reload your siteKeep 2 browsers in sync with one another (I find this is especially beneficial when working on a desktop and mobile site). This works for both interactions, scrolling and navigation.Check your site in different network conditions<\/p>\n This ones a realy simple one, it lets you pull in any plugins with the prefix gulp into your Gulpfile so you don’t have to have them all included. You can then use the plugins through the use of an object or your choice. <\/p>\n This plugin adds hashes to the end of file names of static assets. This is useful, especially if you want to be agressive with your caching on your server. You can set an expiry date far into the future for your CSS and JS. Then if any changes are made, they will have a different file name which, in turn will have a long cache. This will make your website or application faster because your users are able to cache major assets. As an example app.js <\/strong>may change to app-2f6e8c0f32.js<\/strong>. If saved as app.js, this may cause problems with users caching the JS and running out of date JS.<\/p>\n I find this plugin useful as I try to use CDN’s where possible for any libraries used. It lets you replace any local libraries with the CDN equivalent. So I would use this for libraries such as AngularJS. I would have a local version to work in when developing which would be unminified. When building for production I would run that library through gulp-cdnizer and change it to a minified version on CDNJS<\/a> in production. <\/p>\n gulp-replace is a very simple plugin that takes a string and replaces it with another. I use this for replacing a comment in the HTML to Critical CSS. Most projects may not need it, but it’s a useful one to know about if you need it!<\/p>\nautoprefixer<\/a><\/h3>\n
Scripts<\/h2>\n
gulp-uglify<\/a><\/h3>\n
gulp-eslint<\/a><\/h3>\n
HTML<\/h2>\n
gulp-useref<\/a><\/h3>\n
gulp-htmlmin<\/a><\/h3>\n
Images<\/h2>\n
gulp-imagemin<\/a><\/h3>\n
Other<\/h2>\n
browsersync<\/a><\/h3>\n
gulp-load-plugins<\/a><\/h3>\n
gulp-rev<\/a><\/h3>\n
gulp-cdnizer<\/a><\/h3>\n
gulp-replace<\/a><\/h3>\n
gulp-flatten<\/a><\/h3>\n
![\"Before](\"https:\/\/dev.kloclabs.com\/wp-content\/uploads\/2022\/08\/image-6-1024x899.png\")
![\"After](\"https:\/\/dev.kloclabs.com\/wp-content\/uploads\/2022\/08\/image-7.png\")