All about GULP (with project structure)

What is Gulp:

Gulp is a tool that helps you out with several tasks when it comes to web development. It’s often used to do front end tasks like:

  • Spinning up a web server
  • Reloading the browser automatically whenever a file is saved
  • Using preprocessors like Sass or LESS
  • Optimizing assets like CSS, JavaScript, and images

Tools like Gulp are often referred to as “build tools” because they are tools for running the tasks for building a website.

What you will learn after reading this blog:

By the end of this article, you will learn how to setup/ structure web project in most standard way, how to use gulp which will perform following task:

  • Spins up a web server
  • Compiles Sass to CSS
  • Refreshes the browser automatically whenever you save a file
  • Optimizes all assets (CSS, JS, fonts, and images) for production

You’ll also learn how to chain together different tasks into simple commands that are easy to understand and execute.

Step 1: Installing Gulp 

You need to have Node.js (Node) installed onto your computer before you can install Gulp. You can check my blog How to install node.js in Mac?  OR

If you do not have Node installed already, you can get it by downloading the package installer from Node’s website.

When you’re done with installing Node, you can install Gulp by using the following command in the command line:

$ sudo npm install gulp -g    ->> sudo for mac user only
$ npm install gulp -g         ->> for windows user

The npm install command we’ve used here is a command that uses Node Package Manager (npm) to install Gulp onto your computer.

The -g flag in this command tells npm to install Gulp globally onto your computer, which allows you to use the gulp command anywhere on your system.

Mac users need the extra sudo keyword in the command because they need administrator rights to install Gulp globally.

Now that you have Gulp installed, let’s make a project that uses Gulp.

Step 2: Creating Gulp project 

First, we’ll create a folder called GulpDemo in system as our project root as we move through this tutorial. Run the npm init command from inside that directory:

# ... from within our project folder
$ npm init

The npm init command creates a package.json file for your project which stores information about the project, like the dependencies used in the project (Gulp is an example of a dependency).

npm init will prompt you:

gulp.PNG

Once the package.json file is created, we can install Gulp into the project by using the following command:

$ npm install gulp --save-dev

This time, we’re installing Gulp into project instead of installing it globally, which is why there are some differences in the command.

You’ll see that the sudo keyword isn’t required because we’re not installing Gulp globally, so -g is also not necessary. We’ve added --save-dev, which tells the computer to add gulp as a dev dependency in package.json.

gulp.PNG

gulp.PNG

We’re almost ready to start working with Gulp. Before we do so, we have to be clear on how we’re going to use Gulp for the project, and part of that is deciding on a directory structure.

Step 3: Deciding project folder structure

Gulp is flexible enough to work with any folder structure. You’ll just have to understand the inner workings before tweaking it for your project.

For this article, we will use the structure of a generic webapp:

gulp.PNG

In this structure, we’ll use the app folder for development purposes, while the dist (as in “distribution”) a folder is used to contain optimized files for the production site.

Since app is used for development purposes, all our code will be placed in app.

We’ll have to keep this folder structure in mind when we work on our Gulp configurations. Now, let’s begin by creating your first Gulp task in gulpfile.js, which stores all Gulp configurations.

Step 4 – Writing first gulp task

The first step to using Gulp is to require it in the gulpfile.

var gulp = require('gulp');

The require statement tells Node to look into the node_modules folder for a package named gulp. Once the package is found, we assign its contents to the variable gulp.

We can now begin to write a gulp task with this gulp variable. The basic syntax of a gulp task is:

 gulp.task('task-name', function() {
  // Stuff here
});

task-name refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can also run the same task in the command line by writing gulp task-name.

To test it out, let’s create a hello task that says Hello World!.

gulp.task('hello', function() {
  console.log('Hello Zell');
});

We can run this task with gulp hello in the command line.

Screenshot 2019-07-30 at 10.50.49 PM.png

Gulp tasks are usually a bit more complex than this. It usually contains two additional Gulp methods, plus a variety of Gulp plugins.

Here’s what a real task may look like:

gulp.task('task-name', function () {
  return gulp.src('source-files') // Get source files with gulp.src
    .pipe(aGulpPlugin()) // Sends it through a gulp plugin
    .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})

As you can see, a real task takes in two additional gulp methods — gulp.src and gulp.dest.

gulp.src tells the Gulp task what files to use for the task, while gulp.dest tells Gulp where to output the files once the task is completed.

Let’s try building a real task where we compile Sass files into CSS files.

1st Gulp task – Preprocessing 

in package.json

npm install gulp-sass --save-dev

We have to require gulp-sass from the node_modules folder just like we did with gulp before we can use the plugin.

in gulpfile.js

var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');

//example

gulp.task('sass', function(){
  return gulp.src('source-files')
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('destination'))
});
gulp.task('sass', function(){
  return gulp.src('app/scss/styles.scss')
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/css'))
});

 

Some extra thing :

GULP: Uninstalling and Installing GULP global and local

npm uninstall -g gulp
npm install -g gulp
npm uninstall --save-dev gulp
npm install --save-dev gulp

Refer – https://css-tricks.com/gulp-for-beginners/  (Best link to learn gulp as per personal experience)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s