Gulp

본문http://www.w3ctech.com/topic/134 작가 님 의 번역 과 집필 에 감 사 드 립 니 다.
Gulp 는 일반적인 작업 을 자동 으로 수행 할 수 있 는 구축 시스템 입 니 다.예 를 들 어 사전 처리 CSS 를 컴 파일 하고 자바 스 크 립 트 를 압축 하 며 브 라 우 저 를 새로 고침 함으로써 사이트 개발 과정 을 개선 할 수 있 습 니 다.
Gulp 는 GitHub 에서 찾 을 수 있 는 오픈 소스 프로젝트 입 니 다.Gulp 홈 페이지 주소http://www.gulpjs.com.cn/
What Is Gulp?
Gulp 는 구축 시스템 으로 개발 자 는 이 를 사용 하여 사이트 개발 과정 에서 흔히 볼 수 있 는 임 무 를 자동 으로 수행 할 수 있 습 니 다.Gulp 는 Node.js 를 기반 으로 구축 되 었 기 때문에 Gulp 원본 파일 과 작업 을 정의 하 는 Gulp 파일 은 모두 JavaScript(또는 CoffeeScript)에 기록 되 었 습 니 다.전단 개발 엔 지 니 어 는 또한 자신 이 익숙 한 언어 로 작업 을 작성 하여 lint JavaScript 와 CSS,템 플 릿 분석 및 파일 이 변동 할 때 LESS 파일 을 컴 파일 할 수 있 습 니 다(물론 이것 은 작은 예 일 뿐 입 니 다).
Installing Gulp
Gulp 를 설치 하 는 과정 은 매우 간단 하 다.우선,Gulp 패 키 지 를 전역 에 설치 해 야 합 니 다.

npm install -g gulp

그리고 프로젝트 에 Gulp 를 설치 합 니 다.

npm install --save-dev gulp

Using Gulp
자 바스 크 립 트 파일 을 압축 하기 위해 Gulp 작업 을 만 듭 니 다.먼저 gulpfile.js 라 는 파일 을 만 듭 니 다.이것 은 Gulp 작업 을 정의 하 는 곳 입 니 다.gulp 명령 을 통 해 실행 할 수 있 고 다음 코드 를 gulpfile.js 파일 에 넣 을 수 있 습 니 다.

var gulp = require('gulp'),
   uglify = require('gulp-uglify');

gulp.task('minify', function () {
   gulp.src('js/app.js')
      .pipe(uglify())
      .pipe(gulp.dest('build'))
});

그리고 npm 에서npm install -–save-dev gulp-uglify를 실행 하여 gulp-uglify 를 설치 하고 마지막 으로 gulp minify 를 실행 하여 임 무 를 수행 합 니 다.js 디 렉 터 리 에 app.js 파일 이 있다 고 가정 하면 새로운 app.js 는 컴 파일 디 렉 터 리 에 생 성 됩 니 다.js/app.js 의 압축 내용 을 포함 합 니 다.
what happended? 우 리 는 단지 gulpfile.js 에서 약간의 일 을 했다.우선,우 리 는 gulp 와 gulp-uglify 를 불 러 옵 니 다.

var gulp = require('gulp'),
    uglify = require('gulp-uglify');

우 리 는 minify 라 는 작업 을 정 의 했 습 니 다.실행 할 때 함 수 를 호출 합 니 다.이 함 수 는 두 번 째 매개 변수 가 될 것 입 니 다.

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

});

마지막 으로 어 려 운 점도 있 습 니 다.우 리 는 임 무 를 무엇 을 해 야 하 는 지 정의 해 야 합 니 다.

 gulp.src('js/app.js')
   .pipe(uglify())
   .pipe(gulp.dest('build'))

