Gulp.js Intro to Task Automation on Nodejs & Javascript 01

List Of Content

ADS Area (CARBON)

ADS Area (CARBON)

 

Getting Started

Task automation is one of the important skills you need to master if you are really intending to be a web developer especially using Node.js, Gulp.js is a library that allows creating custom scripts on your Node's environment to automate different tasks (for ex: auto reload development server) and make your project development with your team much easier.

Gulp.is one library that is full of functions and features but at the end of the day there is plenty of other libraries and tools allows such the same functionality as Gulp.js.

So first, make sure to start your favorite code editor for me it's going to be VSCode and create a simple web project files and directories (src/, dist/) and also make sure to initialize it with NPM.

Here is the project structure:

--dsit/
----index.html
--src/
----sass/
------style.scss
--package.json

We have created a simple SASS file so we can use later when working with Gulp tasks and try to preprocess it throughout a Gulp.js script.

And a simple HTML Page that is going to be responsible for loading the pre-compiled CSS so we could clearly see the changes.

We are going to need a few modules to be installed first:

npm install gulp-cli -g 

Install Gulp CLI as a global module cause it needs to be used for all the projects that are going to be running Gulp.js.

Then install it for the current project alongside browser-sync and gulp-sass modules.

npm install gulp browser-sync gulp-sass --save-dev 

Browser-Sync is the module responsible for exchanging data between the Code Editor and the Browser we use during the development so when we change something on a file(s) on our project and save that the browser will automatically know about the change and reload the made changes, but still we need first to tell it to do so through a Gulp.js script.

Gulp.js Script File

a script file is a file that registers the task that is going to be used with Gulp and it's plugins, it lives on the root of your project and once you register some tasks on it you could easily run them from the command line (Terminal).

So create gulpfile.js on the root of your current project and let's try to automate the process of precompiling SASS to CSS and reloading the served web page when there is new changes have been saved.

//Gulp Module
let gulp = require("gulp");
//SASS pre-compiler module4
let sass = require("gulp-sass");
//Browser Sync for serving the current project on a custom server 
let browserSync = require("browser-sync");
//Referencing the Reload function 
let reload = browserSync.reload;

We are going to create something like Webpack Development Server which basically allows serving your project's public files on a server and you can benefit with a plenty of its features, we also going to try to create an auto SASS to CSS pre-compiler whenever there are new changes made to the style.scss file or any other files at the same directory.

...
//Gulp Preprocessing Task (Register SASS Task first) name the task => sass
gulp.task("sass", () => {
  return gulp
    .src("src/sass/**/*.scss")
    .pipe(sass().on("error", () => console.error(sass.logError)))
    .pipe(gulp.dest("./dist/"))
    .pipe(reload({ stream: true }));
});
//We load any style file and pre-compile it then output back the CSS into dist/ folder

We are simply telling gulp to load the style file or any other file that lives on the sass directory using the matching string then compile it using sass() function and check for any errors and finally output the pre-compiled CSS into the dist/ folder + tell browser-sync to reload the browser for us.

the pipe method is simply linking the previous command with a new one so when the previous command is done we run the next one suppling with the right data it needs.

Now we need to add the task that is going to be responsible for a creating a development server that serves your project files.

//New Task, but this task requires the sass task to run first before it can execute
gulp.task("serve", ["sass"], () => {
  //Run browser-sync giving it the baseDir of our project dist/
  browserSync({ server: { baseDir: "dist" } });
});

//And Finally don't forget about (keeping and eye on) watching the style files for any changes 
//Any file on the sass folder with a scss extensions is changes gulp is going to run the sass task
gulp.watch("./src/sass/*.scss", ["sass"]);

For linking tasks together or making one Gulp task require another task to run first is by supplying it with an array of task names that it requires to run, then it takes the callback to be run when the task is being executed.

And most importantly you need to keep an eye on the style files for any changes and run the SASS task in case of.

This is all you need to do with Gulp, simply register a task with a callback to be run when the task is being executed and with the set of plugins it has you could make your day in the life as a developer much easier just by using Gulp.js and it's tasks automation Techniques.

Running Tasks

Now, since we have made a development server and a pre-compiler for our SASS files that means this task needs to run exactly when we start development from the terminal, it actually depends on what task you require on different development phases.

For example, you may need to run a deployment task that will manage some files and directories for you only needed when trying to deploy your ready application.

gulp serve

Running a task is as simple as running gulp command supplied by the task you need to run and since serve is linked with the SASS task so it first going to look for any style files and try to pre-compile them then run the server that serves the dist/ directory.

$ gulp serve
[18:13:14] Using gulpfile C:\Source\Tutos\gulpjs\gulpfile.js
[18:13:14] Starting 'sass'...
[18:13:14] Finished 'sass' after 54 ms
[18:13:14] Starting 'serve'...
[18:13:15] Finished 'serve' after 1.1 s
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://172.26.71.145:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: dist

You will find a new CSS file created on the dist/ folder make sure to link it with your HTML page so it loads the stylesheet correctly.

<link rel="stylesheet" href="./style.css">

Now if you try to do some changes to the style.scss (SASS file) and save you will that gulp has pre-compiled a new CSS file and it automatically reloads the browser for you letting the changes take effect with an easy peasy task.

 

What's Next

Now since you have been able to create your own development server instead of using ready-made modules or libraries (webpack-dev-server) you can create even more advanced scripts that are going to Help you a lot on your journey either when learning or working on a scaled project with your team;

The Documentation is a great place to learn more things about what Gulp.js is capable of and how it's being done.

 

 

Share Tutorial

Made With By

Ipenywis Founder, Game/Web Developer, Love Play Games