Gulp를 사용한 JavaScript 자동화 소개

웹 개발자로서 우리는 때때로 똑같은 지루한 작업을 계속해서 반복하는 자신을 발견합니다. 빌드 명령을 실행하거나 브라우저에서 새로 고침을 눌러 낭비되는 시간을 고려하면 많은 시간을 절약할 수 있음을 알게 될 것입니다. 또한 프로세스를 자동화하여 일시적으로 "영역"(생산성 상태)을 떠나는 대신 당면한 작업에 집중할 수 있습니다.

이 JavaScript 자동화 튜토리얼에서는 Gulp를 사용하여 설계 및 개발 프로세스를 자동화하는 방법을 배웁니다. 디자인 지향적이라면 두려움을 극복하고 계속 읽어보시기 바랍니다. 반면에 개발자라면 이면의 논리를 이해하면 이를 바로 훑어볼 수 있습니다.

Gulp는 Node.js의 스트림을 사용하여 자동화에 대한 비동기 소스-대상 접근 방식을 구현하는 빌드 시스템입니다. 모든 것이 JavaScript로 작성되어 중급 코딩 지식이 있는 사람이라면 누구나 쉽게 시작할 수 있습니다. Gulp 빌드 프로세스는 감시자와 작업 모음으로 구성됩니다. 또한 Gulp 뒤에 있는 커뮤니티는 JavaScript 연결에서 SVG에서 아이콘 글꼴 생성에 이르기까지 모든 작업을 수행하는 데 도움이 되는 npm 내에 거대한 플러그인 디렉토리를 유지 관리합니다.

꿀꺽꿀꺽의 대안

거기에는 많은 대안이 있으며 대부분은 지난 몇 년 동안 생겨났습니다. 가장 주목할만한 것은 Grunt입니다. Gulp와 Grunt 사이의 경쟁은 결코 명확한 승자가 없을 것입니다. 둘 다 장단점이 있기 때문입니다. 따라서 더 깊이 파고드는 것은 피하겠습니다. 간단히 말해서, 구성에 대한 Grunt의 높은 의존도는 사람들을 Gulp의 JavaScript 접근 방식으로 이끄는 것입니다. 그 동안 Koala와 같은 기본 GUI 구현은 대부분 코딩에 참여하지 않는 사람들로부터 어느 정도 기반을 얻었습니다. 그러나 번들 응용 프로그램을 사용하면 Gulp가 제공하는 사용자 지정 가능성 및 확장 가능성 수준에 도달하는 것이 불가능합니다.

프로세스 자동화 기초

플러그인

플러그인은 gulp가 각 프로세스를 수행하는 수단입니다. 플러그인은 npm을 통해 설치되고 "require"를 사용하여 시작됩니다.

작업

Gulp의 경우 작업에는 항상 소스와 대상이 있습니다. 그 사이에는 각 플러그인을 호출하고 변환된 결과를 다음 파이프로 출력하는 파이프가 있습니다.

글로브

Globs는 파일을 참조하는 와일드카드 패턴입니다. 글로브 또는 글로브 배열은 작업 소스의 입력으로 사용됩니다.

감시자

감시자는 변경 사항이 감지될 때마다 소스 파일에서 변경 사항을 확인하고 작업을 호출합니다.

gulpfile.js

이것은 "gulp" 명령이 가리키는 JavaScript 파일입니다. 여기에는 작업에서 감시자 또는 작업에서 사용하는 기타 코드 조각에 이르기까지 모든 것이 포함됩니다.

간단한 작업

시작하려면 Node.js와 관리자 액세스 권한이 있는 명령줄 셸이 필요합니다. 여기에서 Node.js를 다운로드할 수 있습니다. 설치가 완료되면 다음 명령을 실행하여 npm이 최신 상태인지 확인할 수 있습니다.

 sudo npm install npm -g

-g 플래그는 설치가 전역적임을 나타냅니다.

