초보자를 위한 아주 간단한 Gulp 튜토리얼

요즘에는 빌드 도구를 사용하는 것이 웹 개발 워크플로에서 없어서는 안될 부분입니다.

Gulp는 (Webpack과 함께) 요즘 가장 인기 있는 빌드 도구 중 하나입니다.

하지만 Gulp를 배우기 위해서는 명확한 학습 곡선이 있습니다.

가장 큰 장애물 중 하나는 수백 개의 서로 다른 부품이 들어 있는지 알아내는 것입니다.

그리고 무엇보다도 명령줄에서 모든 작업을 수행해야 하므로 작업을 많이 하지 않으면 매우 겁이 날 수 있습니다.

이 튜토리얼은 npm(노드 패키지 관리자)의 기본 사항과 프런트 엔드 프로젝트를 위한 Gulp 설정을 안내합니다.

완료되면 워크플로를 설정하고 명령줄을 사용하는 데 훨씬 자신감이 생길 것입니다!

그래서 Gulp의 중요한 점은 무엇입니까?

Gulp는 시간을 크게 절약해 줍니다. Gulp를 사용하면 컴퓨터가 다음과 같은 지루한 작업을 처리하도록 할 수 있습니다.

Sass 파일을 CSS로 컴파일,
여러 자바스크립트 파일 연결(결합)
CSS 및 JS 파일 축소(압축),
파일 변경이 감지되면 위의 작업을 자동으로 실행합니다.

Gulp는 위에서 언급한 것보다 훨씬 더 복잡한 작업을 수행할 수 있습니다. 그러나 이 튜토리얼은 Gulp의 기본 사항과 작동 방식에만 초점을 맞출 것입니다.

우리가 할 일에 대한 간략한 개요

이 튜토리얼에서 진행되는 단계는 다음과 같습니다.

Node.js와 npm을 컴퓨터에 설치합니다.
프로젝트에 필요한 Gulp 및 기타 패키지를 설치합니다.
gulpfile.js 파일을 구성하여 원하는 작업을 실행하세요.
당신의 컴퓨터가 당신을 위해 일하게 하십시오! 🙂

위의 모든 용어를 완전히 이해하지 못하더라도 걱정하지 마십시오. 한 번에 모든 것을 설명하겠습니다.

이제 시작하겠습니다!

환경 설정

Node.js

Gulp를 컴퓨터에서 실행하려면 로컬 환경에 Node.js를 설치해야 합니다.

Node.js는 백엔드 JavaScript로 간주되는 "JavaScript 런타임"으로 자체 설명됩니다. Gulp는 Node를 사용하여 실행되므로 시작하기 전에 Node를 설치해야 합니다.

Node.js 웹사이트에서 다운로드할 수 있습니다. Node를 설치하면 컴퓨터에 npm도 설치됩니다.

npm이 무엇인가요?

Npm(노드 패키지 관리자)

Npm은 전 세계 개발자들이 작성한 JavaScript 플러그인(패키지라고 함)의 지속적으로 업데이트되는 컬렉션입니다. Gulp는 이러한 플러그인 중 하나입니다. (또한 몇 가지가 더 필요합니다. 이에 대해서는 나중에 설명하겠습니다.)

npm의 장점은 명령줄에서 직접 패키지를 설치할 수 있다는 것입니다. 수동으로 웹 사이트에 이동하여 파일을 다운로드하고 실행하여 설치할 필요가 없기 때문에 매우 좋습니다.

패키지를 설치하는 기본 구문은 다음과 같습니다.

npm install [Package Name]

꽤 간단해 보이죠?

node_modules 폴더

한 가지 주의할 점은 npm 패키지를 설치하면 npm이 node_modules라는 폴더를 만들고 모든 패키지 파일을 거기에 저장한다는 것입니다.

node_modules 폴더가 있는 프로젝트가 있고 그 안에 무엇이 들어 있는지 감히 본 적이 있다면 아마도 중첩된 폴더와 파일이 많이 있다는 것을 보았을 것입니다.

