The Mijingo Blog

Latest news, updates, free tutorials, and more from Mijingo.

Pick Your Tools and Use Them

by Ryan Irelan

From a recent Twitter series I shared:

Not everyone likes Sass or wants to use Grunt or even likes a CMS. That’s okay. If the tools help you, use them.

How to install Gulp.js

by Ryan Irelan

Just like its JavaScript Task Runner neighbor Grunt, Gulp also makes it simple (and fast!) to automate those really annoying web development tasks, like concatenating files, processing Sass, minifying JavaScript files, or optimizing batches of images.

In this tutorial, we’ll learn how to install Gulp.js.

Just like with Grunt, our first dependency is Node.js, so the video will start there. I’ll continue on after the video with some more steps to get set up.


Once inside the project where you want to run Gulp (you can get project shown in the video as part of the JavaScript Task Runners course I put together), we need to create a package.json file that we’ll use to define the decencies for the project, including Gulp.

We’ll do that on the command line using:

npm init

which will walk us through the process by asking some questions about our project. Once we’re done with the questions, npm will generate the package.json file for us, saving it at the root of our project.

We want to save Gulp as a dependency for our project, so in the project root we run:

npm install gulp --save-dev

We use --save-dev so the module is saved in package.json as a dependancy. When someone else wants to work on the project on their computer, they can run nom install and all of the dependencies listed in package.json will be installed automatically.

After the installation of Gulp is done, you should see some output and then a new command prompt.

We look at the package.json file and we see that gulp was added as a dependency for this project.

To ensure that Gulp is available for us on the command line, we need to install it globally:

npm install gulp -g

Running Gulp will now work for us, inside the project:

gulp

That should output:

[08:29:38] No gulpfile found

because we don’t yet have a Gulpfile.js file defining our Gulp tasks.

Creating a Gulpfile.js File

Either create a new file in your favorite code editor (right in the root of the project, alongside the package.json file), or do it in the command line:

touch Gulpfile.js

Now when we run Gulp:

gulp

We should get a bit more output, like this:


[08:33:46] Using gulpfile ~/projects/test-project/Gulpfile.js
[08:33:47] Task 'default' is not in your gulpfile
[08:33:47] Please check the documentation for proper gulpfile formatting

Gulp now sees our Gulpfile.js file but there’s nothing in it. At the very least, Gulp needs a default task to run when we use the plain gulp command. Let’s add one, shall we?

Open up the Gulpfile.js file and add the following to it:


var gulp = require('gulp');

gulp.task('default', function() {
    // Code for the default task
});

We have to first require gulp at the top of the file, so we can use Gulp to run our tasks. After that, we define our default Gulp task. The task is empty (containing only a code comment) but it will be enough to check that Gulp is running properly.

Save the file changes and the pop back onto the command line and re-run gulp:

gulp

You should now see more output from Gulp, this time showing that it ran the default task:


[08:43:04] Using gulpfile ~/projects/test-project/Gulpfile.js
[08:43:04] Starting 'default'...
[08:43:04] Finished 'default' after 79 μs

Now you’re ready to start defining your own Gulp tasks and automate those pesky development chores!

Learn More About Grunt & Gulp

My video course will get you up and running on both task runners in just 90 minutes.

Get the Grunt & Gulp video course

How to Install Grunt

by Ryan Irelan

Installing Grunt is the first step to automating your web development workflow with a JavaScript Task Runner and it takes just a few steps.

Here’s a video of the steps (pulled right from the course). The written steps are also below.


To install Grunt we need to use the command line.

  • Install Node.js. Using the big green button on the NodeJS site, download the installer package for your operating system. This includes NPM or Node Package Manager, which we also need to manage our Grunt plugins.
  • We do want to make sure we are up to date with npm. So, first, run:
npm update -g npm
  • Now we can install the Grunt command line tool using npm:
sudo npm install -g grunt-cli

This will install the grunt command line tool in your system path and allow it to be run from anywhere on your system. It doesn’t install Grunt, just allows us to run the local project version of Grunt from the command line.

Learn More About Grunt & Gulp

My video course will get you up and running on both task runners in just 90 minutes.

Get the Grunt & Gulp video course

Grunt & Gulp Together (at last)

