꿀꺽꿀꺽 마시다

gulp.js
꿀꺽 삼키다
Gulp.js Logo.svg
원저작자에릭 쇼프스톨
개발자블레인 부블리츠, 에릭 쇼프스톨
초기 릴리즈2013년 9월 26일, 8년 전(2013-09-26)[1]
안정된 릴리스
4.0.2 / 2019년 5월 6일, 3년 전(2019-05-06)[2]
저장소github.com/gulpjs/gulp
기입처자바스크립트
운영 체제Linux, macOS, Windows
플랫폼Node.js
유형툴킷
면허증.MIT 라이선스[3][4]
웹 사이트gulpjs.com Edit this on Wikidata

gulp은 Eric Schoffstall이[5] 만든 오픈 소스 JavaScript 툴킷으로, 프론트 엔드 웹 개발에서 스트리밍 빌드 시스템(패키지 중심의 Make와 유사)으로 사용됩니다.

이것은 Node.js 및 npm에 구축된 태스크 러너로, 최소화, 연결, 캐시 버스트, 유닛 테스트, 보풀링, 최적화 [6]등 시간이 많이 걸리는 반복적인 웹 개발 작업의 자동화에 사용됩니다.

gulp은 Code-over-Configuration 접근방식을 사용하여 태스크를 정의하고 소규모 단일 목적 플러그인에 의존하여 작업을 수행합니다.Gulp 생태계에는 3500개 이상의 플러그인이 [7]포함되어 있습니다.

개요

gulp은[8] 노드 스트림에 구축된 JavaScript 빌드 도구입니다.이러한 스트림은 [9]파이프라인을 통한 파일 작업 연결을 용이하게 합니다.gulp은 파일 시스템을 읽고, 하나의 단일 연결 플러그인에서 다른 플러그인으로 데이터를 파이프합니다..pipe()오퍼레이터, 한 번에 한 작업씩 수행합니다.모든 플러그인이 처리될 때까지 원본 파일은 영향을 받지 않습니다.원본 파일을 수정하거나 새 파일을 생성하도록 구성할 수 있습니다.이를 통해 다수의 플러그인을 연결하여 복잡한 작업을 수행할 수 있습니다.또한 사용자는 자체 플러그인을 작성하여 자체 [10]태스크를 정의할 수도 있습니다.구성별로 태스크를 실행하는 다른 태스크 러너와 달리 gulp은 태스크를 정의하기 위해 JavaScript와 코딩에 대한 지식이 필요합니다.gulp은 작업 실행과 별도로 파일을 한 위치에서 다른 위치로 복사하거나 컴파일, 전개, 알림 작성, 유닛 테스트, 보풀 [5]등을 수행할 수 있는 빌드 시스템입니다.

태스크 러너의 필요성

gulp이나 Grunt 등의 태스크 실행자는 여러 태스크를 실행할 때 기본 npm 스크립트가 비효율적이기 때문에 npm이 아닌 Node.js에 구축됩니다.npm 스크립트는 심플하고 구현하기 쉽기 때문에 선호하는 개발자도 있지만 gulp과 Grunt가 서로 우위에 있는 것처럼 보이는 방법은 많이 있습니다.기본적으로 제공되는 [11]스크립트도 있습니다.Grunt는 파일을 변환하여 태스크를 실행하고 임시 폴더에 새 태스크로 저장합니다.한 태스크의 출력은 대상 폴더에 도달할 때까지 다른 태스크의 입력으로 간주됩니다.여기에는 많은 I/O 호출과 많은 임시 파일 생성이 수반됩니다.파일 시스템을 통과하는 gul 스트림은 이러한 임시 위치를 필요로 하지 않지만 I/O 호출 수를 줄여 성능을 [12]향상시킵니다.Grunt는 구성 파일을 사용하여 작업을 수행하지만 Gulp에서는 빌드 파일을 코딩해야 합니다.Grunt에서 각 플러그인은 입력 위치를 이전 플러그인의 출력과 일치하도록 구성해야 합니다.단숨에 플러그인은 자동으로 파이프라인 [9]처리됩니다.

작동

