개발자의 좋은 점은 모든 것이 놀라운 속도로 발전하고 있으며 항상 새로운 기술, 도구, 기법 및 즐길 거리가 있다는 것입니다. 오늘은 ‘비교적’ 새로운 도구에 대해 이야기하고 싶습니다. Gulp라는 이름의 이 도구는 NodeJS 위에서 작동하는 작업 자동화 도구입니다. 하지만 그렇다고 해서 Node 전용이 아니라 일반적으로 웹 프로젝트(CSS, JS, HTML, PHP, Node, GIT, FTP 등)를 포함한 모든 프로젝트에서 사용할 수 있습니다.
이미 블로그에서 또 다른 작업 자동화 도구인 Grunt에 대해 이야기한 적이 있습니다. 하지만 Gulp가 인기를 끌고 있으며 그 이유를 알아봅시다.
작업 자동화기란 무엇인가요?
물론 Grunt를 모르는 분들도 계실 테니 처음부터 다시 설명해드리겠습니다.
웹 개발자라면 각 프로젝트에서 여러 번 반복적으로 수동으로 수행하는 작업이 있을 것입니다. 예:
- JS 파일에 문의
- SASS 컴파일
- 파일 축소
- FTP를 통해 모든 것을 서버에 업로드
- 테스트 실행
- 파일을 변경할 때 F5 키를 누르세요.
- 웹용 이미지 최적화
- 기타 등
요점은 이러한 작업을 수동으로 수행해서는 안 된다는 것입니다. 가능한 한 많이 자동으로 설정해야 합니다. 특히 중대형 프로젝트인 경우 더욱 그렇습니다. 그래서 Gulp와 같은 작업 자동화 도구가 바로 그 역할을 해줍니다.
꿀꺽꿀꺽 대 그르렁
기본적으로 둘 다 동일한 작업을 수행합니다. 따라서 이미 Grunt 사용법을 알고 있다면 굳이 전환할 필요는 없을 것 같습니다. 하지만 몇 가지 차이점이 있습니다:
- 꿀꺽 삼키는 것이 더 빠릅니다. 적어도 모두가 그렇게 말하죠. 속도 테스트, 성능 테스트 등은 항상 누가 하느냐에 따라 달라진다는 것을 알고 계실 겁니다.
- Gulp는 더 명확하고 간단한 구성 파일을 가지고 있습니다. Grunt는 JSON을 사용하고 다른 하나는 자바스크립트만 사용합니다.
- Gulp에는 Grunt에서 플러그인을 통해 수행되는 몇 가지 기본 기능이 내장되어 있습니다. 예: watch
- 걸프 작업은 최소화됩니다. 따라서 각 플러그인이나 작업은 한 가지 일만 하고 다른 일은 하지 않습니다. Grunt에서는 결과를 얻기 위해 여러 가지 작업을 수행할 수 있습니다.
- 하지만 제가 발견한 가장 중요한 차이점은 둘 중 하나를 사용하기 위해 생각해야 하는 방식이었습니다.
Grunt에서는 (정신적으로) 파일이나 파일 그룹을 가져와서 작업을 통해 실행하는 것이 전부였습니다. 그런 다음 다른 작업에서 수정된 파일을 가져와서 다른 작업을 수행하도록 수정합니다. 그리고 각 작업마다 그렇게 반복했습니다. 다음 그래프와 같이 요약할 수 있습니다.
Gulp에서는 파일을 가져와서 수정 파이프라인을 통해 실행하여 최종적으로 원하는 결과를 얻는다는 점을 생각해야 합니다. 이런 식으로요:
걸프 미니 튜토리얼
이 예제에서는 단순히 자바스크립트 파일을 연결하기만 하면 됩니다.
1단계: Gulp가 없는 경우 설치합니다. 다음 명령을 실행합니다. 이 작업은 PC당 한 번만 수행하면 됩니다. 그리고 당연히 Linux 배포판의 리포지토리에 있는 node와 npm이 있어야 합니다.
sudo npm 설치 gulp -g
2단계: 프로젝트가 있는 디렉터리에서 콘솔을 엽니다.
3단계: 3단계: 해당 디렉토리에 로컬로 Gulp를 설치해야 합니다.
npm install gulp -save-dev
이렇게 하면 다른 폴더와 파일이 들어있는 node_modules 폴더가 생성됩니다.
4단계: 이제 원하는 플러그인을 설치할 차례입니다. 이 예제에서는 파일을 연결하는 데 필요한 플러그인이 하나만 있습니다.
npm 설치 gulp-concat -save-dev
5단계: 이제 프로젝트 폴더 안에 gulpfile.js라는 파일을 만들고 그 안에 다음을 배치합니다:
var gulp = require('gulp'),
concat = require('gulp-concat');
gulp.task('concatenar', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/assets/js'));
});
가장 먼저 하는 일은 gulp와 각 플러그인을 정의하는 것입니다. 각각은 “var something”과 함께 사용됩니다.
다음으로 작업(gulp.task)을 실행합니다. 원하는 대로 이름을 지정합니다(제 경우에는 “연결”).
그런 다음 gulp.src를 사용하여 시작할 파일 또는 파일 집합을 정의합니다. 이 예제에서는 src/scripts 폴더와 그 하위 폴더에 있는 모든 .js 파일이 대상입니다.
그리고 이러한 파일로 수행하려는 각 작업에 대해 .pipe를 사용합니다. 이 예에서는 2를 사용합니다. 첫 번째는 main.js 파일에 있는 모든 것을 연결합니다. 그리고 두 번째는 결과 파일을 dist/assets/js 폴더에 작성하는 것입니다.
아주 간단하지 않나요?
6단계: 6단계: 콘솔에서 명령을 사용하여 해당 작업을 실행할 수 있습니다:
꿀꺽꿀꺽 연결
그게 다입니다. 할 일을 더 추가하려면 다음 단계를 따르세요:
- 플러그인을 설치합니다.
- ‘var’ 영역에 추가합니다.
- 그리고 .pipe 파일을 추가하여 파일을 원하는 대로 수정합니다.
소스 파일을 수정할 때 이 작업이 자동으로 실행되도록 하고 싶을 수도 있습니다. 이렇게 하려면 gulpfile.js에 다음을 추가하면 됩니다:
gulp.task('watch', function() {
gulp.watch('src/scripts/**/*.js', ['concatenar']);
});
보시다시피 작동 원리를 이해하는 것은 어렵지 않습니다. 변경 사항이 있는지 확인하고 변경 사항이 있는 경우 ‘연결’을 실행하세요. 그러면 해당 작업을 콘솔에서 실행할 수 있습니다:
gulp watch
마지막으로 기본 작업을 정의할 수도 있습니다. 제 경우에는 항상 ‘감시’ 작업을 기본값으로 정의합니다. 이를 위해 다음을 추가합니다:
gulp.task('default', ['watch'], function() {
console.log('Have fun!');
});
이렇게 하면 콘솔에 더 짧은 명령을 입력할 수 있습니다.
꿀꺽꿀꺽
그리고 보시다시피, 같은 함수 내에서 필요한 경우 원하는 JS 코드를 실행할 수 있습니다.
공식 Gulp 웹사이트: http://gulpjs.com/
플러그인은 여기: http://gulpjs.com/plugins/
그리고 여기: http://gratimax.net/search-gulp-plugins/