Today I’ll introduce the first step of Gulp.

As first step, let’s try to compile SCSS file by using Gulp.

Step 1

First, create npm project.

$ mkdir gulp-first-step
$ cd gulp-first-step
$ npm init

Step 2

Next, install gulp and gulp-sass, and install http-server too for debug.

$ npm install gulp gulp-sass http-server

Step 3

Create index.html and style.scss.

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Gulp First Step</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Gulp First Step</h1>
  </body>
</html>

// style.scss
body {
  h1 {
    color: red;
  }
}

Step 4

Next, create gulpfile.js in project directory top.

// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('scss', () => {
  gulp.src('*.scss')
    .pipe(sass())
    .pipe(gulp.dest(''));
});

Step 5

OK, let’s execute gulp task.

Then you can find style.css created.

$ gulp scss
$ cat style.css
body h1 {
  color: red; }

Step 6

Finally, start http server, and let’s access http://127.0.0.1:8080 by your browser.

$ hs

You can see that css is effective rightly.