Gulp - rvdegroen/notes GitHub Wiki

Gulp

What is Gulp?

Gulp is a task runner that uses node.js as platform. With Gulp you can build system automated tasks for example for: HTML, CSS, JS and even Sass, you can compile them and minify them. With Gulp you can do simple tasks, such as move files, copy them and rename them. It let's you define tasks by name and run tasks by name.

Why use Gulp?

Tasks such as compiling Sass files to CSS, combining multiple javascript files, minifying javascript & css files, can automatically run when a file change has been detected. This makes Gulp flexible to use and enhances your workflow. Gulp also has different plug-ins's to make your life easier.

How do you use it?

You need to add three folders

  1. First you'll have to make a configure file for Gulp, called gulpfile.js in your root working branch. In this file you will write all the tasks Gulp will have to run for you.
  2. You'll also have to make an app folder. In this folder you will put all your javascript files (script.js) and your SASS files (style.scss). `You can change the files in this folder.
  3. You'll also have to make a dist folder. This folder will store the compiled files, after running the code that's written in gulpfile.js. You cannot change the files in this folder.

To use the modules you installed, such as gulp, sass, cssnano, concat and uglify, you will have to require these modules at the top of your gulpfile.js.

After this you can finally add code for tasks you want to run in the gulpfile.js

To run Gulp, you simply have to type in gulp in your terminal. This will run the code you have written in the configure file called gulpfile.js.

The way you add a task in Gulp is as following:

gulp.task('[Function Name]', function(){
   // Do stuff here
}

There are several main functions in Gulp, with each their own purpose, such as:

  1. .task() = creates a task
  2. .src() = Indetifies which files you're looking for
  3. .pipe() = Adds a function to the Node stream
  4. .dest() = Writes the results of the file into a specific location
  5. .watch() = Detects changes within files and updates them automatically

I copied this code from: https://www.freecodecamp.org/news/super-simple-gulp-tutorial-for-beginners-45141974bfe8/. This is to give you an example of how it would look like when you write the code:

gulp.task('sass', function(){
    return gulp.src('app/style.scss')
        .pipe(sass())
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css'));
});

Implementation

Implementation in a different branch

The way I implemented gulp was in a branch called gulp-implementation. This was because I wasn't able to do this within the first deadline of this project. Other people also had to work on things like grunt and parcel, so we decided to these optimization things in our own branches to have to least amount of hinder from each other.

Plugins

On the following website: https://gulpjs.com/plugins, you can find all sorts of plugins for gulp. I went through this list and looked for plugins that sounded familair to me, such as: gulp-sass (because we're using sass in our project), gulp-uglify (to minify javascript files), gulp-concat (bundle or concatenating multiple javascript files) and gulp-watch (watches your files for changes and adjust them for you automatically). I pretty much decided to try it out with just a few in this list instead of making it too complicated, because I'm the type of person that bites of more than I can chew and then I realize I've been wasting a lot of time on something I can't even finish sooo... I decided to implement the followwing plugins for this reason:

  1. gulp-sass = compiling sccs files into css files
  2. gulp-concat = to bundle the compiled css files into one file

The main goal of using Gulp was mainly for practice for myself to see how Gulp works and how I need to use it.

Things I did different

I want to talk here about what I did different than when you're normally using gulp. The thing I just really want to adress is that I used my static folder for all the files. I didn't wanted to change the name of this folder because to me this project is already big. Everything works the way it's supposed to and I didn't wanted to break anything and go through the entire thing, wasting my precious time on renaming file names. This is also the reason why I don't have a dist file. In future project I would however implement it the way it is documented, because I do understand that if other people would look at my code and they see a dest folder.

Sources: https://gulpjs.com/ https://www.freecodecamp.org/news/super-simple-gulp-tutorial-for-beginners-45141974bfe8/ https://gulpjs.com/docs/en/getting-started/quick-start/

Written by: Roshnie de Groen