Gulp 태스크는 Command-Line Interface(CLI;[11] 명령줄 인터페이스) 쉘에서 실행되며 2개의 파일이 필요합니다.package.jsonGUP용 각종 플러그인의 일람에 사용됩니다.gulpfile.js(또는 단순히gulpfile빌드 도구 규칙에 따라 패키지 소스 코드의 루트 디렉터리에 있는 경우가 많습니다.gulp 파일에는 빌드 태스크를 실행하기 위해 gulp이 필요한 대부분의 논리가 포함되어 있습니다.먼저 필요한 모듈이 모두 로드되고 다음으로 작업이 gulpfile로 정의됩니다.gulp 파일에 지정된 모든 필수 플러그인은 기본 태스크 실행 기준의 devDependencies 섹션에[13] 나열됩니다.$gulp개별 태스크는 gulp.task로 정의할 수 있으며, 이 작업은 다음과 같이 실행됩니다.gulp <task> <othertask>.[14] 복잡한 태스크는 다음과 같은 방법으로 플러그인을 연결함으로써 정의됩니다..pipe()오퍼레이터.[15]

gulpile의 해부도

gulpfile은 모든 연산이 한꺼번에 정의되는 장소입니다.gulpfile의 기본 구조는 맨 위에 포함된 필수 플러그인, 작업 정의 및 [16]맨 끝에 있는 기본 작업으로 구성됩니다.

플러그인

작업을 수행하는 데 필요한 설치된 플러그인은 다음 형식의 종속성으로 gulp 파일 [14][15]상단에 추가됩니다. 

//의존 관계 추가 변화하다 꿀꺽 삼키다 = 요구하다 ('실패');

임무들

그런 다음 태스크를 생성할 수 있습니다.gulp 태스크는 gulp.task에 의해 정의되며 태스크의 이름을 첫 번째 파라미터로, 함수를 두 번째 파라미터로 사용합니다.

다음으로 GUP 태스크의 작성 예를 나타냅니다.첫 번째 파라미터 taskName은 필수이며 셸 내의 작업을 [17]실행할 수 있는 이름을 지정합니다. 

꿀꺽 삼키다.작업('태스크명', 기능. () {   //무엇을 하다 });

또는 몇 가지 사전 정의된 기능을 수행하는 태스크를 생성할 수 있습니다.이러한 함수는 배열 형식으로 두 번째 매개 변수로 전달됩니다. 

기능. fn1 () {   // 뭔가를 하다 }  기능. fn2 () {  // 뭔가를 하다 }  // 함수 이름 배열이 있는 작업 꿀꺽 삼키다.작업('태스크명', 꿀꺽 삼키다.평행한(fn1, fn2));

기본 태스크

기본 작업은 gulp 파일 끝에 정의됩니다.에 의해 실행될 수 있습니다.gulp명령어를 지정합니다.다음 경우 기본 태스크는 아무 [15]작업도 수행하지 않습니다. 

// 기본 작업 GUP 꿀꺽 삼키다.작업('디폴트', fn);

기본 태스크는 위에서 정의한 임의의 수의 종속 서브태스크를 순차적으로 자동으로 실행하기 위해 gulp로 사용됩니다.gulp은 소스파일을 감시하고 파일이 변경되었을 때 적절한 태스크를 실행할 수도 있습니다.하위 작업은 두 번째 매개 변수에서 배열의 요소로 언급됩니다.이 프로세스는 기본 태스크를 실행하는 것만으로 트리거할 수 있습니다.gulp명령어를 [16]입력합니다.

태스크 예시

이미지 태스크

모듈 정의는 다음 시작 부분에 있을 수 있습니다.Gulpfile.js다음과 같이 합니다.

변화하다 이미지민 = 요구하다('남자-남자 여성');

후속 이미지 작업은 이미지를 최적화합니다. gulp.src()는 확장자가 .png, .gif 또는 .jpg인 모든 이미지를 디렉토리 'syslog-orig/'에 가져옵니다.

.pipe(imagemin())검색된 이미지를 최적화 프로세스를 통해 채널링합니다..pipe(gulp.dest())최적화된 이미지가 'module/' 폴더에 저장됩니다.없이.gulp.dest()이미지는 실제로 최적화되지만 [18]저장되지는 않습니다.최적화된 영상이 다른 폴더에 저장되므로 원본 영상은 [15]변경되지 않은 상태로 유지됩니다.

// 이미지 태스크 꿀꺽 삼키다.작업('실패', 기능. () {     돌아가다 꿀꺽 삼키다.src('140/*'{png,gif,jpg}')         .파이프(이미지민())         .파이프(꿀꺽 삼키다.증류('거리/점멸/')); });

스크립트 태스크

다음 예제에서는 디렉토리 스크립트/의 모든 JavaScript 파일이 다음과 같이 최적화되어 있습니다..pipe(uglify())그리고.gulp.dest('scripts/')는,[19] 원래의 파일을 출력으로 덮어씁니다.이를 위해서는 먼저 npm 패키지 설치에서 필요한 gulp-uglify[20] 플러그인으로 돌아가 gulp 파일 시작 시 모듈을 정의해야 합니다. 

// 스크립트 태스크 꿀꺽 삼키다.작업('실패', 기능. () {     돌아가다 꿀꺽 삼키다.src('cisco/.contain')         .파이프(우글라이프())         .파이프(꿀꺽 삼키다.증류('어느쪽인가/')); });

작업 감시

감시 태스크는 파일 변경에 반응하는 역할을 합니다.다음 예제에서는 지정된 [21]디렉토리에서 JavaScript 파일 또는 이미지가 변경되면 스크립트 및 이미지라는 이름의 작업이 호출됩니다. 

// 파일이 변경되면 작업 재실행 꿀꺽 삼키다.작업('시계', 기능. (cb) {     꿀꺽 삼키다.구경하세요('syslog/syslog/**', 스크립트);     꿀꺽 삼키다.구경하세요('*/*', 이미지들);     cb(); });

또한 Watch-tasks를 [22]사용하여 브라우저 콘텐츠 업데이트를 수행할 수 있습니다.이를 위해 다양한 옵션과 플러그인이 있습니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ "Release Date of Version 1.0.0". Retrieved 2020-12-31.
  2. ^ "Releases · gulpjs/gulp". Retrieved 2020-12-31.
  3. ^ "LICENSE file on GitHub". Retrieved 2020-12-31.
  4. ^ "License field from gulp - npm". Retrieved 2020-12-31.
  5. ^ a b Jed Mao; Maximilian Schmitt; Tomasz Stryjewski; Cary Country Holt; William Lubelski (2014). Developing a Gulp Edge (1st ed.). Bleeding Edge Press. ISBN 978-1-939902-14-6.
  6. ^ "Building With Gulp – Smashing Magazine". Smashingmagazine.com. Retrieved 2016-12-14.
  7. ^ "gulp.js plugin registry". Gulpjs.com. Retrieved 2016-12-14.
  8. ^ "gulpjs/gulp". GitHub. Retrieved 2016-09-22.
  9. ^ a b "substack/stream-handbook: how to write node programs with streams". GitHub. Retrieved 2016-12-14.
  10. ^ "gulpjs/gulp". GitHub. Retrieved 2016-09-22.
  11. ^ a b "gulpjs/gulp". GitHub. Retrieved 2016-09-23.
  12. ^ "Gulp for Beginners". CSS-Tricks. 2015-09-01. Retrieved 2016-12-14.
  13. ^ "install npm Documentation". docs.npmjs.com. Retrieved 2016-09-22.
  14. ^ a b "gulpjs/gulp". GitHub. Retrieved 2016-09-23.
  15. ^ a b c d Maynard, Travis (2015). Getting Started with Gulp. Packt Publishing Ltd. ISBN 9781784393472.
  16. ^ a b "An Introduction to Gulp.js - SitePoint". 2014-02-10. Retrieved 2016-09-23.
  17. ^ "gulp/API.md at 4.0 · gulpjs/gulp · GitHub". GitHub. 2016-05-12. Retrieved 2016-12-14.
  18. ^ "Durchstarten mit Gulp.js – Websites optimieren, Arbeitsabläufe automatisieren". Magazin.phlow.de. 2014-05-25. Retrieved 2016-12-14.
  19. ^ "Front-end Workflow mit Gulp - Liechtenecker". Liechtenecker.at. 2015-05-29. Retrieved 2016-12-14.
  20. ^ "gulp-uglify". Npmjs.com. Retrieved 2016-12-14.
  21. ^ "gulp-watch". Npmjs.com. Retrieved 2016-09-23.
  22. ^ "Browsersync + Gulp.js". Browsersync.io. Retrieved 2016-12-14.

문학.

  • Jed Mao; Maximilian Schmitt; Tomasz Stryjewski; Cary Country Holt; William Lubelski (2014). Developing a Gulp Edge (1st ed.). Bleeding Edge Press. ISBN 978-1-939902-14-6.
  • Den Odell (2014). "Build Tools and Automation". Pro JavaScript Development Coding, Capabilities, and Tooling. Apress. ISBN 978-1-4302-6268-8.
  • Maynard, Travis (2015). Getting Started with Gulp. Packt Publishing Ltd. ISBN 9781784393472.

외부 링크