How to Reduce file sizes with Gulpjs
Learn how to automatically minify your files with gulpjs?.#
Prerequisites#
To start β what is gulp?#
Gulp is a JavaScript task runner that lets you automate tasks such asβ¦
- Bundling and minifying libraries and stylesheets.
- Refreshing your browser when you save a file.
- Quickly running unit tests.
- Running code analysis.
- And much more!
An alternative to Gulp is Grunt
We can create tasks that we would like to fulfill. In these tasks we load files that we want gulp to work on (modifying or not), then we return them to some return folder.
Setting up Gulp is simple compared to Grunt.
In this little tutorial, I will teach you how to create a task to minify all CSS files in your folder. Then put the minified ones in another folder.
Letβs start π#
Our project structure π
βββ css/βββ node_modules/βββ images/βββ js/βββ gulpfile.jsβββ index.htmlβββ package.json
First thing is to install gulp-cli globally by running:
npm install gulp-cli -g
Next step is to initialize our project with npm by running:
npm init -y
I'm using the -y flag to skip all the prompts
We will create a gulpfile.js by running:
npx -p touch nodetouch gulpfile.js
There are tons of open source plugins for almost every task in the official gulpjs website however, we are going to consider some plugins for
- Minifying images
- Uglify our CSS files
- Uglify our JS files
- and much more...
First lets work on Images.
I am going to use an uncompressed version of my profile photo for this demo which is about 1.4mb so that we can know how useful it is to compress our images without loosing its quality and details.
The first step is to install the plugins we wish to use.
npm i -D gulp-imagemin
In Gulpfile.js#
Add the following code to the gulpfile.js file we created earlier.
const { src, dest } = require('gulp');const imagemin = require('gulp-imagemin');function minifyImages() {return src(['./images/**/*']).pipe(imagemin()).pipe(dest('dist/images'));}exports.minifyImages = minifyImages;
First of all we require our plugins then we create a function and call it minifyImages. This function return a gulp task that maps through everything in our /images directory, then we call our imagemin() function that we got from the plugin we imported. next we specify our output directory in the dest(). Finally we export our function.
You might be wondering β youβre already able to minify your files? Yes, by executing the gulp command in the terminal followed by the task name.
We can view all available tasks we have written by executing the following command:
gulp --tasks
The only defined task in our gulpfile is the minifyImages task so if we execute
gulp minifyImages
It is going to create a new folder called /dist/images and put all our files as we specified in the dest.
If you compare the size of our original image to the minified version you will see a big difference because our minified image is 490kb while our original image is 1.40mb. Thats awesome right?.
Minify CSS files#
The next thing we are going to checkout is how to minify CSS files?.
The steps are pretty much the same.
We will start off by installing gulp-clean-css plugin
npm i -D gulp-clean-css
Next we will require our plugin and add a function that will minify our CSS files.
const { src, dest } = require('gulp');const imagemin = require('gulp-imagemin');const cleancss = require('gulp-clean-css');function minifyImages() {return src(['./images/**/*']).pipe(imagemin()).pipe(dest('dist/images'));}function minifyCss() {return src(['css/**/*.css']).pipe(cleancss()).pipe(dest('dist/css'));}exports.minifyCss = minifyCss;exports.minifyImages = minifyImages;
Then we can minify our css files by running:
gulp minifyCss
To minify your javascript files your code should look like:
const { src, dest } = require('gulp');const imagemin = require('gulp-imagemin');const cleancss = require('gulp-clean-css');const javascript = require('gulp-uglify');function minifyImages() {return src(['./images/**/*']).pipe(imagemin()).pipe(dest('dist/images'));}function minifyCss() {return src(['css/**/*.css']).pipe(cleancss()).pipe(dest('dist/css'));}function minifyJS() {return src(['js/**/*.js']).pipe(javascript()).pipe(dest('dist/js'));}exports.minifyCss = minifyCss;exports.minifyImages = minifyImages;exports.minifyJS = minifyJS;
Gulp provides us with a method called series() & parallel()
series()#
- Combines task functions and/or composed operations into larger operations that will be executed one after another, in sequential order. There are no imposed limits on the nesting depth of composed operations using series() and parallel().
Lets enhance our DX by applying the series method.
Your code should look like:
const { src, dest, task, series } = require('gulp');const imagemin = require('gulp-imagemin');const cleancss = require('gulp-clean-css');const javascript = require('gulp-uglify');function minifyImages() {return src(['./images/**/*']).pipe(imagemin()).pipe(dest('dist/images'));}function minifyCss() {return src(['css/**/*.css']).pipe(cleancss()).pipe(dest('dist/css'));}function minifyJS() {return src(['js/**/*.js']).pipe(javascript()).pipe(dest('dist/js'));}exports.minifyCss = minifyCss;exports.minifyImages = minifyImages;exports.minifyJS = minifyJS;task('start', series(minifyCss, minifyImages, minifyJS));
Now you can execute all your gulp tasks with one command
gulp start
Conclusion#
This is just a small way that gulp can help us in the development of our applications.
You can find the code for this project in this repository on GitHub.
Thank you for reading, please feel free to ? and help others find it.
See you soon. ?