gulp - Gulp Optimizing Images - gulp sass - gulp tutorial - learn gulp
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
What is Image optimization?
- Image optimization is a function of lossy and lossless compression.
- Differences in image formats are due to the difference in how and which lossy and lossless algorithms are used to optimize the image.
Install Plugins to Optimize Images:
- In this tutorial we will learn, how to optimize images using gulp. In order to optimize images, we are using imagemin plugin of gulp
- Next, I will take care of the images. They need to be copied to the production assets folder and crunshed (reduce the size).
- This may take a while, depending on the size and amount of your images, that’s why I only optimize the images for production.
- To get a more detailed output in Gulp.js you may add a flag to your command:
- It will list each individual image for the optimize task and how much it was compressed.
- I’ll need gulp-imagemin for my task, which is able to minify PNG, JPG, GIF and SVG images:
gulp/config.js
gulp/tasks/production/optimize-images.js
This task will take my images, optimize them, copy them to the assets folder and output the size.
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Declare Dependencies and Create Tasks:
- In your configuration file gulpfile.js, first declare the dependencies as shown in the following command.
- Next, you need to create tasks for optimizing images as shown in the following code.
- The imagemin task will accept png, jpg and gif images from src/images/ folder and minify them before writing it into the destination.
- The changed() ensures that only the new files are passed in each time for minifying. The gulp-changed plugin will only process the new files and hence utilized precious time.
Run the Tasks:
- The configuration file is set up and ready to execute. Use the following command to run the task.
- On running the task using the above command, you will receive the following result in the command prompt.