왜 이런 일이 발생합니까?

글쎄, 이것은 npm 패키지가 특정 기능을 실행하기 위해 다른 npm 패키지에 의존하는 경향이 있기 때문입니다. 이러한 다른 패키지를 종속성이라고 합니다.

플러그인을 작성하는 경우 기존 패키지의 기능을 활용하는 것이 좋습니다. 매번 바퀴를 재발명하고 싶어하는 사람은 없습니다.

따라서 node_modules 폴더에 플러그인을 설치하면 해당 플러그인은 *it*에 필요한 추가 패키지를 자체 node_modules 폴더에 설치합니다.

wazoo 외부에 폴더를 중첩할 때까지 계속해서 진행합니다.

이 시점에서 node_modules 폴더를 엉망으로 만드는 것에 대해 너무 걱정할 필요가 없습니다. 그냥 그 미친 폴더에서 무슨 일이 일어나고 있는지 간단히 설명하고 싶었을 뿐입니다 🙂

package.json으로 패키지 추적

npm의 또 다른 멋진 기능은 프로젝트를 위해 설치한 특정 패키지를 기억할 수 있다는 것입니다.

어떤 이유로 모든 것을 다시 설치해야 하는 경우에 중요합니다.

또한 다른 개발자가 자신의 컴퓨터에 프로젝트의 모든 패키지를 빠르고 쉽게 설치할 수 있기 때문에 다른 개발자의 작업이 훨씬 쉬워집니다.

이 작업을 어떻게 수행합니까?

Npm은 package.json이라는 파일을 사용하여 설치한 패키지와 패키지 버전을 추적합니다. 또한 이름, 작성자 및 Git 저장소와 같은 프로젝트에 대한 기타 정보를 저장합니다.

package.json 만들기

이 파일을 초기화하려면 명령줄을 다시 사용할 수 있습니다.

먼저 컴퓨터에 있는 프로젝트 폴더로 이동합니다.

그런 다음 다음 명령을 입력하십시오. npm init

그런 다음 Npm은 프로젝트에 대한 정보를 입력하라는 메시지를 표시합니다. 대부분의 옵션에서 Enter 키를 누르고 괄호 안에 있는 기본값을 사용할 수 있습니다.

완료되면 npm은 프로젝트 폴더에 package.json 파일을 생성합니다! 편집기에서 열면 다음과 같이 표시되어야 합니다.

{
  "name": "super-simple-gulp-file",
  "version": "1.0.0",
  "description": "Super simple Gulp file",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thecodercoder/Super-Simple-Gulp-File.git"
  },
  "keywords": [
    "gulp"
  ],
  "author": "Jessica @thecodercoder",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/thecodercoder/Super-Simple-Gulp-File/issues"
  },
  "homepage": "https://github.com/thecodercoder/Super-Simple-Gulp-File#readme"
}

분명히 귀하의 프로젝트에 대해 제가 여기에 있는 정보 대신 귀하의 이름과 정보를 갖게 될 것입니다.

이 시점에서 나는 모든 필드를 올바르게 만드는 것에 대해 걱정하지 않을 것입니다. 이 정보 부분은 주로 npm에 공개 플러그인으로 게시되는 패키지에 사용됩니다.

이제 package.json 파일에 *하게 될* 내용은 Gulp를 실행하는 데 필요한 모든 패키지 목록입니다.

다음 항목에 추가하는 방법을 살펴보겠습니다.

패키지 설치

위의 이전 섹션에서 npm install [Package Name] 입력에 대해 이야기했습니다.

패키지를 다운로드하여 node_modules 폴더에 설치하려면 명령줄에 입력하세요.

패키지를 설치하고 자동으로 package.json 파일에 종속성으로 저장합니다.

따라서 패키지에 Gulp를 설치하려면 npm install gulp를 입력합니다.

Gulp와 관련된 모든 것을 컴퓨터에 설치하는 데 1-2분 정도 걸릴 수 있습니다. 몇 가지 경고 메시지가 표시될 수 있지만 설치에 실패하지 않는 한 걱정하지 않을 것입니다.

