gulp

gulp는 javascript 기반의 자동화 빌드 툴이다.
반복적으로 하게 되는 작업 javascript,css를 minification나 scss 컴파일 같은 반복적 작업들을 자동적으로 처리해주는 자동화 빌드 시스템이다.

설치

npm i gulp --save-dev

// 기본 gulp 말고도 각종 기능들이 있는 다양한 플러그인을 제공한다.
npm i gulp-sass --save-dev, ----컴파일 하기 위해 설치----
npm i gulp-sourcemaps --save-dev ----소스맵 (map파일)----

gulpfile.js

gulp의 설정이 담겨지는 js파일을 생성 해 준다.
파일 이름은 반드시 gulpfile이여야 함.

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', () => {
    return gulp.src('./style.scss')    // scss 파일 경로 설정
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(sourcemaps.write('./'))   // 컴파일 된 css map 파일 저장될 경로 설정
        .pipe(gulp.dest('./'));   // 컴파일 된 css 파일 저장될 경로 설정
})

// 컴파일 상시 감시
gulp.task('watch', () => {
    gulp.watch('./style.scss', gulp.series('sass'));
});

gulp.task('default', gulp.series('sass', 'watch'));

실행

packge.json의 scripts 부분에 추가

"scripts": {
	"gulp": "gulp"
}

npm run gulp

혹은 그냥 추가 하지 않고

npx gulp

이런 식으로 터미널에서 실행 하면 된다.