⚠️ Note: If you do not use Windows, you can go straight to Step 2. Step 1 is for Windows users to install a UNIX-like terminal that is usable for work - Linux and MacOS already have one.

*~ Introduction ~*

Are you a web developer that uses Windows? Do you want your life to be easier and to have more free time? No? Get out and continue being miserable. Oh, was that a yes? Good - please proceed. In thirty minutes to a couple hours (depending on how slow you are) you'll have task automation set up to work for you while you work.

It will help you finish projects faster and more effectively. You can learn more about how gulp is useful and take a look at some of their plugins that could help you in web development.

• Step 1 - Terminal (Windows)
• Step 2 - npm
• Step 3 - gulp
• Why is gulp useful?
• Can I just test it?

You need a terminal to use npm and gulp. A terminal is available out of the box on Linux and OS X. Windows has it as well but cmd and PowerShell is not usable for development work. You do not need to be experienced with terminal to use it properly, but learning some basics would help, such as a few commands like cd, ls, mkdir, rm. You can learn it here. It will help you in long run so you won't get stuck at a terminal for minutes to hours over a small mistake. If you don't like this site, this alternative might work.

We will use cmder as a replacement terminal. However, it is a separate software and does not directly replace default terminal.

Cmder is a software package created out of pure frustration over the absence of nice console emulators on Windows. It is based on amazing software, and spiced up with the Monokai color scheme and a custom prompt layout, looking sexy from the start.

1. Download and install cmder. I use the full version because it comes with git. Ensure to check the checkbox labelled "Add to PATH" during the installation.

2. Open cmder. If you have runtime error when starting cmder, you will probably need to install VS 2015, see the issue here. If you got different errors, Google/GitHub will get you a fix right away, but if not, report it on their repo issues section.

3. Go to cmder settings by right-clicking an icon on top-right of window or press Win+Alt+P. Navigate to Startup -> Tasks on sidebar, select {cmd::Cmder} in Predefined tasks and enter cmd /k "%ConEmuDir%\..\init.bat" -new_console:d:%USERPROFILE% as a command, then save.

4. Navigate to Startup on sidebar and select {cmd::Cmder} on Specified named task dropdown. Screenshot.

5. You can change the background to black like I did in Colors or tweak preferences to your liking.

cmd /k "%ConEmuDir%\..\init.bat" is my favorite command application for cmder because it runs linux commands (a little limited though, because it is a port) such as ls -la, cat, cd, touch, du, cp, rm, and more, with arguments. It feels like home.

Some people prefer using Powershell as a shell for cmder, which I don't understand, but if you want to, you can set it.

As mentioned previously, if you have never used terminal, you should learn terminal basics here. If you do not like this site, this alternative may be better.

If you have never used cmder before, learning few hotkeys will help you in long run. It may share hotkeys with other terminals. The image below is information about cmder that can be found on their site.

Source: http://cmder.net/

We need npm to install gulp, so we're going to do that.

1. Download and install npm. During the installation, be sure 'add to PATH' is included (image).

2. When installed, restart cmder and enter npm in terminal to see if it's working properly, i.e it should look like this. If it does, proceed to the next step.

Finally we reach the gulp section. This isn't going to be quick and short. Installation will be quick, but configuration for your web development workspace... not really. Trust me, it will be worth it in long run, I will convince you of that.

1. Open a terminal (cmder) and install gulp globally with this terminal command: npm install --global gulp. It should look something like this.

2. Congratulations! You installed gulp!

Good job. Maybe it was easy, maybe it was not, but you made it. You installed gulp using a terminal on Windows!

You already have gulp installed, you're set. All you have to do is set it up for your particular work environment, as everyone has different configurations! Go to Google and find a gulp tutorial for beginners to start learning how to configure gulpfile.js, install plugins and make it work for your workflow.

I also listed useful gulp plugins below that you can use it as a reference after becoming more familiar with gulp configuration from tutorials you find.

Gulp is an automatic tool that help you out with several web development related tasks such as:

