Udacity Mobile Web Specialist Responsive Images Project - my gulp file for getting images resized, compressed, and cropped

gulpfile-p2.js

var gulp = require('gulp');
var imageMin = require('gulp-imagemin');
var resize = require('gulp-image-resize');
var rename = require('gulp-rename');
var del = require('del');

// Outside of the above required plugins, you'll also need to download either GraphicsMagick or ImageMagick. The links are on the quiz page. I chose to use GraphicsMagick, but either will work. Just download the installer file for your OS, and let it install. You won't need it to show in any code, it just has to be on your computer.

// Clean will remove the images folder, if it already exists, so we don't risk getting any duplicate folders
// For larger projects, should update / change this to something that instead watches for new / changed files and updates those, instead of deleting the folder and completely redoing it
gulp.task('clean', function() {
    return del('./images');
});

/* 
***** This is how I set the task up for phases 1 & 2 - less complexity getting started!

// The main workhorse! We pass it clean so that it won't start running until clean has finished
gulp.task('reduce-images', ['clean'], function() {
    gulp.src('./images_src/*.{jpg, png}') // Pass in your original image source path, and extensions to watch
        .pipe(resize({ // This plugin resizes the initial images
            width: 1200, // Currently using pixels; can also use percentages like so: '50%'
            quality: 0.5 // Adjusts image quality, on a scale of 0 (low) - 1 (high)
        }))
        .pipe(imageMin()) // This plugin compresses the resized images
        .pipe(rename(function (path) { path.basename += "-optimized"; })) // This plugin adds a tag onto the end of the filepath name, so you know it's not the original file
        .pipe(gulp.dest('./images')) // Then you pass the finished file into a new, ready for build directory
});

// This function will copy any image files we don't need optimized into the new build directory, after clean has done it's thing (only needed for phase 1 of the project!)
gulp.task('copy-fixed', ['clean'], function() {
    return gulp.src('images_src/fixed/*.{gif,jpg,png}')
        .pipe(gulp.dest('./images/fixed'));
});
*****
*/

// Phase 3 - multiple image sizes! 
// There are 3 tasks here - each will work almost the same to the earlier setup, except they're sizing for different widths, cropping the images for smaller sizes, and using a different suffix
// Setting crop to true allows resize to crop the image to the dimensions you've set (width in my case)
// Gravity tells crop where in the picture to focus
// Everything else is commented above if you need to know how it works!
gulp.task('sm-images', function() {
    gulp.src('./images_src/*.{jpg, png}') 
        .pipe(resize({
            width: 500,
            height: 500,
            quality: 0.5,
            crop: true,
            gravity: 'center'
        }))
        .pipe(imageMin())
        .pipe(rename(function (path) { path.basename += "-small"; }))
        .pipe(gulp.dest('./images'))
});

gulp.task('md-images', function() {
    gulp.src('./images_src/*.{jpg, png}') 
        .pipe(resize({
            width: 750,
            height: 500,
            quality: 0.5,
            crop: true,
            gravity: 'center'
        }))
        .pipe(imageMin())
        .pipe(rename(function (path) { path.basename += "-medium"; }))
        .pipe(gulp.dest('./images'))
});

gulp.task('lg-images', function() {
    gulp.src('./images_src/*.{jpg, png}') 
        .pipe(resize({
            width: 1200,
            quality: 0.5
        }))
        .pipe(imageMin())
        .pipe(rename(function (path) { path.basename += "-large"; }))
        .pipe(gulp.dest('./images'))
});

// This will call all of our image size tasks, so everything gets the sizes it needs - still having it run clean first to remove the old folder and avoid duplication, then it calls all 3 image resize tasks and runs them simultaneously 
gulp.task('reduce-images', ['clean', 'sm-images', 'md-images', 'lg-images']);

// This is how you'll run everything! Just type gulp into the terminal and it'll run all the functions (include 'copy-fixed' if you're on phase 1)
gulp.task('default', ['clean', 'reduce-images']);