[Node.js] Gulp 따라해보기 - (1)

Gulp는 워크 플로우 자동화 도구인데 예전에 한 번 봤다가 이번에는 제대로 한 번 개념이라도 잡고 가야할 것 같아 튜토리얼을 따라하면서 정리 및 예제에서 동작되지 않는 코드를 빌드할 수 있게끔 수정한 내용을 정리하고자 한다. 

※ 참고(튜토리얼) : https://css-tricks.com/gulp-for-beginners/

1. Gulp 설치(맥 유저만 sudo 씀)

$ sudo npm install gulp -g

2. 해당 프로젝트 폴더로 가서 Gulp 모듈 설치

$ npm install gulp --save-dev

3. 튜토리얼 쪽 폴더 구조를 만듦(node_modules랑 package.json은 이미 존재하므로 다른 파일과 폴더만 만들면 됨)

|- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

4. Gulp 모듈 로드 및 Gulp 작업 생성하기(단 그냥 console.log를 찍는 것을 하면 에러만 나오게 되는데 4.x 버전에서는 Stream, Promise, Callback, ChildProcess, EventEmitter, RxJs의 Observable이 필요함 <- 아래는 간단하게 async로 처리하는 방법)

※ 참고 : https://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async

아래 내용을 gulpfile.js에 입력

var gulp = require('gulp');
 
gulp.task('hello', async function() {
  // Stuff here
 
  console.log('Hello Zell');
});

$ gulp hello

위 명령을 입력하면 Hello Zell이 콘솔에 출력되는 것을 볼 수 있음

5. app/scss/styles.scss를 통해 app/css/style.css을 만드는 작업을 설정하는 코드임

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
});

app/scss/styles.scss에 아래 내용을 입력한 뒤 밑의 명령인 'gulp sass'를 실행하면 app/css/styles.css에서 다음 내용을 확인할 수 있음

// styles.scss
.testing {
  width: percentage(5/7);
}

$ gulp sass

/* styles.css */
.testing {
  width: 71.42857%; 
}

To be continue.....