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:
gulp publish --verboseClicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- 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:
$ npm install --save-dev gulp-imagemin@2.3.0
optimize: {
css: {
...
},
js: {
...
},
images: {
src: developmentAssets + '/images/**/*.{jpg,jpeg,png,gif}',
dest: productionAssets + '/images/',
options: {
optimizationLevel: 3,
progessive: true,
interlaced: true
}
}
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
gulp/config.js
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var size = require('gulp-size');
var config = require('../../config').optimize.images;
/**
* Copy and minimize image files
*/
gulp.task('optimize:images', function() {
return gulp.src(config.src)
.pipe(imagemin(config.options))
.pipe(gulp.dest(config.dest))
.pipe(size());
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
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.
var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- Next, you need to create tasks for optimizing images as shown in the following code.
gulp.task('imagemin', function() {
var imgSrc = 'src/images/*.+(png|jpg|gif)',
imgDst = 'build/images';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
gulp.task('default',['imagemin'],function(){
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- 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.
gulp
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- On running the task using the above command, you will receive the following result in the command prompt.
C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)