by Ryan Irelan

We’ve been learning about both Grunt and Gulp with the Mijingo JavaScript Task Runners course.

Two powerful tools, right?

As I mention in the introduction video, you don’t have to choose between the two. Use Grunt for this project and Gulp for that other project. 

Or use them together!

This short tutorial tells you how. Let’s get started.

Joining Gulp and Grunt

You make Grunt and Gulp work together by running your Grunt tasks in your gulpfile.js file. You’ll need to do the following steps in a project already set up with Gulp. Since you learned with the Mijingo course, you can just open up the Gulp project you built in the course and start there.

Install the Node package gulp-grunt by running:

npm install gulp-grunt --save-dev

If it’s not there already, move your Gruntfile.js file to the project (if you’re using the sample project from the course you’ll want to copy it over). We need it there so we can access the tasks inside of Gulp.

We have to make sure the Grunt plugins are installed so the Grunt tasks can run. No Grunt plugins, no Grunt tasks.

Individually install the Grunt plugins you need, or copy the dependencies from package.json in the Grunt project to package.json in the Gulp project.

Because we have added new dependencies, we need to install them in the project. Run

npm install

to install all project dependencies, including the Grunt plugins we just added to the package.json files.

Near the top of your Gulp file, require the gulp-grunt plugin like so:

require('gulp-grunt')(gulp);

Because we’re calling gulp, we need to do this after we define the gulp variable. This loads in the Grunt tasks defined in your Gruntfile.js file. Now we have access to them and can call them from our Gulp file.

Before we do, let’s make sure everything is working okay with our Gulp file. Let’s run gulp in the command line as a test to check.

gulp

Look good? No errors? Good, let’s continue.

Now we need to tell Gulp to run our Grunt tasks. We’ll add the Grunt task sass:dist to the default Gulp task. It will look like this:


gulp.task('default', function() {
    gulp.start('uglify', 'sass', 'grunt-sass:dist');
});

We added the Grunt sass:dist task to the default Gulp tasks by specifying it in the start method.

All Grunt tasks run in Gulp will use the grunt- prefix so they don’t conflict with your Gulp tasks of the same name. You don’t have to rename your Grunt tasks to make this happen, gulp-grunt will handle this prefixing automatically.

Now for the grand finale. Let’s run the Grunt task in Gulp.

Run gulp in Terminal to fire off the default Gulp task.

gulp

At the end of the output you should see something like this:


Running "sass:dist" (sass) task

Done, without errors.
[20:38:24] Finished 'grunt-sass:dist' after 1.2 s

That’s it, you did it!

Further Reading

To learn about all of the options for using the gulp-grunt Gulp plugin, review the official documentation.

Learn More About Grunt & Gulp

My video course will get you up and running on both task runners in just 90 minutes.

Get the Grunt & Gulp video course

Run Gulp from Sublime Text

by Ryan Irelan

My friend and fellow teacher Mike Clark alerted me to this one after he saw it in the Sublime Text Tips email newsletter. And it is very cool.

Gulp is a Sublime Text package that makes it very, very simple to run Gulp commands and tasks right from Sublime Text.

It’s really easy to get started with it.

Running Gulp tasks inside of Sublime Text

Installing Sublime Text Gulp

The Gulp package is installed using the Package Install command in Sublime Text.

  1. Type Shift-Command-P and then type “package” until you get the “Package Control: Install Package” option.
  2. Hit Enter to have Sublime text retrieve the package index.
  3. Type “Gulp” to search for the Sublime Text Gulp package. Once you found it, press Enter to install it.

That’s it!

Running Gulp in Sublime Text

If you already have a project with a Gulpfile.js file, open it in Sublime Text. Now we use the Command Palette (Shift-Command-P) to run your Gulp tasks.

  1. Shift-Command-P
  2. Type gulp
  3. Choose “Gulp” or “Gulp (silent) which will run them in the background without output
  4. You’re done!

Running Gulp inside of Sublime Text

If you spend a lot of time in Sublime Text and need to run a special task that isn’t automated as part of gulp watch then this is a great plugin to have.

Learn more about Gulp in our JavaScript Taskrunners: Grunt and Gulp course.

Optimize SVG with Grunt

