소개

미경험의 웹 중급자입니다.
효율적인 웹 제작을 실현하기 위해 Gulp를 사용하여 프런트 엔드 개발 환경을 구축하는 방법을 배웠습니다.

개발 환경: Mac에서 터미널을 사용했습니다.

Gulp란?

다양한 처리를 자동으로 실시해 주는 태스크 자동화 툴로, 한 번 설정해 두면 개발의 작업 효율을 도모할 수 있습니다.

Gulp는 태스크 러너라고 불리며, 결정된 태스크를 JavaScrip을 사용하여 프로그래밍할 수 있습니다.

장점

도입이 간단하고 플러그인이 풍부
태스크 러너는 Gulp가 인기! !

Gulp에서 어떤 일을 할 수 있는지

1.JavaScript의 ES6+에서 ES5로의 변환이 자동화(ESLint 연계)
2.Sass 파일을 CSS 파일로 자동으로 프리컴파일(node-sass 연계)
3. 화상의 리사이즈나 압축을 자동화(GraphicsMagick 연계)
4.JavaScript 파일, CSS 파일의 minify를 자동으로 실시할 수 있다

그 외, 다양한 플러그인이 있으므로, 하고 싶은 것에 맞추어 인스톨을 할 수 있습니다.

실행할 환경 설정

1.node.js 설치

Gulp가 동작하는 환경은 node.js가 있어 인스톨 하면 터미널로부터 JavaScript를 실행할 수 있게 됩니다. 사용하려면 node.js에 다양한 모듈(부품)을 설치하고 연결하여 실행합니다.
node.js


LTS (장기간 지원이 보장되는 버전)을 선택하십시오.

Tarmnar

npm -v

↑터미널로 입력하여 설치.

Tarmnar

npm -v
v6.9.0

↑이쪽이 나오면 OK.

나는 오류가 나오고 ... 여기를 참조하여 해결했습니다!
npm에서 permission denied가 되었을 때의 대처법

2.yarn 설치

yarn은 패키지 관리 도구를 사용하여 node.js에 설치하는 모듈을 관리합니다.


Tarmnar

npm install -g yarn

↑터미널로 입력하여 설치.

Tarmnar

yarn -h

↑설치되어 있는지 확인.
설치한 내용이 나오면 OK.

3.Gulp 설치

Gulp를 설치하려면 터미널을 사용합니다.
node.js를 설치했을 때 npm이라는 패키지 관리 도구가 함께 설치되어 있지만, yarn이 빠르기 때문에 여기를 사용합니다.

1. 프로젝트 폴더 준비

제 경우에는 test 폴더 안에 다음 파일을 준비했습니다.

2.global을 설치

Tarmnar

yarn global add gulp-cli

global을 터미널에 붙이는 것으로, 이 프로젝트 이외에서도 사용할 수 있게 되어 node.js로 사용하는 모듈을 인스톨 할 수가 있습니다.

※ 터미널에서 폴더로 이동하지 않으면 오류가 발생합니다.
cd로 치고 나서 파일마다 드래그&드롭하여 이동하면 간단합니다.

3. 프로젝트 내의 설정, 초기화, 확인

Tarmnar

yarn init -y

↑터미널로 치면, package.json이라는 node.js의 설정 파일이 test 폴더내에 작성됩니다. 여기에 모듈이 추가되어 정보가 관리됩니다.



Tarmnar

yarn add gulp --dev

↑터미널로 치면 gulp의 인스톨이 완료!
package.json의 내용에 "devDependencies": {"gulp": "^4.0.2"라고 추가되어 있으면 OK.

또한 test 폴더 내에 yarn.lock(파일)과 node_modules(폴더)가 설치되어 있는지 확인하십시오.

yarn.lock→설치된 상황을 기재
node_modules → 많은 모듈들이 저장되어 있다

Tarmnar

 gulp --help

↑설치되어 있는지 확인할 수 있습니다!

마지막으로

무사히 환경을 정돈할 수 있었습니다!
다음에는 기본적인 문법을 배우려고 합니다.

Gulp에 대해서는, 이 기사도 참고가 됩니다.
h tps : // f ぇ x - 보 x. 네 t/구 lp/