Node.js gulp is super useful! Program ``Not just'' HTML coding companion edition

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

It's been a while since I've seen it, and I've been surprised by how much the environment surrounding HTML coding has changed.
Today, I would like to review the steps to install SASS (SCSS) and how to set up an environment for automatic compilation.
This time I won't touch on the SCSS notation itself, but I would like to write an article about it in the near future.

It's incredibly convenient since when CSS was the only option available (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 it helpful.

 

Install Node.js

If your environment does not have Node.js installed, you must first install Node.js.
However, in the case of Windows, the barrier to entry is low because all you have to do is download and run the installer.

Download it from the link under Download for Windows (x64) on
the Node.js We recommend the 4 series (as of July 2016), which is treated as LTS (Long Term Support), as it is more stable to use!

 

Install the required npm

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

The modules needed this time are

• gulp
• gulp-sass

There are two.

Gulp is a so-called task runner that makes bookmarklet creation very easy. How to use Visual Studio Code | Beyond Co., Ltd. has also written about it, so please check it out!
In short, it's a tool for automating time-consuming tasks, so this time I decided to have gulp automatically compile SCSS and place the compiled CSS in a specified path. Masu.

From here on, work on the command prompt or PowerShell.

First, create a directory in a suitable location.
What I often do is to create a development directory directly under the C drive and place a directory for each project under that.
This time, create a directory called development directly under the C drive, and create a directory called sass_test under that.

mkdir development cd development mkdir sass_test cd sass_test

 
Move into the last created sass_test.

Next, as a rule when starting something with Node.js, run npm init and create package.json.

npm init

 
You will be asked various questions, but you can edit them later, so just hit Enter repeatedly for now.

Regarding the installation of gulp, gulp is a tool that needs to be installed both globally and locally, so let's install it globally first.

npm install gulp -g

 
The -g option installs it globally.

I've been talking about global since a while ago, but what does global mean?

• Global is to run as a console command
• Place it inside the directory you created for your project so that the installation is local to call from your JS file.

Is that what it feels like?
I also included an explanation of the local area that will appear next, but this is the nuance.

Then install it locally.

npm install gulp --save-dev # The --save-dev option is for writing in package.json, so it is not necessary if you will not be working in another environment.

 The word package.json came up, but this is a file that lists the necessary packages in advance so that you can put it in a repository such as git and start development immediately after cloning the repository in another environment. It's a thing.
When multiple people are involved in development, it is extremely fast for one person to build the environment, deploy it with git, 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.

Now we have all the necessary modules.

 

Maintain gulpfile.js

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

gulp's tasks are the programs themselves, not configurations.

So, from here on out, we'll move on to server-side JS (although it's simple).

When gulp starts, it first reads a file called gulpfile.js.
You can read other files and execute tasks from here, but this time we will write all tasks in gulpfile.js.

First, let me show you this gulpfile.js.

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)); });

 
Let me explain the sources in order.

• Lines 1 and 2 load the modules gulp and gulp-sass that we installed earlier.
• Set the save location of the scss file and the output destination of the css in lines 4 and 5.
• The seventh line is the beginning of a block of processing called a task. The first argument of gulp.task is the task name. This time, I named the task “sass”.
• On line 8, specify the save location of scss and load the scss file.
• Line 9 compiles SCSS to CSS. The series of processes is chained using a method called pipe(), so the meaning is easy to understand.
• Similarly, on line 9, we are writing what to do if an error occurs during compilation. If you don't write this, gulp will stop with an SCSS syntax error. By showing the behavior when an error occurs, gulp will not crash due to an error.
• Line 10 is the process of writing compiled CSS to the output destination.

That's all for the explanation.

Execute the following command.

gulp sass

 
If the SCSS file does not exist, nothing will happen and the process will end.

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

 

watch and compile automatically

Although it is possible to compile CSS from SCSS in the above state, it is difficult to go through the steps of writing SCSS → running gulp to compile → creating CSS.
It would be nice to be able to detect updates to files, and when they are updated, they are automatically compiled and turned into CSS.

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

Here is the 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 code added from line 13 onwards is the code added. Let's explain them step by step.

• On line 13, we added watch as a new task. An array is specified as the second argument, which will be explained later.
• The gulp.watch() method appears on line 14. This monitors the file update in the path of the first argument, and if it is updated, immediately executes the task specified in the second argument. Since this is an array, you can also perform multiple tasks.

It seems like a dream to be able to monitor file updates so easily.

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

gulp watch

 However, this command does not exit even after execution is complete.
It monitors files and runs a sass task every time there is an update.
I'm sorry for the inconvenience.

Also, the second argument of the gulp.task() method that appeared earlier was an anonymous function when the sass task was defined.
The gulp.task() method takes a variable number of arguments, so the value you specify will change depending on the number of arguments.
In the case of 2, it is an anonymous function with the task name and processing content written, and in the case of 3, the task name and tasks to be executed can be listed before executing the anonymous function.
Like the gulp.watch() method, this can also be specified as an array, so multiple tasks can be executed in sequence.

The task runner does not exist to compile SASS.
Perhaps, if you can register the actions that you always do in your daily work, not just programs, it will save you a lot of effort, so it may be possible to use it in ways that are not limited to work!

 
That's it.