nodejs에서 gulp는 무엇을 의미합니까?

gulp는 프런트 엔드 개발 프로세스의 흐름 기반 코드 구성 도구로, Nodejs 기반의 자동 작업 실행기로서 웹 사이트 리소스를 최적화할 수 있을 뿐만 아니라 테스트, 검사, 병합 및 압축도 자동으로 완료할 수 있습니다. 프런트엔드 코드를 포맷하고, 브라우저를 자동으로 새로 고치고, 배포 파일을 생성하고, 파일을 모니터링하여 변경 후 지정된 단계를 반복합니다. 이를 사용하면 즐겁게 코드를 작성할 수 있을 뿐만 아니라 작업 효율성도 크게 향상됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, nodejs 버전 16, DELL G3 컴퓨터.

1. 꿀꺽꿀꺽이란 무엇인가요?

　gulp는 프런트 엔드 개발 프로세스의 흐름 기반 코드 구성 도구로, 웹 사이트 리소스를 최적화할 수 있을 뿐만 아니라 개발 프로세스 중 많은 반복 작업도 자동화할 수 있습니다. 올바른 도구를 사용하면 코드를 즐겁게 작성할 수 있을 뿐만 아니라 작업 효율성도 크게 향상됩니다.

　gulp는 Nodejs 기반의 자동 작업 실행기로서 테스트, 검사, 병합, 압축, 프런트엔드 코드 서식 지정, 자동 브라우저 새로 고침, 배포 파일 생성 및 변경 후 반복적으로 지정되는 파일 모니터링을 자동으로 완료할 수 있습니다. . 단계.

2.플로우란?

흐름, 흐름, 파일을 강과 비교하면 한 강이 흘러나오고 다른 강이 유입됩니다. 이것이 gulp가 파일 흐름에서 작동하는 방식입니다.

　 이 작업은 jQuery의 체인 작업과 다소 유사합니다: $("").html("gg").css({}).parent().find("a")...... ; 스트림을 사용할 때 gulp는 중간 파일을 제거하고 최종 출력만 디스크에 기록하므로 전체 프로세스가 더 빨라집니다.

3. Gulp 설치

gulp는 노드 환경을 기반으로 합니다. 먼저 노드가 설치되어 있는지 확인하세요

(설치, 제거, 관리 종속성 등 포함)]도 자동으로 설치됩니다

npm 설치 플러그인은 외국 서버에서 다운로드되기 때문에 네트워크의 영향을 많이 받고 이상 현상이 발생할 수 있으므로 타오바오에서 제공하는 cnpm을 사용하는 것이 가장 좋습니다.

　cnpm 설치: http://npm.taobao.org/

설치 후 cnpm 버전을 확인하여 설치가 성공적인지 확인하세요

다음으로 gulp를 설치할 수 있습니다. 먼저 gulp를 전역적으로 설치하세요. cnpm install

-g gulp

그런 다음 데스크탑 데모/bbs2.0/src로 이동하여 bash 환경으로 들어간 다음 cnpm install gulp를 사용하여 현재 디렉토리에 gulp를 설치합니다

설치 성공 후 node_modules 폴더가 나타나고 cnpm init를 통해 package.json을 생성합니다. (노드 프로젝트 구성 파일: 노드 플러그인 패키지가 상대적으로 크기 때문에 버전 관리는 포함되지 않습니다. 패키지에 구성 정보를 씁니다. .json이 버전 관리에 추가되었으며, 이에 따라 다른 개발자도 다운로드할 수 있습니다)

Enter를 끝까지 누르면 현재 폴더에 package.json 파일이 생성됩니다. gulp를 사용하여 gulp를 시작하려고 하면 오류가 보고된다는 것을 알게 될 것입니다

　오류 메시지에 따르면 gulpfile.js 파일을 만들어야 합니다

　그런 다음 gulp를 실행하세요

　우리에게 필요한 "ok"가 인쇄되어 있으며 gulp는 기본적으로 여기에서 정상적으로 작동할 수 있습니다.

4 gulp

에 일반적으로 사용되는 플러그인

　　js 디렉토리에 두 개의 새로운 js 파일을 생성합니다

　　 gulpfile 파일을 편집합니다. 다음과 같습니다:

2개의 플러그인 gulp-uglify 및 gulp-concat을 사용하므로 먼저 이 두 플러그인을 현재 디렉터리에 설치해야 합니다.

다음과 같은 경우 --save-dev를 사용합니다. 플러그인 설치 package.json에 추가한 후 package.json에 파일이 성공적으로 작성되었는지 확인할 수 있습니다.

　　　 예, 설치 후 해당 디렉터리에 gulp-concat을 계속 설치합니다. 완료되면 node_modules를 클릭하면 플러그인이 성공적으로 설치된 것을 확인할 수 있습니다. 이제 gulp를 시작해 보겠습니다.

　　 오류가 보고되지 않으면 성공한 것입니다. 다음으로 파일을 확인하고 찾으세요. src 아래에 우리가 압축하고 병합하고 싶은 all.min이 있습니다.

　　설치를 클릭하면 sass 설치 방법과 ruby ​​설치 방법이 나옵니다

成功 RUBY 설치 성공 후 Ruby 버전을 확인하세요

성공 후 GEM을 통해 SASS

를 설치하세요. Compass(Compass, Sass, jQuery, JS와 동일)를 사용해야 하는데, Compass를 설치해서 그런데로 설치해야 한다면 Up

　 여기서 주목해야 할 것은 gem 소스의 문제입니다. , 이로 인해 설치가 실패하게 됩니다. 다음과 같은 오류가 보고됩니다. SSL_connect return=1 errno=0 state=SSLv3 읽기 서버 인증서 B: 인증서 확인에 실패했습니다. gem 소스를 https://ruby.taobao.org/로 변경할 수 있습니다. 그래도 작동하지 않으면 http://gems.ruby-china.org/로 변경하세요. 다음으로, compass create를 사용해 sass 프로젝트를 생성하세요

　　　성공적으로 생성되면 sass, stylesheets, config.rb 세 파일이 자동으로 생성됩니다

　　 sass에서 아무 파일이나 열고 편집하세요

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　를 설치하고 gulp-sass 및 현재 디렉터리로 이동

gulp를 시작한 후 스타일시트에서 해당 파일을 확인하세요

　　좋아, sass가 성공적으로 컴파일되었습니다 css

　　

3) gulp-minify-css를 통해 css를 압축

　　gulp 시작 후

　　

4) gulp-load 사용 -플러그인 로드에 도움이 되는 플러그인

　　gulp -load-plugins 플러그인 package.json 파일에 gulp 플러그인을 로드하는 데 자동으로 도움을 줄 수 있습니다

require('gulp-load-plugins')();

이름 지정)

) Gulp-Imagemin 및 Imagemin-PNGQUANT 압축 그림

6) Gulp-LiveroELOAD는 새 페이지에서 제공됩니다. 첫 번째 설치 Gulp-LiverLoad: CNPM 설치 Gulp-LiverLoad 다음은 HTML 압축 및 압축 SASS 컴파일 목록입니다. 아래 웹페이지

노드 관련 지식을 더 보려면

nodejs 튜토리얼

을 방문하세요!

위 내용은 nodejs에서 gulp는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!