비엔지니어를 위한 최초의 Gulp

소개

이 기사는 Gulp를 우선 사용하고 싶다! 라는 수준의 사람을 위한 기사입니다.
Gulp의 설정을 스스로 만들고 싶은 분은 대상외가 되기 때문에, 양해 바랍니다.

※node.js의 인스톨 방법등, 더 좋은 방법은 있습니다만, 프로그램을 쓰거나 터미널을 접하는 것에 익숙하지 않은 사람용이므로, 최저한의 방법으로 소개하겠습니다.

Gulp를 만져 보자!

사용할 수 있도록 준비

1. node.js를 설치합니다.

node.js는 htps : // 그래서 js. 오 rg / 그럼 /에서 설치 프로그램을 다운로드합니다.
버전이 두 가지 있으므로 원하는 것을 선택하십시오.



※ 나는 오른쪽의 최신판을 사용하고 있습니다.

다운로드가 완료되면 설치 프로그램을 시작하고 화면의 안내에 따라 설치합니다.
(특히 설정을 변경할 필요는 없습니다.)

2. node.js, npm이 설치되었는지 확인

Mac이라면 터미널/Windows라면 명령 프롬프트를 시작하고 아래 명령을 입력합니다.
이 명령은 각 버전을 확인하는 명령입니다.

node.js를 확인하는 방법

command

node -v

npm 확인 방법

command

npm -v

성공하면 다음과 같이 버전이 표시됩니다.

3. gulp 전역 설치

다음 명령을 터미널에 입력합니다.

command

npm install -g gulp

※ 만약 에러가 되었을 경우는, 관리자 권한으로 실행해 보세요.

command

sudo npm install -g gulp

4. htps : // 기주 b.

제 쪽에서 Gulp가 바로 사용할 수 있는 파일을 준비했습니다.
여기를 다운로드하여 모든 폴더에 저장하십시오.
이 예에서는 Desktop에 넣습니다.

디렉토리 구조

/Users/aki-f/Desktop/my_template-master/

5. 터미널(명령 프롬프트)에서 다운로드한 디렉토리로 이동하여 필요한 패키지를 설치합니다.

Mac이라면 터미널/Windows라면 명령 프롬프트를 시작하고 아래와 같이 4.에서 다운로드한 폴더로 이동합니다.

command

cd /Users/aki-f/Desktop/my_template-master/

그런 다음 아래 명령을 입력하여 패키지를 설치합니다. (상당히 시간이 걸립니다.)

command

npm install

6. gulp로 시작합니다.

설치가 완료되면 아래 명령을 입력하여 Gulp를 시작할 수 있습니다.

command

gulp

무사히 브라우저에서 아래와 같은 화면이 열리면 성공입니다!

다시 Gulp를 시작하고 싶을 때

한번 PC를 셧다운한 등・・・Gulp를 떨어뜨리고 나서 다시 시작했을 때는, 이하의 순서로 기동할 수 있습니다.
1. 터미널을 시작하고 5.에서 만든 디렉토리 이동을 수행합니다.
2. gulp를 입력하고 실행

두 번째 ~ Gulp 사용 방법

위의 4-6을 수행하여 Gulp 환경을 구축할 수 있습니다.

이미지 경량화 작업 시작 방법

이미지 경량화 태스크는 상시 기동하고 있으면 엄청 무겁게 되어 버렸으므로, watch 태스크에 넣고 있지 않습니다.
이미지를 저장할 때마다 터미널에서 다음 명령을 실행하십시오.

command

gulp optimizeImage

기타 보충

htps : // 기주 b. 코 m / 아키 0923f / my_ mp ぁ 내의 파일의 사용 방법은 README.md 에 기재되어 있으므로, 함께 봐 주세요.

또, 뭔가 개선점이나 눈치채는 점이 있으면 피드백 받을 수 있으면 기쁩니다.