• browser-sync — fires up a local web server (localhost:3000 for own computer, 198.168.x.x:3001 for other devices, etc) for all local devices and browsers to access. It auto-refreshes on any file save (and can be configured to watch certain folders), even when you replace an image with new one. You can view your website on your computer, tablet, mobile device and other devices while coding. You can use dev tool freely, while Brackets' live preview would crash if you do that.
• gulp-sass — compiles SCSS to CSS files before BrowserSync loads, highly configurable. You'll need gulp-plumber to stop gulp from crashing if SASS produces any error.
• gulp-concat — it is normal to have several separated external dependencies files like jQuery, Modernizr, and more, along with linking them all in HTML/PHP files. With concat, it can compile all of these js files to one vendor.js file.
• gulp-uglify — remember how we compiled several js files to one vendor.js file? Let us minify it, too! Remember, it is all done automatically. Every time you edit one of js file, gulp-concat and gulp-uglify will repeat the procedure and make it ready.
• gulp-rename — instead of having minified vendor.js, let's rename it to vendor.min.js. Automatically, of course.

There is many more useful plugins you can use to make your web development life easier. Here's a small list that can be useful for you.

###HTML

• gulp-htmlmin — minifies HTML files
• htmlhint — HTML linter/hinter

###CSS

• cssbeautify — CSS beautifier
• gulp-uncss — cleans unused CSS files (run before CSS autoprefixer, optimizer, minifier and renamer if you have these)
• gulp-autoprefixer — CSS autoprefixer
• gulp-csslint — CSS linter

####CSS optimizer, minifier and renamer gulp-csso — this is an advanced CSS optimizer that optimize from

a { font-family: Arial; font-style: italic; font-size: 14px; line-height: 18px; font-weight: bold; background-image: url('example.png'); background-color: red; background-size: cover; background-repeat: no-repeat; } 

to

a { font: italic bold 14px/18px Arial; background: red url('example.png') no-repeat / cover; } 

I consider that very impressive. (Maybe you just learned little CSS here, hehe)

After the optimization, run gulp-clean-css if you want to minify your CSS. Don't forget to use gulp-rename to rename the file from *.css to *.min.css.

It all must be configured in gulpfile.js.

###Images

• gulp-imagemin — compresses images to lower filesize without quality loss
• gulp-spritesmith — converts images to a spritesheet and outputs CSS variables

###Others

• gulp-watch — a task that watch files, and when a file get modified or updated, it will run specified gulp tasks. It is an essential gulp plugin and the tutorial you find will probably mention it.
• gulp-notify — sends system error notification when gulp task fails.

Sure, I have a repo for you to see what happens when you run gulp.

1. Download this folder in my repo.

This repo has standard bootstrap CSS and JS, minimal index.html, blank main.scss and configured gulpfile.js with following gulp plugins:

• BrowserSync — automatically refresh in browser when the watched file is saved.
• SCSS compiler — automatically compiles SCSS to CSS on save. It compiles /scss/main.scss to /css/main.css so HTML file can read it.
• Plumber — prevents gulp crash on SCSS error.

2. Navigate to this folder /gulp/ with your terminal with cd (Windows only: instead of navigating, you can add cmder to context menu with a .reg file. Of course, you need to edit paths to your path to cmder.exe file in a .reg file before running it.)

3. Install dependencies by running npm install --save-dev in terminal. It reads gulpfile.js, then downloads and installs necessary files for gulp to run. (You need to be in 'gulp' folder to do this)

4. Finally, run gulp. It will take several seconds to boot up a web server, boot up these scripts and then it will be up and running. You also need to be in gulp folder to do this.

5. Any changes you make will be auto-refreshed and applied to the site. You can write regular CSS in .scss file and SCSS compiler will compile it to other CSS file and BrowserSync fires again and browser reloads to display the change. If gulp crashed, just run gulp again.

If you use Bootstrap, you can use my repo as a base to start a new website. Configure and embrace gulp! 💪