Gulp ─ Windows를 이용한 CSS/JavaScript 컴파일 환경 구축

日本語에서 번역 • 원문 보기

지금은 강한 느낌이 들지만, 세상에서는 CSS(SASS, LET 등), CoffeeScript 등을 사용해 프론트엔드 개발에서 CSS와 JavaScript 코딩의 효율성을 높이고, 동시에 소스 유지 관리와 관리를 더 쉽게 만드는 개발 방법이 표준이 되었습니다. 저는 예전에는 이 부분에 매우 고집이 세서 CSS와 JavaScript를 원시로 코딩했지만, 최근 Ruby on Rails 개발에서 CoffeeScript로 JavaScript를 작성하려 했을 때, 코드 생산성이 너무 높아져서 이전의 견고한 프론트엔드 코딩 방식을 바꿀 수밖에 없었습니다(아니, 드디어...). —— 그렇다고 말씀드리면, 저는 즉시 비즈니스 머신인 윈도우 머신에서 CSS/JavaScript를 컴파일하고 구축할 수 있는 환경을 만들고 싶습니다(CentOS(리눅스) 환경에 웹 서비스 측면을 소개하는 내용은 이 글을 참고하세요).

게다가 Grunt 대신 Gulp를 선택한 이유는 요즘 트렌드가 Gulp일까 싶어서요... 모호한 이유지만, 설정 파일 작성이 Grunt보다 쉽고, 여러 자원 설정이 있어도 설정이 복잡해지지 않아요.

설치 Node.js

우선, Gulp는 node.js 모듈이기 때문에 설치하지 않으면 시작할 수 node.js. 그래서 node.js 설치하려고 합니다. 설치는 간단합니다. 공식 Node.js 웹사이트에서 설치 프로그램을 다운로드하면 됩니다. 제 전문 컴퓨터는 "Windows 7 (64비트 버전)"이었기 때문에 'node-v0.12.0-x64.msi' 파일은 자격이 있습니다(2015년 3월 4일 기준 Node.js 버전은 0.12.0입니다). 설치 프로그램을 다운로드하면 바로 시작하세요. 약간의 상호작용은 있겠지만, 특별히 신경 써야 할 설치 설정은 없습니다. 설치가 완료되면 명령 프롬프트(또는 전원 셸)에서 Node.js 버전을 확인하세요.

> 노드 -v
v0.12.0

번들에 설치된 npm 버전도 확인해보겠습니다.

> npm -v
2.5.1

Node.js 설치가 완료되었습니다.

걸프 설치

그 다음 Gulp를 전역적으로 설치하세요.

> npm install -g gulp
> glup -v
[**:**:**] CLI 버전 3.8.11

설치는 이제 완료되었습니다. 설치가 실패하면,

> npm install -g gulp --mscs_version=2012

—— 그리고 그 옵션이 작동할 수도 있습니다. 다음으로, 로컬에 설치하세요. 로컬에 설치하려면 npm을 초기화해야 합니다. 먼저, gulp를 실행할 디렉터리를 만듭니다. 이 글에서는 'C:\npm\node_modules\gulp'라는 새로운 디렉터리를 만들 것입니다.

> mkdir -p C:\npm\node_modules\gulp
> CD C:\npm\node_modules\gulp
> npm init
이 유틸리티는 package.json 파일을 만드는 과정을 안내해 드립니다. 
가장 흔한 항목만 다루고, 정상적인 기본값을 추측하려고 합니다

이 필드들에 대한 확실한 문서는 'npm help json'을 참조하세요
그리고 그들이 하는 일도 정확히 무엇인가. 

그 후에 'npm install --save'를 사용해 패키지를 설치하고,
package.json 파일에 의존성으로 저장하세요. 

언제든지 ^C 버튼을 눌러 그만두세요. 
이름: (꿀꺽) gulp_build
버전: (1.0.0)
설명: 삼키-빌드-테스트
진입 지점: (index.js)
테스트 명령: 
git 저장소: 
키워드: 꿀꺽
저자: 마에노
라이선스: (ISC) MIT
C:\npm\node_modules\gulp\package.json에게 편지를 쓰려던 참: 

{ 
"이름": "gulp_build", 
"버전": "1.0.0", 
"설명": "삼키-빌드-테스트", 
"main": "index.js", 
"스크립트": { 
"test": "echo \"오류: 테스트 지정되지 않음\" &amp; 출구 1" 
}, 
"키워드": [ 
"꿀꺽" 
], 
"작가": "마에노", 
"면허": "MIT" 
}

이거 괜찮아? (응) 응

인터랙티브로 속성 값을 입력하라는 요청을 받으니, 임의로 입력할 수 있습니다(모두 Enter로 입력할 수 있습니다). 초기화가 완료되면 로컬에서 gulp를 설치하세요.

> npm install gulp --save-dev
> 꿀꺽 -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 새스 | 터치 새스/스타일.SCSS

SCSS 파일 내용:

a { 
  색상: #88f; 
  &:호버 { 
    텍스트 장식: 없음; 
  }
}

