풀스택 개발자를 위한 MEAN 스택 입문 4. gulp

gulp 모듈을 Mac OS에 설치하는 경우 책에서는 언급하지 않는 오류가 있다.

1. gulp 설치

npm config set prefix /usr/local

npm install gulp gulp-cli --global

npm install gulp gulp-cli --save

보통 예제들은 첫 번째 커맨드 없이 gulp 설치를 안내하는데 내 경우는 npm이 잘못 깔린 건지 명령만으로는 gulp가 정상적으로 작동하지 않아 별도로 명령을 추가했다. npm이 모듈을 설치할 때 강제로 해당 prefix를 이용하도록 한다. (Mac OS 키워드로 검색되는 결과가 많은 걸로 보아 OS의 특성인 것도 같다.)

2. gulpfile.js 작성

var gulp = require('gulp');
 
gulp.task('griting', function () {
    console.log('hello, gulp!')
});
 
gulp.task('default', function () {
    gulp.start('griting')
});

걸프가 어떻게 작동하는지 코드만 봐도 짐작하리라 생각된다.

파일명을 바꾸지 않도록 주의한다.

3. gulp 실행

gulp

예제나 기타 웹 자료에서는 gulp {파일명} 인 경우가 많았으나 실제로 해당 커맨드를 실행하면 gulpfile.js의 포맷팅이 적절하지 않다고 출력된다. (이것도 OS의 문제인지, 내가 잘못 설치한 탓인지 짐작도 가지 않는다.)

실행 결과는 아래와 같다.

 

4. 복수의 css 파일 통합

걸프는 파이프/스트림을 활용하는 아키텍처의 비동기식 작업 실행기다. 스트림 기반의 빌드 시스템이라고도 하던데, 나는 책에서 언급한 복수의 css 파일을 통합해 min 버전을 출력하는 걸프 코드를 소개하려 한다.

코드 작성에 앞서 필요한 걸프 플러그인을 설치한다.

npm install gulp-stylus gulp-concat --save

설치가 끝났다면 임의의 styl 파일 두 개를 작업 경로/assets/ 아래에 작성하자. 스타일러스가 낯선 사람은 아주 간략한 수준의 css를 확장자만 styl로 바꾸어 작성하도록 한다. 나는 스타일러스가 낯설었기 때문에 아래와 같이 작성했다.

#table1 {
    text-align: center
    
}

▲ ./assets/sample1.styl

#table2 {        text-shadow: 0ch}

▲ ./assets/sample2.styl

공백 압축이 적절하게 이루어지는지 알고 싶었기 때문에 의도적으로 포맷팅을 적용하지 않았다.

다음은 두 개의 스타일러스를 css로 컴파일 후 하나의 min 버전 css로 출력하는 걸프 스크립트다.

var gulp = require('gulp')
var stylus = require('gulp-stylus')
var concat = require('gulp-concat')
gulp.task('css', function () {
    gulp.src('./assets/*.styl')
        .pipe(stylus({
            compress: true
        }))
        .pipe(concat('main.min.css', {
            newLine: ' '
        }))
        .pipe(gulp.dest('./public/stylesheets'))
})
gulp.task('default', function () {
    console.log('test')
    gulp.start('css')
})

▲ gulpfile.js

해당 코드는 assets 경로 아래 모든 styl 파일을 압축 후 public/stylesheets 경로 아래 main.min.css로 출력한다.

실행 결과로 생성된 main.min.css의 내용은 다음과 같다.

#table1{text-align:center} #table2{text-shadow:0}

깔끔하게 압축된 것을 확인할 수 있다.

5. 파일 변경 감시 처리

보통 개발자라면 원본 파일 수정 후 gulp를 매번 직접 수행하고 싶지는 않을 것이다.

이제 작업 경로를 늘 감시하다 파일이 변경되면 자동적으로 원하는 태스크를 수행하는 걸프 코드를 작성해보자.

gulp.task('watch', function () {
    gulp.watch('./assets/*.styl', ['css'])
})
 
gulp.task('default', function () {
    gulp.start('watch')
})

이제 gulp를 실행하면 종료하지 않는 이상은 프로세스가 계속 지정한 경로를 감시할 것이다.

상기 코드는 assets 아래에 위치한 styl 확장자를 가진 모든 파일의 변화를 감시하고, 변화가 있을 때마다 'css' 태스크를 실행한다.

개발자는 minify와 concat을 위해 최초의 스크립트만 작성하면 되는 것이다.

 

이전 회사에서 사이트 최적화 작업 때 min 파일을 수기로 만든 기억이 있는데 역시 개발자는 공부만이 답이라는 걸 알 수 있다. 지식이 없으면 손발이 고생하는 건 만고불변의 진리인가 싶다.

추가로 css를 대상으로 한 플러그인도 여럿 있는 듯하니 필요한 사람은 찾아보도록 하고 기타 걸프 상세는 공식 문서를 참고하기를 추천한다. 언제든 역시 공식 레퍼런스가 최고다…. 책에서는 javascript 압축 예제도 안내하고 있으니 관심 있는 사람은 책도 읽어보자.