This is a step by step guide that summarize all the posts which helped me to achieve the tasks described bellow:
- Install Gulp
- Install and set the webserver plugin, and how to run it (in order to use a lighter and more functional local server than MAMP —yes I work on Mac).
First you need to install node.js.
For that just download the pack and follow the instructions. It’s really like installing any application.
Once you´ve done that, open the Terminal. Some of you won’t know about that; Terminal is a little application native to Mac OS. Just search for Terminal in Spolight or go to Applications > Utilities > Terminal
A window similar to this one will open.
At this point we just want to be sure that node has been correctly install, so we will type
and press enter. DO NOT type more spaces than the syntax indicates!
You should then see the version of Node.js. Mine is v4.3.0 :
Now install Gulp
In Terminal write
the sudo instruction is only valid on Mac. In windows only type npm install -g gulp and press Enter.
Let’s ensure that Gulp has been installed correctly by checking its version typing:
If you have something like that, let´s go one!
It’s possible that you encounter an error with the lodash version like:
I have one and tried to resolve it untill I’ve read that:
And the point is that indeed, this error message doesn’t affect Gulp of running fine.
Now finish the installation by creating package.json and some Gulp modules
Until now we’ve installed Node.js and Gulp at the global nevel. What we need now is to install the rest of the files necessary to Gulp, but this time in a specific folder. Let’s say that the name of the website or app you are working on is “project”.
You need to target it from Terminal in order to install the package.json and the modules. Type:
leave a space and drag & drop the “project” folder in Terminal. The path will write itself. You’ll have something like that:
Press Enter. Now that project is targeted, let’s call package.json by writing:
and press Enter.
You´ll see a list messages, list that:
Just ignore it by pressing Enter.
Now let’s install the modules.
We are already in the project folder so there’s no need to repeat the previous step. Just type in Terminal the following:
Now in our project file we have:
To finish the first part of this tutorial we need to create a file named gulpfile.js with the following line:
Then, to prepare the next step, the installation of plugins, lets create two empty folders app and dist
app will contain all the project in development.
dist is the project processed and/or optimized.
In fact, in first instance I’ve installed Gulp because I want to create a local server (the second part of this tutorial), but Gulp allows to automatize a lot of operations like minimizing js or css files, compressing images, cache,..
Gulp has more that 2000 plugins that allows to save a lot of time.
Sources of this post: