gulp.js

npm i gulp gulp-sass sass --save-dev

• gulp, gulp-sass, sass 설치하기
  - --save-dev의 경우 devDependencies에 저장한다는 뜻이다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },

• package.json 파일에 gulp 사용을 위해 추가해 준다.
• gulpfile.js 파일을 만들고, scss → css 에 관련된 코드를 적어준다.

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));

function buildtyles() {
  return src('index.scss')
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(dest('css'))
}

function watchTask() {
  watch(['index.scss'],buildtyles)
}

exports.default = series(buildtyles, watchTask);

• src() : source
• dest() : destination
• watch() : npm의 --watch와 같은 기능
• series() : task function을 이어 준다.
• pipe() : chaining의 역할을 해준다.
• outputStyle: 'compressed' 입력 시, css를 minify하게 해줌.

유용한 plugin

• gulp-autoprefixer : CSS prefix를 붙여준다.