Install Gulp for web designer

image

This is a step by step guide that summarize all the posts which helped me to achieve the tasks described bellow:

  1. Install Gulp 
  2. 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.

image

At this point we just want to be sure that node has been correctly install, so we will type

image

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 :

image

Now install Gulp

In Terminal write

image

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:

image

If you have something like that, let´s go one!

image

It’s possible that you encounter an error with the lodash version like:

image

I have one and tried to resolve it untill I’ve read that:

The package grunt-cli relies on a older version of lodash. It shouldn’t affect the functionality of grunt; it’s just a warning message.

So, you’re doing nothing wrong, it’s not an error message, just a warning, and the way you’ve installed grunt-cli should work fine.

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: 

image

leave a space and drag & drop the “project” folder in Terminal. The path will write itself. You’ll have something like that:

image

Press Enter. Now that project is targeted, let’s call package.json by writing:

image

and press Enter.

You´ll see a list messages, list that:

image

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:

image

Now in our project file we have:

image

To finish the first part of this tutorial we need to create a file named gulpfile.js with the following line:

image
image

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:

https://travismaynard.com/writing/getting-started-with-gulp
https://la-cascade.io/gulp-pour-les-debutants/
http://www.alsacreations.com/tuto/lire/1686-introduction-a-gulp.html

Spread the love

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *