14. Gulp와 프론트엔드 개발 - 1

CSS 전처리기 (Sass, Less) 사용

프론트엔드 개발에서 CSS 전처리기는 스타일 시트 작성을 더 효율적으로 만들어주는 강력한 도구 중 하나입니다. Sass와 Less는 가장 널리 사용되는 CSS 전처리기 중 두 가지입니다. 이번 챕터에서는 Gulp.js를 사용하여 프로젝트에 Sass 또는 Less를 통합하고, 이를 효과적으로 활용하는 방법에 대해 살펴보겠습니다.

1. Gulp에서 Sass 통합하기

먼저, Sass를 Gulp에 통합하는 방법을 알아봅시다. 필요한 패키지를 설치합니다.

npm install --save-dev gulp gulp-sass

 

그리고 Gulp 작업을 설정합니다.

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

gulp.task('compile-sass', function () {
  return gulp.src('src/scss/**/*.scss') // Sass 파일의 경로
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css')); // 컴파일된 CSS를 저장할 경로
});

 

위의 코드는 src/scss 디렉토리 내의 모든 Sass 파일을 컴파일하고 dist/css 디렉토리에 저장합니다.

2. Gulp에서 Less 통합하기

이제 Less를 Gulp에 통합하는 방법을 살펴봅시다. 필요한 패키지를 설치합니다.

npm install --save-dev gulp gulp-less

 

그리고 Gulp 작업을 설정합니다.

const gulp = require('gulp');
const less = require('gulp-less');

gulp.task('compile-less', function () {
  return gulp.src('src/less/**/*.less') // Less 파일의 경로
    .pipe(less())
    .pipe(gulp.dest('dist/css')); // 컴파일된 CSS를 저장할 경로
});

 

위의 코드는 src/less 디렉토리 내의 모든 Less 파일을 컴파일하고 dist/css 디렉토리에 저장합니다.

3. Watch 모드에 통합

변경 사항을 감지하고 자동으로 Sass 또는 Less를 컴파일하는 Watch 모드를 설정해봅시다.

gulp.task('watch-sass', function () {
  gulp.watch('src/scss/**/*.scss', gulp.series('compile-sass'));
});

gulp.task('watch-less', function () {
  gulp.watch('src/less/**/*.less', gulp.series('compile-less'));
});

 

이제 gulp watch-sass 또는 gulp watch-less 명령을 사용하여 Watch 모드를 실행할 수 있습니다. 변경 사항이 감지되면 자동으로 Sass 또는 Less를 컴파일합니다.

4. 결론

이번 챕터에서는 Gulp.js를 사용하여 프로젝트에 Sass 또는 Less를 통합하는 방법을 살펴보았습니다. Sass와 Less는 변수, 중첩 규칙, 믹스인 등의 강력한 기능을 제공하여 스타일 시트 작성을 더욱 효율적으로 만들어줍니다. Watch 모드를 통해 변경 사항을 실시간으로 감지하고 자동으로 컴파일하여 개발 생산성을 향상시킬 수 있습니다.