by Ryan Irelan

I wrote up short tutorial and created a video showing how to use svgmin to optimize your SVG files as part of your Grunt workflow.

The svgmin Grunt plugin is built on SVGO (a tool I use in my SVG tutorial course) and it’s a great way to automate optimization of your SVG the same way you would your optimize bitmap images using imagemin with Grunt or Gulp.

Read the whole tutorial or watch the video below.


Want to learn more about SVG? The SVG course will get you started with everything you need.

Optimizing Images with Grunt & Gulp

by Ryan Irelan

In the JavaScript Task Runners course, we converted Sass to CSS, compressed JavaScript, watched files for changes, and more.

Let’s look at how we can optimize the image assets we use in our web development projects.

Optimizing images helps us keep our sites as speedy as possible. By automating the optimization we can just drop an image in to our project and our task runner will ensure it is as small as possible without loss of quality.

We’ll start with Grunt first, and then move to Gulp.

Optimizing Images in Grunt

We’ll use the popular Grunt plugin grunt-contrib-imagemin. Let’s install that and save it as local project dependency.

npm install grunt-contrib-imagemin --save-dev

Now we need to load that plugin in our Gruntfile.js file. If you’re still working in the sample project, you can place this below the other plugins we’ve loaded.

grunt.loadNpmTasks('grunt-contrib-imagemin');

Just like with our other Grunt tasks, we name the task after the plugin. In this case, our task will be called imagemin. We then need to define the options for the task by specifying in which directory Grunt should look to find image files to process.

Here’s the code for the task:


imagemin: {
    jpgs: {
        options: {
            progressive: true
        },
        files: [{
            expand: true,
            cwd: 'src/img',
            src: ['*.jpg'],
            dest: 'images/'
        }]
    }
}

We start with the task wrapper for the imagemin task, and then create a target for processing JPG images. The JPG processing in grunt-contrib-imagemin has one option, progressive, which takes a boolean as the value.

We must also tell imagemin where the source images are and where they need to end up. This is very similar to what we did during the course with our JavaScript and Sass/CSS files in our other tasks.

grunt-contrib-imagemin allows us to do this by either statically or dynamically.

  • Statically: we define a dictionary of specific files (names and extensions) to process.
  • Dynamically: we specify a source directory, patterns to match files (like *.jpg), and then a destination directory.

I like flexibility, so we’re using the dynamic approach in this example.

First, we set the expand (dynamic expansion) option to true. This is required to use dynamic matching.

We then set the current working directory (cwd) to our source image directory. Using the src property, we match all files ending in .jpg in our current working directory.

Finally, we tell Grunt to drop the optimized files in to images directory, which is located in our project root (and relative to the Gruntfile.js file).

If you don’t have the src/img directory already created, you’ll need to do that. Download this sample JPG image to use as a test.

From the command line, let’s run the task to test it out.

grunt imagemin

This runs our imagemin task and processes any .jpg files found in the src/img directory in our project.

If all worked properly, you should see this output from Grunt:


Running "imagemin:jpgs" (imagemin) task
Minified 1 image (saved 12.84 kB)

Done, without errors.

Optimizing Images in Gulp

This version of optimizing images will go faster because we’ve covered most of the basics in the Grunt tutorial above. Now let’s see how this applies to Gulp.

Install the imagemin plugin for Gulp.

npm install gulp-imagemin --save-dev

Require gulp-imagemin in our gulpfile.js file:

var imagemin = require('gulp-imagemin');

And then create our Gulp task to process the images:


gulp.task('jpgs', function() {
    return gulp.src('src/img/*.jpg')
    .pipe(imagemin({ progressive: true }))
    .pipe(gulp.dest('images'));
});

Let’s review how this works.

We are calling the task jpgs and then passing in a source location of any files in src/img that have the .jpg extension.

Then we run imagemin with the progressive option enabled. Finally, we have Gulp drop the processed image in the images directory.

Make sure your source image (this sample JPG image will work just fine) is in place and then run gulp to process it.

gulp jpgs

You should see output similar to this:

   
[09:10:50] Using gulpfile gulpfile.js
[09:10:50] Starting 'jpgs'...
[09:10:51] gulp-imagemin: Minified 1 image (saved 12.84 kB - 6.6%)
[09:10:51] Finished 'jpgs' after 108 ms