다음으로, 컴파일 작업을 생성하세요. 로컬에서 gulp를 설치한 디렉터리 바로 아래에 'gulpfile.js'을 만듭니다(이 예시에서는 'C:\npm\node_modules\gulp').

var gulp = require('gulp'); 
var sass = require('꿀꿀하'); 

gulp.task('sass', function() { 
gulp.src('sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('./css')); 
});

작업이 완료되면 바로 컴파일을 실행합시다.

> 꿀꺽 웃음
[**:**:**] gulpfile C:npmnode_modulesgulpgulpfile.js
[**:**:**] '건방짐' 시작... 
[**:**:**] 'sass'를 6.5ms 만에 끝냈습니다

이제 컴파일된 CSS 파일을 내보내서 'CSS' 폴더가 만들어졌습니다. CSS 파일 안을 보면 알 수 있습니다

a { 
  색상: #88f; }
  a:호버 { 
    텍스트 장식: 없음; }

오~, 제대로 만들어졌네요. 이제 Gulp + SASS 컴파일 환경을 구현했습니다. 다음으로, 컴파일 환경이 적은 것을 만들어 보겠습니다.

2. 컴파일 더 적게 만들기

기본적으로 SASS처럼 자연스럽게 진행될 것입니다. 즉, QULP에서 컴파일하려면 LESS 플러그인이 필요하니 설치하세요.

> npm install gulp-less --save-dev

설치가 완료되면 컴파일되는 CSS 소스 파일을 생성합니다.

> mkdir less | 터치 레스/스타일.레스

파일 내용 감소:

@link색: #88f; 

a { 
  색상: @link색; 
  &:호버 { 
    텍스트 장식: 없음; 
  }
}

이것은 CSS 사전 컴파일된 환경에서 가장 유용할 수 있는 스타일로 속성 값을 변수로 사용하는 예입니다.

그 다음 컴파일 작업을 생성하세요. gulp를 로컬에 설치한 디렉터리 바로 아래에 있는 'gulpfile.js'을 수정하세요(이 예시에서는 'C:\npm\node_modules\gulp').

var gulp = require('gulp'); 
var less = require('꿀꺽 빠짐 없이'); 

gulp.task('less', function() { 
gulp.src('적음/**/*.적음')
.pipe(less())
.pipe(gulp.dest('./css')); 
});

이제 대상 소스를 'less/' 아래에 있는 모든 '.less' 파일로 설정합시다. 작업이 완료되면 바로 컴파일을 실행하겠습니다.

> 덜 삼키는 거
[**:**:**] gulpfile 사용 C:npmnode_modulesgulpgulpfile.js
[**:**:**] '덜' 시작하면... 
[**:**:**] 8.43ms 후에 '덜' 완료

이제 컴파일된 CSS 파일이 'CSS' 폴더로 내보내졌습니다. CSS 파일 안을 보면 알 수 있습니다

a { 
  색상: #8888ff; 
}
a:호버 { 
  텍스트 장식: 없음; 
}

LESS 컴파일이 더 낫습니다. 들여쓰기가 SASS 컴파일보다 더 잘 포맷되어 있기 때문입니다.

3. 커피스크립트 컴파일

방법은 위에서 언급한 SASS와 거의 같지 않으며, 사용하는 플러그인만 다릅니다. 먼저, CoffeeScript 컴파일용 플러그인을 설치하세요.

> npm install gulp-coffee --save-dev

설치 후에는 원본 CoffeeScript 파일을 생성합니다.

> mkdir 커피 | 터치 커피/스크립트.coffee.

CoffeeScript 파일에 뭐가 들어있는가:


홈 = ->
  $('.button').on 'click', (e) ->
    e.preventDefault()
    if window.confirm: "확실해요?" 
      $(@).trigger '클릭' 
    그렇지 않으면
      Return false

$(document).ready(Home)

샘플의 내용은 jQuery 코드입니다. '.button' 클래스 요소를 클릭하면 이벤트 핸들러가 확인 대화상자를 보냅니다.

그 다음 컴파일 작업을 생성하세요. gulp를 로컬에 설치한 디렉터리 바로 아래에 있는 'gulpfile.js'을 수정하세요(이 예시에서는 'C:\npm\node_modules\gulp').

var gulp = require('gulp'); 
var coffee = require('꿀꺽 커피'); 

gulp.task('커피', function() { 
gulp.src('커피/**/*.커피')
.pipe(coffee())
.pipe(gulp.dest('./js')); 
});

대상 소스는 'coffee/' 아래에 있는 모든 'coffee' 파일입니다. 바로 컴파일링을 실행합시다.

> 커피를 꿀꺽 마셔
[**:**:**] 걸프파일 사용 C:npmnode_modulesgulpgulpfile.js
[**:**:**] '커피' 시작... 
[**:**:**] 7.68ms 후에 '커피'를 완료했습니다

이제 '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 플러그인에는 기본적으로 정의되어야 하는 유효한 플러그인들이 꽤 있으니(예: 자동 공급업체 접두사 부여 및 미니파이잉 등), 사용 상황에 따라 검색하는 것이 좋습니다.

이제 우리는 오늘날 프론트엔드 개발에 필요한 최소한의 환경을 마침내 갖추게 되었습니다.