이제 Gulp를 설치하고 몇 가지 간단한 작업을 호출할 준비가 되었습니다. 다음 명령을 사용하여 Gulp를 전역으로 설치합니다.

 sudo npm install gulp -g

동일한 명령을 사용하여 업데이트할 수도 있습니다.

toptal-gulp-tutorial/step1에서 첫 번째 작업에 도움이 되는 스타터 키트를 다운로드할 수 있습니다. 여기에는 SCSS 파일을 CSS로 컴파일하는 매우 간단한 작업이 포함됩니다. libsass를 사용하는 gulp-sass 플러그인을 사용하고 있습니다. 여기에서 libsass를 선택한 이유는 일부 기능이 부족하기는 하지만 Ruby 대안보다 훨씬 빠르기 때문입니다. 프로젝트의 루트 디렉토리에 있으면 다음 명령을 사용하여 필요한 모든 플러그인을 설치할 수 있습니다.

 npm install

이 명령은 package.json 파일을 읽고 필요한 모든 종속성을 설치합니다. 여기서는 "npm install"을 다음에 대한 약어로 사용합니다.

 npm install gulp --save-dev npm install gulp-sass --save-dev

"–save-dev" 플래그는 선택한 플러그인을 package.json devDependencies에 추가하므로 다음에 모든 것을 설치하려고 할 때 편리한 "npm install"을 사용할 수 있습니다.

이 시점에서 첫 번째 작업을 실행할 수 있습니다. 다음 명령을 실행하고 /scss 폴더의 모든 SCSS 파일이 해당 디렉토리의 CSS로 컴파일되는지 확인합니다.

 gulp scss

이 예에서는 실행할 작업을 지정하고 있습니다. 작업 이름을 생략하면 "default"라는 이름이 실행됩니다.

코드 연습

위의 내용은 JavaScript 코드의 단 7줄로 수행됩니다. 확실히, 일단 당신이 그것의 단순함을 이해하면 당신은 집에서 느낄 것입니다:

 var gulp = require('gulp'); var scss = require('gulp-sass');