이제 package.json 파일을 열면 하단에 Gulp가 종속성으로 추가되었음을 알 수 있습니다.

"dependencies": {
  "gulp": "^3.9.1"
}

이 종속성 목록은 추가 npm 패키지를 설치하면 늘어납니다.

Gulp에 필요한 기타 패키지

처음에 우리는 SCSS/CSS 및 JS 파일 컴파일과 같은 작업을 실행하기 위해 Gulp를 사용하고 싶었습니다. 이를 위해 다음 패키지를 사용할 것입니다.

gulp-sass — Sass 파일을 CSS로 컴파일
gulp-cssnano — CSS 파일 축소
gulp-concat — 여러 JS 파일을 하나의 큰 파일로 연결(결합)
gulp-uglify — JS 파일 축소

이전과 마찬가지로 이 줄을 하나씩 입력하여 각 패키지를 설치합니다. 다음 줄로 넘어가기 전에 각각이 설치되는 동안 몇 초를 기다려야 합니다.

npm install gulp-sass
npm install gulp-cssnano
npm install gulp-concat
npm install gulp-uglify

Gulp-cli 대 글로벌 Gulp

과거에는 명령줄에서 "gulp"를 실행하려면 "npm install –global gulp" 명령을 사용하여 로컬 컴퓨터에 전역적으로 Gulp를 설치해야 했습니다.

그러나 단일 글로벌 버전의 Gulp를 사용하는 경우 여러 프로젝트에 서로 다른 버전의 Gulp가 필요한 경우 문제가 발생할 수 있습니다.

현재 합의에서는 Gulp 자체 대신 전역적으로 Gulp-cli라는 다른 패키지를 설치할 것을 권장합니다.

이렇게 하면 "gulp" 명령을 계속 실행할 수 있지만 다른 프로젝트에서 다른 버전의 Gulp를 사용할 수 있습니다.

이에 대한 코드는 다음과 같습니다.

npm install --global gulp-cli

관심이 있으시면 이 Treehouse 스레드에서 자세한 내용을 읽을 수 있습니다.

좋습니다. 모든 패키지가 설치되면 필요한 모든 도구를 갖게 됩니다. 프로젝트 파일 설정으로 넘어갑시다!

파일 구조 설정

파일 및 폴더 생성을 시작하기 전에 파일 구조를 설정하는 다양한 방법이 있다는 것을 알아두십시오. 사용할 접근 방식은 기본 프로젝트에 적합하지만 "올바른" 설정은 특정 요구 사항에 따라 크게 달라집니다.

이 기본 방법은 모든 움직이는 부품의 기본 기능을 파악하는 데 도움이 됩니다. 그런 다음 나중에 원하는 대로 설정을 구성하거나 변경할 수 있습니다.

프로젝트 트리는 다음과 같습니다.

루트 프로젝트 폴더
- index.html
- gulpfile.js
- 패키지.json
- node_modules(폴더)
- 앱(폴더)
- 스크립트.js
- style.scss
- dist(폴더)

우리는 이미 package.json 파일과 node_modules 폴더를 살펴보았습니다. 그리고 index.html 파일은 물론 기본 웹사이트 파일이 됩니다.

gulpfile.js 파일은 이 기사의 시작 부분에서 이야기한 모든 작업을 실행하도록 Gulp를 구성할 위치입니다. 잠시 후에 알아보도록 하겠습니다.

하지만 지금은 Gulp 워크플로에서 중요하므로 app과 dist라는 두 폴더를 언급하고 싶습니다.

앱 및 dist 폴더

앱 폴더에는 기본 JavaScript 파일(script.js)과 기본 SCSS 파일(style.scss)이 있습니다. 이러한 파일은 모든 JS 및 CSS 코드를 작성할 위치입니다.

