日本語에서 번역 • 원문 보기 전통적으로 웹 프론트엔드의 주요 자산인 CSS와 자바스크립트는 소스 수준에서 관리하기 어렵고, 빠르게 혼란스러운 영역에 들어가 유지보수가 어려워졌습니다. 이 혼란스러운 영역에서 CSS와 자바스크립트를 소스 수준에서 유지·관리하기 쉽게 만들기 위해 Grunt and Gulp라는 컴파일 빌드 메커니즘이 만들어졌습니다. 오늘날 프론트엔드 개발의 기본 개발 방식은 CSS(SASS, LESS 등), CoffeeScript 등으로 CSS와 JavaScript 코딩을 간소화하는 동시에 소스를 유지하고 관리하는 것을 용이하게 만드는 것입니다. 실제로 LESS에서 변수를 사용해 CSS를 스타일링하거나 코드량이 매우 적은 CoffeeScript로 JavaScript를 작성하면, 압도적인 높은 코드 생산성 덕분에 이전의 견고한 프론트엔드 코딩 방식을 더 이상 바꿀 필요가 없어지는 상황에 처하게 됩니다. ── 그렇긴 해도, 저는 CSS/JavaScript 컴파일 환경을 만들고 CentOS 서버 위에 서비스 제공을 위해 빌드하고 싶습니다(CSS/JavaScript를 Windows 머신에 로컬 개발 환경으로 소개하는 내용은 이 글을 참고하세요).
참고로, Gulp는 'Gulp'로 읽혀요. 처음에는 '그룹' 같은 뜻으로 읽었어요... (웃음)
설치 Node.js
우선, Gulp는 node.js 모듈이기 때문에 node.js 설치하지 않으면 시작되지 않습니다. 그래서 node.js을 설치할 예정이지만, 먼저 node.js와 라이브러리를 위한 버전 관리 모듈인 nvm에서 설치할 예정입니다. GitHub에서 nvm을 복제해서 아래에 보이는 대로 포함된 셸에 설치하세요.
$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ . ~/.nvm/nvm.sh
다음으로 node.js을 설치하세요. 그 전에 Node.js 공식 웹사이트 에서 현재 node.js의 안정 버전을 확인하세요. 상단 페이지 중앙에 "현재 버전: v0.12.2"라고 적혀 있으니, 그 버전을 안전하게 설치할 수 있습니다(2015년 4월 7일 기준 안정 버전은 0.12.2 Node.js). 설치 버전을 결정하면 NVM으로 설치하세요.
$ NVM install v0.12.2
$ 노드 -v
v0.12.2
버전을 확인하고 설치 버전이 표시되어 있으면 괜찮습니다. 마지막으로, .bashrc에 다음 문장을 추가해서 node.js가 제 콘솔 환경에서 사용할 수 있도록 하겠습니다.
$ vim .bashrc
$ 캣 .bashrc
# .bashrc
# 출처 전 세계 정의
만약 [ -f /etc/bashrc ]; 그렇다면
. /etc/bashrc
Fi
# 사용자 전용 별칭과 기능
. ~/.nvm/nvm.sh
NVM v0.12.2를 사용하세요
export NODE_PATH=${NVM_PATH}_modules
번들에 설치된 npm 버전도 확인해보겠습니다.
$ NPM -v
2.7.4
Node.js 설치가 완료되었습니다.
걸프 설치
그 다음 Gulp를 전역적으로 설치하세요.
$ NPM 설치 -g 꿀꺽
$ 글럽 -v
[**:**:**] CLI 버전 3.8.11
설치가 완료되었습니다. 쉽죠?
다음으로, 로컬에 설치하세요. 로컬에 설치하려면 npm을 초기화해야 합니다. 먼저, gulp를 실행할 디렉터리를 만듭니다. 이 글에서는 홈 디렉터리에 '~/gulp_build'라는 새 디렉터리를 만들 예정입니다.
$ mkdir -p gulp_build
$ CD gulp_build
$ NPM init
이 유틸리티는 package.json 파일을 만드는 과정을 안내해 드립니다.
가장 흔한 항목만 다루고, 정상적인 기본값을 추측하려고 합니다.
이 필드들에 대한 확실한 문서는 'npm help json'을 참조하세요
그리고 그들이 하는 일도 정확히 무엇인가.
그 후에 'npm install <pkg> --save'를 사용해 패키지를 설치하고,
package.json 파일에 의존성으로 저장하세요.
언제든지 ^C 버튼을 눌러 그만두세요.
이름: (gulp_build) gulp_build
버전: (1.0.0)
설명: 삼키-빌드-테스트
진입 지점: (index.js)
테스트 명령:
git 저장소:
키워드: 꿀꺽
저자: 마에노
라이선스: (ISC) MIT
/home/maenok/gulp_build/package.json에 글을 쓰려던 참입니다:
{
"이름": "gulp_build",
"버전": "1.0.0",
"설명": "삼키-빌드-테스트",
"main": "index.js",
"스크립트": {
"test": "echo \"오류: 테스트 지정되지 않음\" & 출구 1"
},
"키워드": [
"꿀꺽"
],
"작가": "마에노",
"면허": "MIT"
}
이거 괜찮아? (응) 응
인터랙티브로 속성 값을 입력하라는 요청을 받으니, 임의로 입력할 수 있습니다(모두 Enter로 입력할 수 있습니다). 초기화가 완료되면 로컬에서 gulp를 설치하세요.
$ NPM install gulp --save-dev gulp gulp-util
$ 꿀꺽 -V
[**:**:**] CLI 버전 3.8.11
[**:**:**] 로컬 버전 3.8.11
'--save-dev' 옵션은 gulp의 개발 패키지를 설치할지 여부를 지정하므로 특별히 추가할 필요가 없습니다. Gulp가 이제 사용 가능합니다.
Gulp와 함께 컴파일
1. SASS 컴파일
QULP로 SASS를 컴파일하려면 SASS 플러그인이 필요하니 설치하세요.
$ NPM install Gulp-sass --save-dev
설치가 완료되면 컴파일되는 CSS 소스 파일을 생성합니다.
$ mkdir 새스 | vi 새스/스타일.SCSS
$ 캣 새스/style.scss
a {
색상: #88f;
&:호버 {
텍스트 장식: 없음;
}
}
다음으로, 컴파일 작업을 생성하세요. 로컬에서 gulp을 설치한 디렉터리 바로 아래에 'gulpfile.js'(예시에서 '~/gulp_build')를 만듭니다.
$ vi ~/gulp_build/gulpfile.js
$ 고양이 ~/gulp_build/gulpfile.js
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('꿀꿀하');
gulp.task('sass', function() {
gulp.src('sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
작업이 완료되면 바로 컴파일을 실행합시다.
$ 꿀꺽 건방진
[**:**:**] gulpfile 사용 중이야 ~/gulp_build/gulpfile.js
[**:**:**] '건방짐' 시작...
[**:**:**] 'sass'를 19ms 만에 끝냈습니다
이제 컴파일된 CSS 파일을 내보내서 'CSS' 폴더가 만들어졌습니다. CSS 파일 안을 보면 알 수 있습니다
a {
색상: #88f; }
a:호버 {
텍스트 장식: 없음; }
오~, 제대로 만들어졌네요. 이제 Gulp + SASS 컴파일 환경을 구현했습니다. 다음으로, 컴파일 환경이 적은 것을 만들어 보겠습니다.
2. 컴파일 더 적게 만들기
기본적으로 SASS처럼 자연스럽게 진행될 것입니다. 즉, QULP에서 컴파일하려면 LESS 플러그인이 필요하니 설치하세요.
$ NPM install Gulp-less --save-dev
설치가 완료되면 컴파일되는 CSS 소스 파일을 생성합니다.
$ mkdir less | vi less/style.less
$ 고양이 줄/스타일.less
@link색: #88f;
a {
색상: @link색;
&:호버 {
텍스트 장식: 없음;
}
}
이것은 CSS 사전 컴파일된 환경에서 가장 유용할 수 있는 스타일로 속성 값을 변수로 사용하는 예입니다.
그 다음 컴파일 작업을 생성하세요. 로컬에서 gulp를 설치한 디렉터리 바로 아래에 있는 'gulpfile.js'을 편집하세요(이 예시에서는 '~/gulp_build').
$ vi ~/gulp_build/gulpfile.js
$ 고양이 ~/gulp_build/gulpfile.js
var gulp = require('gulp');
var gutil = require('gulp-util');
var less = require('꿀꺽 빠짐 없이');
gulp.task('less', function() {
gulp.src('적음/**/*.적음')
.pipe(less())
.pipe(gulp.dest('./css'));
});
이제 대상 소스를 'less/' 아래에 있는 모든 '.less' 파일로 설정합시다. 작업이 완료되면 바로 컴파일을 실행하겠습니다.
$ 삼키지 마라
[**:**:**] gulpfile 사용 중 ~/gulp_build/gulpfile.js
[**:**:**] '덜' 시작하면...
[**:**:**] 21ms 후에 '덜' 끝냈습니다
이제 컴파일된 CSS 파일이 'CSS' 폴더로 내보내졌습니다. CSS 파일 안을 보면 알 수 있습니다
$ 고양이 CSS/style.css
a {
색상: #8888ff;
}
a:호버 {
텍스트 장식: 없음;
}
LESS 컴파일이 더 낫습니다. 들여쓰기가 SASS 컴파일보다 더 잘 포맷되어 있기 때문입니다.
3. 커피스크립트 컴파일
방법은 위에서 언급한 SASS와 거의 같지 않으며, 사용하는 플러그인만 다릅니다. 먼저, CoffeeScript 컴파일용 플러그인을 설치하세요.
$ NPM install Gulp-coffee --save-dev
설치 후에는 원본 CoffeeScript 파일을 생성합니다.
$ mkdir 커피 | vi 커피/스크립트.커피
$ 고양이 커피/스크립트.커피
홈 = ->
$('.button').on 'click', (e) ->
e.preventDefault()
if window.confirm: "확실해요?"
$(@).trigger '클릭'
그렇지 않으면
Return false
$(document).ready(Home)
샘플의 내용은 jQuery 코드입니다. '.button' 클래스 요소를 클릭하면 이벤트 핸들러가 확인 대화상자를 생성합니다.
그 다음 컴파일 작업을 생성하세요. 로컬에서 gulp를 설치한 디렉터리 바로 아래에 있는 'gulpfile.js'을 편집하세요(이 예시에서는 '~/gulp_build').
var gulp = require('gulp');
var gutil = require('gulp-util');
var coffee = require('꿀꺽 커피');
gulp.task('커피', function() {
gulp.src('커피/**/*.커피')
.pipe(coffee())
.pipe(gulp.dest('./js'));
});
대상 소스는 'coffee/' 아래에 있는 모든 'coffee' 파일입니다. 바로 컴파일링을 실행합시다.
$ 커피 꿀꺽
[**:**:**] gulpfile 사용해 ~/gulp_build/gulpfile.js
[**:**:**] '커피' 시작...
[**:**:**] 26ms 만에 '커피'를 완료했습니다
이제 'js' 폴더에 컴파일된 JavaScript 파일이 내보내졌습니다. JavaScript 파일 안을 보면 알 수 있습니다
(함수() {
var Home;
홈 = 함수() {
return $('.button').on('click', function(e) {
e.preventDefault();
if (window.confirm("확실한가요?")) {
return: $(this).trigger('click');
} 그렇지 않으면 {
return false;
}
});
};
$(document).ready(Home);
}).call(this);
좋아!
참고로 Gulp 플러그인들은 서로 공존할 수 있어서, 각 작업을 'gulpfile.js'로 통합하면 SASS, LESS, CoffeeScript 전체를 컴파일할 수 있는 환경을 만들 수 있습니다. 또한, Gulp 플러그인에는 기본적으로 정의되어야 하는 유효한 플러그인들이 꽤 있으니(예: 자동 공급업체 접두사 부여 및 미니파이잉 등), 사용 상황에 따라 검색하는 것이 좋습니다.
이로써 CSS와 자바스크립트는 GitHub 및 기타 플랫폼에서 관리 및 개발되고, 소스는 CentOS 서버와 같은 서비스 환경 측에서 사전 컴파일되어 배포되는 현대적인 웹 서비스 환경을 갖추게 되었습니다.