Hooray, you did it!

Further Reading

For enhancements to the code above, I encourage you to read the official documentation for each of the imagemin plugins.

If you want to learn more about the JavaScript Task Runners Grunt and Gulp, our 90 minute course will get your up and running quickly.

Watching Your Project Files for Changes with Grunt

by Ryan Irelan

This is a written excerpt from our JavaScript Task Runners video course.

Grunt is a great tool for processing Sass files, image files, JavaScript, and more. But it would be a bummer if you had to stop and run Grunt every time we made changes to our files, right?

You’re in luck. Grunt can watch your project files for changes. This means that you can be coding along on your big website project and Grunt will automatically process your Sass files every time you make a change and save this files.

Pretty neat, huh?

To do that we’re going to use a watch task in Grunt. It is really easy to set up so let’s walk through it together. I’m assuming you already have a Grunt file set up and working. If not, the JavaScript Task Runners course will walk through that step-by-step for you.

Installing Grunt Watch

First, we need to install the grunt-contrib-watch plugin in our local project. We’ll use the --save-dev option so this is saved as a dependency in our package.json file.


    npm install grunt-contrib-watch --save-dev

and then load it in our Gruntfile:


    grunt.loadNpmTasks('grunt-contrib-watch');

Create the Watch Task

Next, we create the watch task so Grunt knows what to do when we run grunt watch on the command line. We’re only going to use grunt watch for dev tasks because it doesn’t make sense to have it continously build for production.


    watch: {
      css: {
        files: ['src/css/*.scss'],
        tasks: ['sass:dev']
      },
      js: {
        files: ['src/js/*.js'],
        tasks: ['uglify:dev']
      }
    }

We define the CSS files that we want to watch and the tasks we want to run when one of the files is changed. We’l define our file path and files to be any files in src/css that ends in .scss.

And we’ll call our sass:dev task when a matching file changes. Grunt will then run that task and reprocess our files.

We’ll define our js files now the same way, watching for any files in src/js that have the extension .js. When a change is detected by watch our uglify:dev task will run and process the javascript file.

Alright, let’s give it a try! Run


    grunt watch 

and it’ll keep the process running in Terminal waiting for a change.

Now, let’s change a file. And you can see it reprocessed that file automatically.

Very cool! You’re on your way to automating your web development workflow with Grunt watch.

If you want to learn more about the JavaScript Task Runners Rung Gulp, our 90 minute course will get your up and running quickly.

New Course: JavaScript Task Runners Grunt & Gulp

by Ryan Irelan

I just released a brand new course on two popular JavaScript task runners: Grunt and Gulp.

Over ten videos you will learn everything you need to get started using both Grunt and Gulp in your next web development project.

Get more information and then start learning!

What are our customers saying?


"Just purchased your Flexible Twig course. Love it!"
Tyler Morrison
"Been enjoying @mijingo 's Learning Craft video tutorials. Feeling like I've got a good basic understanding of #craftcms Very impressive"
Laura Montgomery
"I bought your Craft Starter Pack a year and a half ago. Worth every dollar. In fact, I would've paid twice as much for it, because you saved me so much time."
Timothy Ingram
"Ben's knowledge of Craft combined with his relaxed and informal teaching style makes for a great learning experience."
Steve Abraham
"Ben puts a lot of thought into his teaching approach and has the ability to explain complex concepts in a way that just make sense"
Gareth Redfern
"Ben is great at taking a complex subject and breaking it down in a way that you can wrap your mind around. I thought that plugin development was something I would never understand, and happily Ben proved me wrong!"
Jonathan Melville
"I really appreciate all the videos and writing you have done. Your work has given me a jump start on my front end development business."
Shan Ricciardi

Perfect for Small Teams & Companies


Mijingo's courses are perfect as the training curriculum for both small teams and entire companies.

Our courses are offered in Team Packs (up to 5 people) and Company Packs (up to 25 people), so you can make one simple, fast purchase to train your entire staff.

Prices are listed with each course. Need more than 25 or something custom?

Send Your Requirements
Team Pack2-5 People
Company Pack6-25 People
Custom Pack25+ People