1. 소개

Node.js와 gulp를 사용하여 Sass의 사용 환경을 로컬 PC에 구축했을 때의 절차를 비망록으로 작성합니다.
Mac을 사용하여 빌드했습니다.

2. 절차

아래 절차를 따라 진행하십시오.

2-1.Node.js 설치

Node.js의 공식 사이트 에서 설치 프로그램을 DL합니다.
※이번은 추천판을 인스톨합니다.


설치 프로그램을 시작합니다.


계속을 누르십시오.


계속을 누르십시오.


설치를 누르십시오.


설치가 완료되면 닫기를 누르십시오.


터미널을 시작하고 다음 명령을 실행하여 Node.js가 설치되어 있는지 확인합니다.node -v

vX.X.X

Node.js 버전이 표시되면 설치가 성공적으로 완료된 것입니다.

2-2.gulp 설치

다음 명령을 실행하여 gulp-cli를 설치합니다.
■Windowsnpm i -g gulp-cli■Macsudo npm i -g gulp-cli
프로젝트를 만들 폴더를 새로 만듭니다.
여기에서는 예로 "sass_test"라는 폴더를 만듭니다.

[sass_test]

위의 디렉토리로 이동합니다.cd 〜
package.json을 만듭니다.npm init -y현재 디렉토리에 package.json이 작성되면 성공입니다.

[sass_test]
  ∟package.json

다음 명령을 실행하여 gulp를 설치합니다.npm i -D gulp현재 디렉토리에 node_modules 폴더와 package-lock.json이 만들어지면 성공합니다.

[sass_test]
  ∟[node_modules]
  ∟package-lock.json
  ∟package.json

아래 명령을 실행하여 gulp-sass를 설치합니다.npm i -D gulp-sass
아래 명령을 실행하여 gulp이 설치되어 있는지 확인합니다.gulp -v

[23:46:32] CLI version X.X.X
[23:46:32] Local version X.X.X

gulp 버전이 표시되면 설치가 성공적으로 완료된 것입니다.

gulpfile.js를 만듭니다.
컴파일 결과 CSS 들여쓰기 규칙은 outputStyle에서 지정할 수 있습니다.
아웃풋 스타일은 「nested」, 「expanded」, 「compact」, 「compressed」의 4 종류가 있습니다.
실제 출력 예는 아래쪽에 기재되어 있습니다.

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

// Sassをコンパイルする処理
gulp.task('sass', function() {
  // コンパイル元ディレクトリ
  return gulp.src('./sass/**/*.scss')
    // アウトプットスタイル
    .pipe(sass({outputStyle: 'expanded'}))
    // コンパイル先ディレクトリ
    .pipe(gulp.dest('./css'));
});

여기까지, 아래와 같은 디렉토리 구성으로 되어 있을까 생각합니다.

[sass_test]
  ∟gulpfile.js
  ∟[node_modules]
  ∟package-lock.json
  ∟package.json

2-3.Sass 컴파일

방금 만든 프로젝트 폴더에 새 "sass"폴더를 만들고 그 안에 새 .scss 파일을 만듭니다.

sample.scss

header {
  position: fixed;
  margin: 0 auto;
  padding: 0;
  .inner {
    padding: 0 4%;
    position: relative;
  }
  .h-logo-box {
    display: flex;
    height: 56px;
    width: 160px;
    align-items: center;
    h1 {
      font-size: 14px;
      a {
        display: block;
        img {
          width: 100%;
        }
      }
    }
  }
}

아래와 같은 디렉토리 구성으로 되어 있을까 생각합니다.

[sass_test]
  ∟gulpfile.js
  ∟[node_modules]
  ∟package-lock.json
  ∟package.json
  ∟[sass]
    ∟sample.scss

다음 명령을 실행하여 컴파일을 수행합니다.gulp sass
프로젝트 폴더 안에 css 폴더가 새롭게 작성되고, 그 안에 sample.css가 작성되어 있으면 성공입니다.
출력 스타일은 gulpfile.js에서 지정한 다음 네 가지 유형 중 하나입니다.

sample.css(nested)

header {
  position: fixed;
  margin: 0 auto;
  padding: 0; }
  header .inner {
    padding: 0 4%;
    position: relative; }
  header .h-logo-box {
    display: flex;
    height: 56px;
    width: 160px;
    align-items: center; }
    header .h-logo-box h1 {
      font-size: 14px; }
      header .h-logo-box h1 a {
        display: block; }
        header .h-logo-box h1 a img {
          width: 100%; }

sample.css(expanded)

header {
  position: fixed;
  margin: 0 auto;
  padding: 0;
}

header .inner {
  padding: 0 4%;
  position: relative;
}

header .h-logo-box {
  display: flex;
  height: 56px;
  width: 160px;
  align-items: center;
}

header .h-logo-box h1 {
  font-size: 14px;
}

header .h-logo-box h1 a {
  display: block;
}

header .h-logo-box h1 a img {
  width: 100%;
}

sample.css(compact)

header { position: fixed; margin: 0 auto; padding: 0; }

header .inner { padding: 0 4%; position: relative; }

header .h-logo-box { display: flex; height: 56px; width: 160px; align-items: center; }

header .h-logo-box h1 { font-size: 14px; }

header .h-logo-box h1 a { display: block; }

header .h-logo-box h1 a img { width: 100%; }

sample.css(compressed)

header{position:fixed;margin:0 auto;padding:0}header .inner{padding:0 4%;position:relative}header .h-logo-box{display:flex;height:56px;width:160px;align-items:center}header .h-logo-box h1{font-size:14px}header .h-logo-box h1 a{display:block}header .h-logo-box h1 a img{width:100%}

2-4.Sass 변경 모니터링

Sass를 업데이트 할 때마다 컴파일 명령을 치는 것은 매우 번거롭습니다.
그래서 gulp에게 Sass가 업데이트되면 자동으로 컴파일을 받도록 합니다.
gulpfile.js에 다음 처리를 추가합니다.

gulpfile.js

// Sassの変更を監視する処理
gulp.task('sass:watch', function() {
  // 変更があればSassをコンパイルする処理を実行する
  gulp.watch('./sass/**/*.scss', ['sass']);
});

다음 명령을 실행합니다.gulp sass:watch
Sass를 업데이트 할 때마다 CSS에 업데이트가 반영되면 성공입니다.

모니터링을 중지하려면 Ctrl + C를 누릅니다.

참고

웹 제작자를 위한 Sass 교과서

거꾸로 Gulp.js 입문(Mac용)