처음에는 사용할 모든 플러그인을 초기화합니다. Gulp는 우리가 없이는 할 수 없는 유일한 것입니다:

 gulp.task('scss', function() {

"scss"라는 작업을 정의합니다.

 return gulp.src('scss/*.scss')

작업에 대한 소스 파일을 설정합니다. 이들은 globs로 정의됩니다. 이 예에서는 ".scss"로 끝나는 "scss/" 폴더의 모든 파일을 참조합니다.

 .pipe(scss())

이 시점에서 이전에 정의한 gulp-sass 플러그인을 호출합니다.

 .pipe(gulp.dest('css'));

마지막으로 "gulp.dest"를 사용하여 파일의 대상 폴더를 정의합니다. 파일이 연결된 경우 단일 파일 이름일 수도 있습니다.

이 프로세스 자동화 구현을 더욱 개선하기 위해 몇 가지 다른 Gulp 플러그인을 포함할 수 있습니다. 예를 들어, gulp-minify-css를 사용하여 작업의 최종 제품을 축소하고 gulp-autoprefixer를 사용하여 공급업체 접두사를 자동으로 추가할 수 있습니다.

감시자 고용

바로 사용할 수 있는 워처 스타터 키트를 만들었습니다. toptal-gulp-tutorial/step2에서 다운로드할 수 있습니다. 여기에는 이전에 생성된 SCSS 작업의 향상된 버전과 소스 파일을 감시하고 작업을 호출하는 감시자가 포함됩니다. 시작하려면 다음 명령을 사용하십시오.

 gulp

이 명령은 감시자를 시작하는 "기본" 작업을 시작합니다. 이 시점에서 SCSS 파일을 편집하고 CSS 파일이 다시 컴파일되는 것을 볼 수 있습니다. 명령줄에서 Gulp의 알림을 볼 수 있습니다.

코드 연습

3줄의 추가 코드로 작업에 대한 감시자를 설정했습니다. 즉, watcher 스타터 키트는 소개 예제와 크게 다르지 않습니다. 이 섹션에서는 모든 추가 및 변경 사항을 살펴보겠습니다.

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

이 예에서 Gulp 소스는 globs 배열과 함께 제공됩니다. 첫 번째 파일은 하위 폴더에서도 ".scss"로 끝나는 모든 파일을 포함하고, 두 번째 파일은 "_"로 시작하는 파일을 제외합니다. 이런 식으로 SCSS의 내장 함수 @import를 사용하여 _page.scss 파일을 연결할 수 있습니다.

 gulp.task('default', ['scss'], function() {

여기에서 "기본" 작업을 정의합니다. "scss" 작업은 "default" 이전에 종속성으로 실행됩니다.

 gulp.watch('scss/**/*.scss', ['scss']);

마지막으로 Gulp의 watch 함수를 호출하여 ".scss"로 끝나는 파일을 가리키고 변경 이벤트가 발생할 때마다 "scss" 작업을 실행합니다.

이제 JavaScript 연결, 코드 힌트, CoffeeScript 컴파일 또는 기타 염두에 둘 수 있는 기타 자동화된 프로세스에 대한 새 감시자를 만들 준비가 되었습니다. 이 JavaScript 자동화 구현에 대해 더 자세히 알아보기 위해 작업이 실행될 때 알려주는 gulp-notify를 추가할 것을 제안합니다. 또한 결과 CSS 코드를 축소하고 "scss" 작업을 이에 대한 종속성으로 실행하도록 별도의 작업을 생성할 수 있습니다. 마지막으로 gulp-rename을 사용하여 결과 파일에 ".min" 접미사를 추가할 수 있습니다.

JavaScript 자동화를 위한 고급 Gulp 플러그인

Gulp의 플러그인 기반에는 수천 개의 플러그인이 있으며 그 중 일부는 빌드 프로세스의 단순한 JavaScript 자동화를 훨씬 뛰어넘습니다. 다음은 몇 가지 뛰어난 예입니다.

브라우저동기화

BrowserSync는 CSS, JavaScript를 삽입하고 변경 사항이 있을 때마다 브라우저를 자동으로 새로 고칩니다. 또한 동료를 놀라게 하거나 브라우저 테스트 속도를 크게 높이는 데 사용할 수 있는 고스트 모드 기능이 포함되어 있습니다.

브라우저화

Browserify는 애플리케이션의 "require" 호출을 분석하고 번들된 JavaScript 파일로 변환합니다. 또한 브라우저 코드로 변환할 수 있는 npm 패키지 목록이 있습니다.

웹팩

Browserify와 마찬가지로 Webpack은 종속성이 있는 모듈을 정적 파일로 변환하는 것을 목표로 합니다. 이것은 모듈 종속성을 설정하는 방법에 대해 사용자에게 더 많은 자유를 제공하며 Node.js의 코드 스타일을 따르는 것을 목표로 하지 않습니다.

업

Gulp-karma는 악명 높은 테스트 환경을 Gulp에 제공합니다. Karma는 Gulp도 보증하는 최소 구성 접근 방식을 따릅니다.

결론

이 프로세스 자동화 튜토리얼에서 Gulp를 빌드 도구로 사용하는 것의 아름다움과 단순함을 시연했습니다. 튜토리얼에 설명된 단계를 따르면 이제 미래와 레거시 프로젝트 모두에서 소프트웨어 개발 프로세스를 완전히 자동화할 준비가 된 것입니다. 이전 프로젝트를 위한 빌드 시스템을 설정하는 데 시간을 투자하면 미래에 소중한 시간을 확실히 절약할 수 있습니다.

곧 제공될 고급 Gulp 튜토리얼을 기대해 주십시오.