Gulp.js 시작하기

Gulp는 자바 스크립트 기반 도구로 워크 플로의 일부를 자동화 할 수 있습니다. 자동화 기능은 말 그대로 하루에 몇 시간을 절약 해줍니다. 개발자가 되든 HTML 와이어 프레임을 생성하는 디자이너이든 관계없이.

이 기사에서는 설치에서 기본 구문 및 몇 가지 예와 같이 Gulp 사용의 기본 사항을 살펴 보겠습니다. 기사가 끝날 때까지 Gulp 용으로 만든 패키지를 찾아 설치하고 사용하십시오. SASS 컴파일, 이미지 최적화, 스프라이트 생성, 파일 결합 등!

Gulp 설치

걱정하지 마십시오. 설치가 매우 쉽습니다. OSX 및 Linux에서 터미널을 사용하거나 Windows 용 명령 프롬프트를 사용해야합니다. 나는 지금부터 터미널로 언급 할 것이다..

그것을 열고 npm -v를 입력하고 엔터 키를 누릅니다. 표시된 버전 번호가 보이면 이미 노드가 설치되어 있습니다 - 이것은 Gulp에 대한 종속성입니다.

네가 “명령어를 찾을수 없음” (또는 비슷한 오류), Node.js 다운로드 페이지로 가서 귀하의 시스템에 적합한 패키지를 선택하십시오. 일단 설치되면 터미널에서 npm 명령을 사용할 수 있습니다..

Gulp를 설치하는 것은 쉬운 일입니다. 다음 명령을 터미널에 붙여 넣으십시오.

npm 설치 - 글로벌 gulp

그러면 시스템에 전역 적으로 사용할 수있는 Gulp 명령이 설치됩니다.

프로젝트에 꿀꺽 꿀꺽 마시는 것 추가하기

Gulp가 설치되었지만 필요로하는 각 프로젝트에 Gulp를 별도로 추가해야합니다. 이제 빈 폴더를 만들어 터미널에서 탐색하십시오. 프로젝트 폴더에서 다음 명령을 사용하십시오.

npm install --save-dev 꿀꺽 꿀꺽 마심

그러면 프로젝트 폴더에 node_modules 폴더와 npm-debug.log 파일이 생성됩니다. 이것들은 Gulp가 프로젝트에 그 일을하기 위해 사용합니다. 여러분은이 단계에서 그들에 대해 생각할 필요가 없습니다..

각 특정 프로젝트에 Gulp를 추가해야하는 이유는 각 프로젝트마다 다른 요구 사항이 있습니다.. 하나는 SASS를, 다른 하나는 Less를 요구할 수 있습니다. 하나는 Coffeescript를 사용하고 다른 하나는 사용할 수 없습니다..

Gulpfile

Gulpfile은 마법이 일어나는 곳입니다. 필요한 자동화 과 당신이 그들을 원할 때. 이름이 지정된 파일을 만들어 빈 기본 작업을 만듭니다. gulpfile.js 다음 코드를 붙여 넣습니다..

