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 of the development team.

I've been surprised by how much the HTML coding environment has changed since I last looked.
Today, I'd like to review the steps for installing SASS (SCSS) and setting up an automatic compilation environment. I
won't be touching on the SCSS syntax itself this time, but I'll write an article about that in the near future.

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 you are not using Node.js in your environment, you will need to install it first.
However, if you are using Windows, the installation process is fairly straightforward, as you only need to download and run the installer.

Download it from the link under "Download for Windows (x64)" on
the Node.js We recommend version 4 (as of July 2016), which is LTS (Long Term Support), as it is more stable and can be used more easily.

 

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 that makes bookmarklet creation super easy. It's also written about in How to Use Visual Studio Code | Beyond Inc., so please take a look!
It's essentially a tool for automating time-consuming tasks, so this time we'll use gulp to 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 method is to create a development directory directly under the C drive, and then place a directory for each project under that.
In this example, 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

also
added a local explanation, which I'll explain 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 has been mentioned, but this is a file that lists the required packages in advance and is placed in a repository such as git so that development can begin immediately after cloning the repository in another environment.
When multiple people are developing, this makes it extremely fast for someone to set up the environment, deploy it with git, and then install it all 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 and execute tasks, but in this example we will write all 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

Even in the previous state, it is possible to compile CSS from SCSS, but it is a pain to go through the steps of writing SCSS → running gulp to compile → creating CSS. It would be
nice if the system could detect file updates, automatically compile them, and turn them into 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 does not terminate even after execution is complete.
It monitors files and executes the sass task every time an update occurs.
We don't want it to terminate.

Also, regarding the second argument of the gulp.task() method mentioned earlier, when the Sass task was defined, 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.
When there are two arguments, it becomes an anonymous function with the task name and processing content written in it, and when there are three, you can list the tasks to run before executing the task name and anonymous function.
Like the gulp.watch() method, you can specify an array here, so you can run multiple tasks in sequence.

Task runners don't exist just for compiling SASS.
If you can register actions that you always perform in your daily work, not just programs, you might be able to reduce a little bit of work and get a good result, so you might be able to use it in more ways than just work!

 
That's all