dist 폴더는 Gulp에서 처리한 후 최종 컴파일된 JS 및 CSS 파일을 저장하기 위해서만 존재합니다. dist 파일은 변경하지 말고 앱 파일만 변경하면 됩니다. 그러나 dist에 있는 이 파일들은 index.html에 로드될 것입니다. 우리는 웹사이트에서 컴파일된 파일을 사용하기를 원하기 때문입니다.

다시 말하지만, 프로젝트 파일과 폴더를 설정할 수 있는 방법은 많습니다. 명심해야 할 가장 중요한 점은 구조가 합리적이고 가장 효율적으로 작업할 수 있다는 것입니다.

이제 Gulp를 구성하는 이 튜토리얼의 핵심으로 갑시다!

Gulpfile 생성 및 구성

Gulpfile에는 설치된 패키지를 로드하고 다른 기능을 실행하는 코드가 포함되어 있습니다. 코드는 두 가지 기본 기능을 수행합니다.

설치된 패키지를 노드 모듈로 초기화합니다.
Gulp 작업을 만들고 실행합니다.

패키지 초기화

프로젝트에 추가한 npm 패키지의 모든 기능을 활용하려면 Node.js에서 모듈로 내보내야 합니다. (따라서 폴더 이름 "node_modules")

Gulpfile 상단에 다음과 같은 모듈을 추가하십시오:

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

이제 패키지가 추가되었으므로 Gulpfile 스크립트에서 해당 기능과 개체를 사용할 수 있습니다. Node.js의 일부인 내장 함수도 사용하게 됩니다.

Gulp 작업 만들기

Gulp 작업 생성은 다음 코드를 사용하여 수행됩니다.