var gulp = require ( 'gulp'); gulp.task ( 'default', function () // 이것은 현재 아무것도하지 않고 곧 기능을 추가 할 것입니다);

이 파일이 저장되면 터미널로 돌아가서 gulp 명령을 단독으로 실행할 수 있습니다. Gulp는 현재 어느 프로젝트에 있는지 감지하고 기본 작업 (방금 만든 작업)을 실행합니다. 다음과 같은 내용을보아야합니다.

작업이 비어 있지만 실제로는 아무 일도 일어나지 않지만 제대로 작동합니다. 이제 적절한 예를 들어 보겠습니다.!

파일 복사

이것은 지루한 것입니다, 나는 그만큼 인정할 것입니다, 그러나 그것은 여러분이 쉽게 무슨 일이 벌어지고 있는지를 이해하는 데 도움이 될 것입니다..

프로젝트 폴더에서 이름이 지정된 파일을 만듭니다. to_copy.txt , 및 폴더 이름 dev. 우리의 Gulpfile에 들어가서 이름 붙여진 새로운 작업을 만들어 봅시다. 부.

gulp.task ( 'copy', function () gulp.src ( 'to_copy.txt') .pipe (gulp.dest ( 'dev')););

첫 번째 행은 copy라는 태스크를 정의합니다. 이 안에서 우리는 gulp.src를 사용하여이 작업으로 어떤 파일을 대상으로 지정 할지를 지정합니다.이 경우에는 이름이 지정된 단일 파일입니다 to_copy.txt.

그런 다음이 파일을 gulp.dest 함수로 파이프합니다. 여기서 gulp.dest 함수는이 파일을 저장할 위치를 지정합니다. dev 디렉토리.

터미널로 돌아가서 다음을 입력하십시오. 꿀꺽 꿀꺽 마심 이 작업을 실행하려면 지정된 파일을 다음과 같이 지정된 디렉토리로 복사해야합니다.

파이프 명령은 Gulp의 핵심입니다. 명령간에 데이터를 이동하는 효율적인 방법입니다. src 명령은 dest 명령에 파이프되는 파일을 지정합니다. 보다 복잡한 시나리오에서는 대상을 지정하기 전에 파일을 다른 명령으로 파이프합니다.

소스는 하나의 파일 또는 여러 파일로 제공 될 수 있음을 알아야합니다. 이름이 붙은 폴더가 있다면 생산 우리는 우리의 모든 파일을 개발 폴더에 넣으면 다음 명령을 사용할 수 있습니다.

gulp.task ( 'copy', function () gulp.src ( 'development / *') .pipe (gulp.dest ( 'production')););

별표 문자는 디렉토리 내의 모든 것과 일치합니다. 모든 하위 디렉토리 내의 모든 파일을 일치시킬 수 있으며 모든 종류의 멋진 일치를 수행 할 수 있습니다. 자세한 정보는 node-glob 문서를보십시오..

SASS 컴파일

스타일 시트를 SASS 파일로 컴파일하는 것은 개발자에게 공통적 인 작업입니다. 꿀꺽 꿀꺽하고 쉽게 할 수 있지만, 준비는 좀해야합니다. src, dest 및 다른 여러 명령과 같은 기본 명령 외에 모든 기능은 타사 추가 기능을 통해 추가됩니다. 사용 방법은 다음과 같습니다..

나는 타이핑한다. SASS 꿀꺽 꿀꺽 마심 Google에 첫 번째 결과가 필요한 경우 일반적으로 SASS 패키지 페이지를 찾아야합니다. 설치 방법을 알려줍니다 (npm install gulp-sass). 관리자로 설치하려면 sudo를 사용해야 할 가능성이 있습니다 (sudo npm install gulp-sass). .

끝나면 패키지가 지시하는 구문을 사용하여 코드를 컴파일 할 수 있습니다. 이렇게하려면 다음 내용으로 styles.scss 파일을 만듭니다.

$ 기본 : # ff9900; body background : $ primary; 

이제 Gulp 파일에 다음 Gulp 작업을 만듭니다..

gulp.task ( 'sass', function () gulp.src ( '*. scss') .pipe (sass ()) .pipe (gulp.dest ( './ css')););

명령을 실행하기 전에 다음과 같이 Gulpfile 맨 위의 패키지를 '요구'하는 것을 잊지 마십시오.

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

당신이 달릴 때 꿀꺽 꿀꺽 마심, scss 확장자를 가진 모든 파일은 sass 함수로 파이프되어 css로 변환됩니다. 이것들은 css 폴더에 저장되는 대상 함수로 파이프됩니다.

파일 및 폴더보기

지금까지이 모든 것이 편리하지만 여전히 명령을 입력해야합니다. 매번 우리는 작업을 실행하고 싶습니다. 특히 스타일 시트 변경과 관련해서는 그렇게 효율적이지 않습니다. Gulp를 사용하면 변경 사항을 확인하고 명령을 자동으로 실행할 수 있습니다..

Gulpfile에서 다음과 같은 명령을 작성하십시오. 자동화하다 watch 명령을 사용하여 변경 사항에 대한 파일 세트를보고 파일이 변경되면 특정 명령을 실행합니다.

gulp.task ( 'automate', function () gulp.watch ( '*. scss', [ 'sass']););

입력 할 경우 꿀꺽 자동화 터미널에 입력하면 작업을 시작하고 완료하지만 변경 사항을 모니터링하기 때문에 프롬프트로 돌아 가지 않습니다. 우리는 루트 디렉토리에있는 모든 scss 파일을보고 싶다고 지정했으며, 변경된 경우 이전에 설정 한 sass 명령을 실행하려고합니다.

style.scss 파일을 변경하면 css 디렉토리 내의 css 파일에 자동으로 컴파일되어야합니다..

여러 작업 실행

여러 작업을 실행하려는 경우가 많이 있습니다. 자바 스크립트 폴더를 볼 때 두 파일을 결합하여 컴파일 한 후 축소 시키십시오. 이 작업을 수행 할 수있는 두 가지 방법이 있습니다..

작업이 관련되어 있으면 그들을 묶다. 좋은 예는 자바 스크립트 파일의 연결 및 축소입니다. 먼저 concat 액션으로 파일을 파이프 한 다음 gulp-uglify로 파이프 처리 한 다음 destination 함수를 사용하여 출력합니다..

작업이 관련이없는 경우 여러 작업 호출. 예를 들어, 스크립트를 연결하고 축소하고 SASS를 컴파일하려는 작업이 있습니다. 여기에 그가 어떻게 보일지에 대한 전체 Gulpfile이 있습니다..

var gulp = require ( 'gulp'); var uglify = require ( 'gulp-uglify'); var concat = require ( 'gulp-concat'); var sass = require ( 'gulp-sass'); .pipe (gulp.dest ( '.')) gulp.task ( 'scripts', function () gulp.src ( 'js / ** / *. js') .pipe (concat ( 'scripts.js' ) .pipe (uglify ()) .pipe (gulp.dest ( '.'))); gulp.task ( './ css'));); gulp.task ( 'styles', function () gulp.src ( '/ *. scss') .pipe (sass ()) .pipe gulp.task ( '자동화', function () gulp.watch ([ '*. scss', 'js / ** / *. js'], [ 'scripts', 'styles'])); gulp.task ( 'default', [ 'scripts', 'styles']);

입력 할 경우 꿀꺽 꿀꺽 마는 스크립트 터미널에 js 디렉토리 내의 모든 javascript 파일을 연결하여 기본 디렉토리로 출력 한 다음 uglified하고 기본 디렉토리에 저장합니다..

입력 할 경우 꿀꺽 꿀꺽 마심, 모든 scss 파일이 컴파일되어 css 디렉토리에 저장됩니다..

입력 할 경우 꿀꺽 꿀꺽 마심 (기본 작업), 스크립트 작업이 실행되고 그 다음에 작업이 실행됩니다. 스타일 태스크.

그만큼 꿀꺽 자동화 task는 scss 및 js 파일의 변경 사항을 여러 폴더에서 감시하고 변경이 감지되면 정의한 두 작업을 모두 수행합니다.

개요

Gulp를 사용하는 것은 어렵지 않습니다. 실제로 많은 사람들이 단순한 구문 때문에 Grunt보다 선호합니다. 새 자동화를 만들 때 수행 할 단계를 기억하십시오.

• 플러그인 검색
• 플러그인 설치
• Gulpfile에 플러그인 필요
• 설명서의 구문 사용

Gulp (task, run, watch, src, dest)에서 사용할 수있는 다섯 가지 명령 만 알고 있어야합니다. 모든 타사 추가 기능은 훌륭한 문서를 가지고 있습니다. 다음은 제가 지금부터 시작할 수있는 몇 가지 것들입니다 :

• 꿀꺽 거리는 이미지 최적화로 이미지 최적화
• 꿀꺽 꿀꺽 마귀 스프라이트로 이미지 스프라이트 만들기
• 파일을 꺽쇠 - 연결로 연결하기
• gulp-uglify로 파일 축소하기
• 꿀꺽 꿀꺽 거리는 파일로 파일 삭제하기
• gulp-jslint를 사용하는 자바 스크립트 linting
• gulp-jsonlint와 JSON linting
• 자동 프리픽스 CSS와 gulp-autoprefixer
• gulp-frep를 사용하여 검색 및 바꾸기
• gulp-minify-css로 CSS 축소