Node.js Gulp is super useful! It's not just for programming, it's also a companion for HTML coding

Hello.
I'm Mandai, the Wild team member in charge of development.

I'm surprised by how much the HTML coding environment has changed since I last looked at it.
Today, I'd like to review the steps for installing SASS (SCSS) and setting up an automated compilation environment. I
won't be covering SCSS syntax itself this time, but I plan to write an article about that soon.

Looking back at the time when CSS was the only language available, it's incredibly useful (even now)

Also, this time I will mainly write about the Windows 10 environment, but there is no difference in what you need to do after installing Node.js, so I hope you will find this useful

 

Install Node.js

If Node.js is not installed in your environment, you will need to start by installing it.
However, for Windows users, this is relatively easy as it only requires downloading and running the installer.

the Node.jsDownload it from the link under "Download for Windows (x64)" on
Version 4 (as of July 2016), which is LTS (Long Term Support), is more stable and recommended!

 

Install the required npm

Let's install the necessary modules using npm, which comes with Node.js

The modules needed this time are

• Gulp
• gulp-sass

There are two types:

Gulp is a task runner, and it"How to Use Visual Studio Code to Make Bookmarklet Creation Super Efficient" by Beyond Inc.,'s also discussed in
In short, it's a tool to automate time-consuming tasks, so this time we'll have gulp automatically compile SCSS and place the compiled CSS in a specified path.

From here on, you will work from the command prompt or PowerShell

First, create a directory in a suitable location.
A common approach is to create a development directory directly under the C drive and then place project directories under it.
In this case, we will create a directory called "development" directly under the C drive, and then create a directory called "sass_test" under that.

mkdir development cd development mkdir sass_test cd sass_test

 
Move to the last sass_test you created

Next, as is customary when starting anything with Node.js, run npm init to create package.json

npm init

 
You will be asked a lot of questions, but you can edit them later, so just keep hitting enter for now

Next, regarding installing Gulp, since Gulp is a tool that needs to be installed both globally and locally, we will first try installing it globally

npm install gulp -g

 
The -g option installs it globally

I've been saying "global" for a while now, but what does "global" mean?

• The global command that runs as a console command is
• Place it in the directory you created for your project, and the installation will be local so you can call it from your JS file

That's roughly the gist of it.
I also included an explanation of the local terms that will come up next, but that's the general idea.

Then install it locally

npm install gulp --save-dev # The --save-dev option is for writing to package.json, so it is unnecessary if you do not plan to work in a different environment

 
The term `package.json` came up. This is a file placed in a repository such as Git, which lists the necessary packages in advance so that development can begin immediately after cloning the repository in another environment.
When multiple people are developing, it becomes much faster to set up the environment by having someone build it, deploy it with Git, and then install everything at once with npm.

Next, install gulp-sass, a module for using Sass with Gulp

npm install gulp-sass --save-dev

 
This is local only

All the necessary modules are now installed

 

Organize gulpfile.js

Next, we will finally create the part that automatically compiles scss to css

Gulp tasks are programs, not configuration

So from here on, we'll be using server-side JS (although it's simple)

When Gulp starts, it first loads a file called gulpfile.js.
You can load other files from here to execute tasks, but this time we will write all the tasks in gulpfile.js.

First, I'll show you the gulpfile.js for this example

var gulp = require('gulp'); var sass = require('gulp-sass'); var from = 'path/to/scss/*.scss'; var dist = 'path/to/css'; gulp.task('sass', function(){ gulp.src(from) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest(dist)); });

 
The sources are explained in order

• Lines 1 and 2 load the gulp and gulp-sass modules that we just installed
• Set the location where the scss file is saved and the css output destination on lines 4 and 5
• The seventh line is the beginning of a task. The first argument to gulp.task is the task name. In this example, I named the task "sass"
• On line 8, specify the location where the scss is saved and load the scss file
• The SCSS is compiled into CSS on line 9. The series of processes are chained using the pipe() method, so it's easy to understand what it means
• Also on line 9, we write what to do if an error occurs during compilation. Without this, Gulp will stop due to a SCSS syntax error. By indicating the behavior in the event of an error, Gulp will not crash due to an error
• Line 10 writes the compiled CSS to the output destination

That's all for the explanation

The execution is the following command:

gulp sass

 
If the SCSS file does not exist, nothing will happen and the program will exit

I think sass().on('error', sass.logError) is a great little trick

 

Watch and compile automatically

While it's possible to compile CSS from SCSS in the current state, the process of writing SCSS, running gulp to compile, and then creating CSS is tedious.
Ideally, we'd have a system that automatically detects file updates, compiles them, and generates CSS.

The tool for this is the gulp.watch() method

Here is a version that incorporates gulp.watch()

var gulp = require('gulp'); var sass = require('gulp-sass'); var from = 'path/to/scss/*.scss'; var dist = 'path/to/css'; gulp.task('sass', function(){ gulp.src(from) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest(dist)); }); gulp.task('watch', ['sass'], function(){ gulp.watch(from, ['sass']); });

 
The added code begins on line 13. Let's explain it step by step

• On line 13, we add a new task called watch. We specify an array as the second argument, which we will explain later
• The gulp.watch() method appears on line 14. This monitors file updates in the path specified in the first argument, and if an update occurs, immediately executes the task specified in the second argument. This is an array, so you can execute multiple tasks

It's like a dream come true that file update monitoring can be achieved so easily

The command to run the added watch task is as follows:

Gulp Watch

 
However, this command won't terminate even after execution is complete.
It monitors the file and runs the sass task every time an update is detected, so
it can't terminate.

Also, regarding the second argument of the gulp.task() method mentioned earlier, when defining a Sass task, the second argument was an anonymous function.
The gulp.task() method takes a variable number of arguments, so the value you specify will change depending on the number of arguments.
If there are two arguments, it will be an anonymous function containing the task name and the processing content, and if there are three arguments, you can list the tasks to be executed before the anonymous function is executed, along with the task name.
Similar to the gulp.watch() method, this can also be specified as an array, so you can execute multiple tasks sequentially.

Task runners aren't just for compiling SASS.
Perhaps they can be used in ways beyond your daily work, such as registering recurring tasks (not just programming) to save time and effort.

 
That's all