gulp.task('[Function Name]', function(){
   // Do stuff here
}

이렇게 하면 gulp [Function Name]을 입력하여 Gulp 작업을 실행할 수 있습니다. 명령줄에. 이것은 다른 Gulp 작업에서 명명된 함수를 실행할 수 있기 때문에 중요합니다.

특히, 기본 Gulp 작업을 실행할 때 *모두* 실행되는 여러 Gulp 작업을 구축하고 있습니다.

우리가 사용할 주요 기능은 다음과 같습니다.

.task() — 위에서 언급한 대로 작업을 생성합니다.
.src() — 특정 작업에서 컴파일할 파일 식별
.pipe() — Gulp가 사용하는 Node 스트림에 함수를 추가합니다. 동일한 작업에서 여러 기능을 연결할 수 있습니다(florian.ec에서 이 주제에 대한 훌륭한 글 읽기)
.dest() — 결과 파일을 특정 위치에 씁니다.
.watch() — 변경 사항을 감지할 파일 식별

궁금한 점이 있으면 여기에서 Gulp 설명서에 대한 자세한 내용을 읽을 수 있습니다.

모든 설정? 이제 업무에 착수하여(뮬란 음악 큐) 해당 작업을 작성해 보겠습니다!

다음은 Gulp가 실행하기를 원하는 작업입니다.

SCSS를 CSS 파일로 컴파일하고 축소하는 Sass 작업
JS 파일을 연결하고 축소/추적하는 JS 작업
SCSS 또는 JS 파일이 변경된 시점을 감지하는 작업을 감시하고 작업을 다시 실행합니다.
gulp를 입력할 때 필요한 모든 작업을 실행하기 위한 기본 작업 명령줄에

Sass 작업

Sass 작업의 경우 먼저 task()를 사용하여 Gulp에서 작업을 만들고 "sass"라는 이름을 지정하겠습니다.

그런 다음 작업이 실행될 각 구성 요소를 추가합니다. 먼저 src()를 사용하여 소스가 app/scss/style.scss 파일이 되도록 지정합니다. 그런 다음 우리는 추가 기능을 파이프할 것입니다.

첫 번째 함수는 sass() 함수를 실행합니다(Gulpfile 상단에서 "sass"라고 부르는 gulp-sass 모듈 사용). SCSS 파일과 동일한 이름으로 CSS 파일을 자동으로 저장하므로 style.css라는 이름이 지정됩니다.

두 번째는 cssnano()를 사용하여 CSS 파일을 축소합니다. 마지막은 결과 CSS 파일을 dist/css 폴더에 넣습니다.

다음은 이에 대한 코드입니다.

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

테스트를 위해 style.scss 파일에 일부 필러 SCSS를 넣었습니다.

div {
    display: block;

    &.content {
        position: relative;
    }
}

.red {
    color: red;
}

gulp를 입력하면 명령줄에서 각 개별 Gulp 작업을 실행할 수 있습니다. 그리고 작업의 이름. 그래서 Sass 작업을 테스트하기 위해 gulp sass를 입력했습니다. 오류 없이 작동하는지 확인하고 축소된 dist/style.css 파일을 생성합니다.

모든 것이 올바르게 작동하면 명령줄에 다음과 같은 메시지가 표시되어야 합니다.

[15:04:53] Starting 'sass'...
[15:04:53] Finished 'sass' after 121 ms

dist 폴더를 확인하면 실제로 style.css 파일이 있고 열면 올바르게 축소된 CSS가 표시됩니다.

div{display:block}div.content{position:relative}.red{color:red}

자, 이제 Sass 작업이 완료되었습니다. 자바스크립트로!

JS 작업

JavaScript Gulp 작업은 Sass 작업과 유사하지만 몇 가지 다른 요소가 있습니다.

먼저 작업을 만들고 "js"라고 한 다음 소스 파일을 식별합니다. src() 함수에서 몇 가지 다른 방법으로 여러 파일을 식별할 수 있습니다.

하나는 와일드카드(*)를 사용하여 Gulp에 다음과 같이 *.js 확장자를 가진 모든 파일을 사용하도록 지시하는 것입니다.

gulp.src('app/*.js')

그러나 이렇게 하면 파일이 알파벳 순서로 컴파일되므로 다른 스크립트 파일보다 먼저 다른 스크립트에 종속된 스크립트를 로드하면 잠재적으로 오류가 발생할 수 있습니다.

스크립트 파일이 많지 않은 경우 각 JS 파일을 수동으로 지정하여 순서를 제어할 수 있습니다. src() 함수는 다음과 같이 대괄호를 사용하여 값 배열을 매개변수로 사용할 수 있습니다.

gulp.src(['app/script.js', 'app/script2.js'])

JS 파일이 많은 경우 "app/js/plugins"와 같은 별도의 하위 폴더에 종속성을 유지하여 종속성을 먼저 로드하도록 할 수 있습니다. 그런 다음 상위 "app/js" 폴더에 다른 JS 파일을 보관합니다.

그런 다음 와일드카드 표기법을 사용하여 모든 lib(라이브러리) 스크립트를 로드한 다음 일반 스크립트를 로드할 수 있습니다.

gulp.src(['app/js/lib/*.js', 'app/js/script/*.js'])

접근 방식은 보유한 JS 파일의 수와 유형에 따라 달라집니다.

소스 파일을 설정하고 나면 나머지 기능을 사용하게 됩니다. 첫 번째는 파일을 하나의 큰 JS 파일로 연결하는 것입니다. concat() 함수에는 결과 파일의 이름과 함께 하나의 매개변수가 필요합니다.

그런 다음 JS 파일을 uglify하여 대상 위치에 저장합니다.

JavaScript 작업에 대한 전체 코드는 다음과 같습니다.

gulp.task('js', function(){
    return gulp.src(['app/js/plugins/*.js', 'app/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

Sass 작업과 마찬가지로 gulp js를 입력하여 JS 작업이 작동하는지 테스트할 수 있습니다. 명령줄에 입력합니다.

[14:38:31] Starting 'js'...
[14:38:31] Finished 'js' after 36 ms

이제 주요 작업자 Gulp 작업 두 개를 완료했으므로 Watch 작업으로 넘어갈 수 있습니다.

시청 작업

감시 작업은 변경 사항에 대해 지시한 파일을 감시합니다. 변경 사항을 감지하면 사용자가 지정한 작업을 실행한 다음 계속해서 변경 사항을 감시합니다.

SCSS 파일을 감시하는 함수와 JS 파일을 감시하는 함수, 두 개의 감시 함수를 만들 것입니다.

watch() 함수는 소스 위치와 변경이 감지될 때 실행할 작업의 두 가지 매개변수를 취합니다.

Sass Watch 기능은 앱 폴더에 있는 SCSS 파일을 감시한 다음 변경 사항을 감지하면 Sass 작업을 실행합니다.

기능은 다음과 같습니다.

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

JavaScript Watch 기능의 경우 "globbing"이라는 정말 유용한 Node 기능을 활용해야 합니다. 글로빙은 "**" 기호를 폴더 및 하위 폴더에 대한 일종의 와일드카드로 사용하는 것을 말합니다. app/js 폴더에 JS 파일이 있고 app/js/plugins 폴더에 JS 파일이 있기 때문에 JS 파일에 필요합니다.

그 기능은 다음과 같습니다.

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

glob("**")이 작동하는 방식은 app/js 폴더의 모든 위치에서 JS 파일을 찾는 것입니다. 폴더 또는 플러그인 폴더와 같은 후속 하위 폴더에서 직접 볼 수 있습니다. globbing은 watch() 함수에서 각 하위 폴더를 별도의 소스로 지정할 필요가 없도록 하기 위해 편리합니다.

전체 시청 작업은 다음과 같습니다.

gulp.task('watch', function(){
gulp.watch('app/*.scss', ['sass']);
gulp.watch('app/js/**/*.js', ['js']);
});

이제 거의 완료되었습니다! 마지막으로 생성할 작업은 기본 Gulp 작업입니다.

기본 Gulp 작업

기본 Gulp 작업은 gulp를 입력할 때 실행하려는 작업입니다. 명령줄에서. 작업을 생성할 때 Gulp가 실행하려는 작업임을 인식하려면 작업을 "기본값"으로 지정해야 합니다.

우리가 하고 싶은 것은 Sass와 JS 작업을 한 번 실행한 다음 Watch 작업을 실행하여 파일이 변경되면 작업을 다시 실행하는 것입니다.

gulp.task('default', ['sass', 'js', 'watch']);

빌드를 실행하기 위해 다른 작업을 생성할 수 있지만 "기본" 이름을 재사용하지 마십시오. 예를 들어 CSS 및 JS 파일을 기본적으로 축소하지 않은 상태로 두고 싶지만 프로덕션용으로 축소하고 싶다고 가정해 보겠습니다.

"minifyCSS" 및 "minifyJS"라는 CSS 및 JS 파일을 축소하기 위해 별도의 Gulp 작업을 만들 수 있습니다. 그런 다음 이러한 작업을 기본 Gulp 작업에 추가하지 않고 기본 작업에 있는 모든 것을 포함하고 축소 작업도 포함하는 "prod"라는 새 Gulp 작업을 만들 수 있습니다.

index.html의 참조

Gulp 프로세스가 작동하면 index.html 파일이 올바른 CSS 및 JS 파일을 모두 참조하는지 확인하세요.

여기에서 제공한 예제의 경우 dist/style.css에 CSS 참조를 추가하고 싶을 것입니다. :

<link rel="stylesheet" href="dist/style.css">

그리고 dist/all.js를 참조하는 스크립트 태그를 추가합니다. :

<script src="dist/all.js"></script>

마감

통과를 축하합니다! 이 기본 Gulp 튜토리얼이 도움이 되었기를 바랍니다.

처음에 언급했듯이 이것은 npm과 Gulp의 기본에 대한 매우 간단한 자습서입니다.

대부분의 개발자는 Gulpfile에 많은 추가 작업을 추가합니다. 고급 주제에 대한 다른 기사를 보고 싶으시면 알려주세요!

마지막으로 여기 내 GitHub 계정에서 이 튜토리얼의 모든 코드를 확인할 수 있습니다.

이 튜토리얼이 재미있었다면 자유롭게 공유하거나 아래에 의견을 남겨주세요!