오래 전에 gulp 관련 포스팅을 하고 그 글을 보고 다시 한번 사용해 보려고 진행하는 데 달라진 점이 몇개 있어서 그냥 새로 공부한다 생각하고 플로그인 설치 및 사용을 정리해 보았다.

일단 gulp 부터 설치하자

npm install --save-dev gulp

이어서 사용할 플러그인들을 설치하자

npm install --save-dev gulp-uglify, gulp-sass, gulp-minify-css, del, browser-sync

• gulp-uglify : js 압축
• gulp-sass : SCSS 컴파일
• gulp-minify-css : css 압축
• del : 파일 삭제,
• browser-sync : 서버화 시키기

이번에 셋팅한 목적은 scss 컴파일하고 기본적인 자바스크립트가 적용되며 로컬호스트로 서버화 시킨 뒤 css나 html, js 파일이 수정되면 브라우저에 자동으로 적용되게 하여 개발 작업을 용이하게 하려고 함이다.

이제 gulp 설정할 파일 gulpfile.js 를 생성해서 상단에 아래와 같이 정의한다.

var gulp = require('gulp'),
      uglify = require('gulp-uglify'),
      sass = require('gulp-sass'),
      minificss = require('gulp-minify-css'),
      del = require('del'),
      browserSync = require('browser-sync').create();

개발용 코드를 저장할 폴더 위치와 배포할 파일들의 위치 정의를 한다.
이 부분은 개인의 취향이니 스스로 판단하여 설정한다.

var devsrc = '.';
var pubsrc = '.';
var paths = {
    "dev" : {
        "css" : './scss/*.scss',
        "js" : './dev/js/*.js',
        "html" : './*.html'
    },
    "pub" : {
        "css" : pubsrc,
        "js" : pubsrc + '/js',
        "html" : pubsrc
    }
};

부득이 워드프레스 스킨 만들면서 서버로 싱크 맞추기 위해 위와 같이 설정했다.
폴더 구조는 스스로 설정함을 추천한다.

html 파일에 대한 처리

gulp.task('gulp_html', function(){
    return gulp.src(paths.dev.html)
    .pipe(browserSync.reload({ stream : true }));
});

js 파일에 대한 처리

gulp.task('gulp_js', function(){
      return gulp.src(paths.dev.js, {sourcemaps: true})
      .pipe(gulp.dest(paths.pub.js))
      .pipe(browserSync.reload({ stream : true }));
});

scss,css 에 대한 처리

gulp.task('gulp_css', function(){
      return gulp.src(paths.dev.css)
      .pipe(sass().on('error', sass.logError))
      .pipe(minificss())
      .pipe(gulp.dest(paths.pub.css))
      .pipe(browserSync.reload({ stream : true }));
});

이제 파일 변화를 감지하는 watch 넣기

gulp.task('gulp_watch', function(){
      gulp.watch(paths.dev.css, gulp.series('gulp_css'));
      gulp.watch(paths.dev.js, gulp.series('gulp_js'));
      gulp.watch(paths.dev.html, gulp.series('gulp_html'));
});

배포 파일 만들기 전 기존에 번들링된 파일 삭제하려고 아래처럼 삽입한다.

gulp.task('clean', function(){
    del([pubsrc + '/*.css']);
    del([pubsrc + '/js/*.js']);
});

이렇게 하면 배포 폴더 안의 css와 js 파일들을 다 지운다.

이제 로컬호스트를 실행해서 서버로 동작하게 만든다.

gulp.task('browserSync', function () {
      return browserSync.init({ port : 8001, server: { baseDir: './' } });
});

이제 cmd에서 gulp를 실행하면 개발 서버가 동작하여 번들링이 되며 로컬호스트로 개발 작업을 할 수 있게 하거나 gulp dev를 실행하면 기존 번들링 파일들을 삭제하고 새로이 번들링하도록 하는 코드를 삽입한다.

gulp.task('default', gulp.parallel('browserSync', 'gulp_html', 'gulp_css', 'gulp_js', 'gulp_watch'));
gulp.task('dev',gulp.parallel('clean','browserSync', 'gulp_html', 'gulp_css', 'gulp_js', 'gulp_watch'));

위 코드들 중에는 gulp.series 또는 gulp.parallel을 넣어 실행을 병렬로 할 것이냐 직렬로 할 것이냐가 버전 4 이상부터 적용되었다. 그래서 예전처럼 안썼다가는 gulp 오류가 난다.