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 --verbose
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
  • 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%)

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 , gulp serve , npm gulp , gulp less , npm save dev , gulp imagemin , gulp clean , gulp livereload , gulp command not found , gulp dest , gulp copy , npm watch , gulp build , gulp connect , npm sass , gulp if , gulp scss , gulp minify js , browserify gulp , gulp jshint , gulp pipe , npm install save dev , npm install dev gulped meaning , js uglify , gulp bower , gulp plugins , gulp definition , gulp start , compilation pipe , gulp changed , install gulp windows , gulp npm , gulp cli , gulp angular , gulp run , gulp version , gulp wiki , gulp file , define gulp , gulp path , run gulp , typescript gulp , gulp concat css , javascript pipe , sass gulp , install gulp ubuntu , what is gulp js , gulp command

Related Searches to Gulp Optimizing Images