만약 당신 이 데이터 흐름 에 대해 매우 익숙 하 다 면,위 에서 제공 한 코드 는 당신 에 게 큰 의미 가 없습니다.
gulp.src()방법 은 glob(예 를 들 어 하나 이상 의 파일 과 일치 하 는 문자열)또는 glob 배열 을 입력 한 다음 플러그 인 에 전달 할 수 있 는 데이터 흐름 을 되 돌려 줍 니 다.
Gulp 는 node-glob 를 사용 하여 지정 한 glob 에서 파일 을 가 져 옵 니 다.아래 의 예 를 들 어 설명 하여 이해 하 시기 바 랍 니 다.
js/app.js 는 파일 js/*.js 와 정확하게 일치 합 니 다.js 디 렉 터 리 의 모든 접미사 가.js 인 파일 js/*/.js 는 js 디 렉 터 리 와 하위 디 렉 터 리 의 모든 접미사 가.js 인 파일 과 일치 합 니 다!js/app.js 는 일치 하 는 결과 에서 js/app.js 를 제외 합 니 다.이 방법 은 특수 파일 을 제외 한 모든 파일 과 일치 하려 면 매우 유용 합 니 다*.+(js|css)일치 하 는 루트 디 렉 터 리 에 있 는 모든 접미사 가.js 또는.css 인 파일 입 니 다.
gulp.task()함 수 는 보통 작업 을 정의 하 는 데 사 용 됩 니 다.간단 한 작업 을 정의 할 때 작업 이름과 실행 함수 두 속성 을 입력 해 야 합 니 다.

gulp.task('greet', function () {
   console.log('Hello world!');
});

gulp greet 를 실행 한 결 과 는 콘 솔 에"Hello World"를 출력 하 는 것 입 니 다.
하나의 임 무 는 때때로 일련의 임무 일 수도 있다.만약 에 하나의 작업 build 를 정의 하여 css,js,imgs 라 는 세 가지 임 무 를 수행 하려 면 함수 가 아 닌 하나의 작업 배열 을 지정 하여 완성 할 수 있 습 니 다.

gulp.task('build', ['css', 'js', 'imgs']);

Gulp 에는 600 개가 넘 는 플러그 인 이 있 습 니 다.플러그 인 페이지 나 npm 에서 gulpplugin 을 검색 하여 플러그 인 목록 을 탐색 할 수 있 습 니 다."gulpfriendly"탭 을 가 진 플러그 인 중 일 부 는 플러그 인 이 라 고 할 수 없 지만,Gulp 에서 정상적으로 실행 할 수 있 습 니 다.앞의 js 미 션 으로 상세 하 게 설명 합 시다.

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

여기에 세 개의 플러그 인,gulp-jshint,gulp-uglify,gulp-concat 를 사 용 했 습 니 다.
uglify()함수 압축 코드 concat('app.js')함수 가 모든 파일 을 app.js 라 는 파일 에 통합 합 니 다.
Gulp 는 파일 의 수정 동 태 를 감청 한 다음 파일 이 변경 되 었 을 때 하나 이상 의 작업 을 수행 할 수 있 습 니 다.이 특성 은 매우 유용 하 다.LESS 파일 을 저장 할 수 있 습 니 다.이 어 Gulp 는 자동 으로 CSS 파일 로 변환 하고 브 라 우 저 를 업데이트 합 니 다.
gulp.watch()방법 을 사용 하면 파일 을 감청 할 수 있 습 니 다.glob 나 glob 배열(gulp.src()과 마찬가지)과 작업 배열 을 받 아들 여 리 셋 을 수행 할 수 있 습 니 다.
아래 를 살 펴 보 겠 습 니 다.build 작업 은 템 플 릿 을 html 형식 으로 변환 할 수 있 습 니 다.그리고 워 치 작업 을 정의 하여 템 플 릿 파일 의 변 화 를 감청 하고 이 템 플 릿 을 html 형식 으로 변환 하 기 를 원 합 니 다.watch 함수 의 사용 방법 은 다음 과 같다.

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

현재 템 플 릿 파일 을 바 꿀 때 build 작업 이 실행 되 고 HTML 파일 을 생 성 할 수 있 으 며,작업 배열 이 아 닌 watch 함수 에 반전 함 수 를 줄 수 있 습 니 다.
다음은 gulpfile.js 에 적 힌 코드 를 연결 해 드 리 겠 습 니 다.gulpfile.js 에 오신 것 을 환영 합 니 다.