Gulp.js 치트시트 (스트리밍 빌드 자동화 도구)

Gulp는 개발 워크플로우와 애셋 변환 파이프라인을 자동화하는 Node.js 기반 스트리밍 태스크 러너입니다.

주요 플러그인 목록 (Common Plugins)

• gulp-sass: SASS / SCSS compiler
• gulp-autoprefixer: Prefix CSS with vendor properties
• gulp-clean-css: CSS minifier
• gulp-jshint / gulp-eslint: JavaScript linter
• gulp-concat: Concatenate files into single bundles
• gulp-uglify: JavaScript minifier
• gulp-imagemin: Optimize image files
• gulp-rename: Rename files with prefixes or suffixes
• gulp-notify: Desktop notifications on build completion

---

전체 gulpfile.js 구성 예제

// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const jshint = require('gulp-jshint');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const concat = require('gulp-concat');

// Styles Task: Compile SCSS, Autoprefix, Minify
gulp.task('styles', function () {
  return gulp.src('src/styles/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ overrideBrowserslist: ['last 2 versions'] }))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/styles'));
});

// Scripts Task: Lint, Concatenate, Uglify
gulp.task('scripts', function () {
  return gulp.src('src/scripts/**/*.js')
    .pipe(jshint())
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/scripts'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/scripts'));
});

// Watch & Default Task
gulp.task('watch', function () {
  gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
  gulp.watch('src/scripts/**/*.js', gulp.series('scripts'));
});

gulp.task('default', gulp.parallel('styles', 'scripts'));

---

관련 치트시트

• Rollup.js
• Sass
• package.json