Beginner guide for users on web development with node.js/npm + gulp terminal commands. You'll learn how to use other terminal commands like git, gulp, bower, yarn, and more!
Gulp is an automation tool commonly for front and back-end web developers and it will speed up your development process because it does things automatically in background which you otherwise would have to do yourself manually without it, like:
What I know: Everybody is interested in what they'll gain after spending certain amount of time reading unknown text, so I'll give you a brief summary of what you'll learn from reading this, properly at least, and each steps should be held to your hand all way through, If there is any complication or difficulties, please get it to my attention by reporting it in issues page or just use Google. However, after the end of the tutorial, then you're on your own, ha. Nah, don't worry, there's Google and helpful bunch of people on Stack Overflow... just be kind and it will get you far. This page will do the following:
Gulp is a terminal software and using it on Windows can be challenging. This guide will help you to start using Gulp, however this guide is not limited to Windows, it also applies to Linux and macOS users. The installation process, Step 1, is for Windows users only. Linux and macOS users can go straight to Step 2, because they have the required installation process pre-installed on their system.
gulpfile.js
It will teach you how to:
gulpfile.js
Teaches you how to configure your own gulpfile.js
and a compiled list of suggestions and recommendations for gulp plugins if you would like to build your own gulp script that is tailored for your own development workflow.⚠️ 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.
Ok, Windows users, you need a terminal to use npm and Gulp. A functional terminal is available out of the box on Linux and macOS, and Windows has it as well but cmd and PowerShell is not sustainable for in comparison with UNIX console. 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
, highlight to copy, and right-click to paste. 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, so I make a shortcut to it in Start menu and use a .reg file (to be mentioned later in "Can I just test it?" chapter) to enable context menu feature.
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.
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.
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.
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.
Navigate to Startup on sidebar and select {cmd::Cmder}
on Specified named task dropdown. Screenshot.
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.
We need npm to install Gulp, so we're going to do that.
Download and install npm. During the installation, be sure 'add to PATH' is included (image).
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.
Open a terminal (cmder) and install Gulp globally with this terminal command: npm install --global gulp
. It should look something like this.
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!
gulpfile.js
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 workflow and configurations! Go to Google and find some half-decent Gulp tutorial for beginners to start learning how to configure gulpfile.js, install plugins and make it work for your workflow. You can try this tutorial or just use Google.
Try to familiarze yourself with Gulp and gulpfile.js configuration with tutorials, then you can create your own configuration for your development workflow. I listed some useful Gulp pugins below you can use as a reference, however you wouldn't need every single of plugins listed below. Just get plugins that will be useful for your own typical workflow. Most of these plugins have a basic tutorial expecting that you already know how to configure gulpfile.js, that's why knowing how to configure Gulp is important, by referring to above paragraph "Start learning how to configure gulpfile.js".
⚠️ Note: If you have trouble with one of these plugins, ensure that it's not an issue our end. If you can't figure out on what's going on, just check the plugin GitHub repo (rarely, if GitHub repo is not available, try using their available discussion tool) and search or open an issue about the problem. If the plugin is active, you should get responses with solutions quickly.
Gulp is an automatic tool that help you out with several web development related tasks such as:
localhost:3000 for own computer, 192.168.x.x:3000/10.0.x.x, etc (ROUTER IP ADDRESS:GULP PORT). If you run another gulp task, it will provide you new port like 3001, 3002, 3003, etc
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.Here's a list of some more Gulp's plugins that can be useful for you. Any more than that, you will need to use a search engine or npmjs.com.
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;
}
Impressive, especially for newer developers who don't know all shortified CSS .
Notice: If you choose to add the above gulp-csso
plugins, the following plugins below are meant to be run after this plugin, in order.
*.css
to *.min.css
.Sure, I have a repo for you to see what happens when you run Gulp.
This repo has standard bootstrap CSS and JS, minimal index.html, blank main.scss and configured gulpfile.js with following Gulp plugins:
/scss/main.scss
to /css/main.css
so HTML file can read it.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.)
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)
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.
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.