Gulp는 프런트엔드 개발 프로세스의 흐름 기반 코드 구성 도구입니다. Nodejs 기반의 자동 작업 실행기로서 웹 사이트 리소스를 최적화할 수 있을 뿐만 아니라 테스트, 검사, 병합, 압축 및 형식 지정도 자동으로 완료할 수 있습니다. 프런트엔드 코드의 경우 자동으로 브라우저를 새로 고치고 배포 파일을 생성하며 파일을 모니터링하여 변경 후 지정된 단계를 반복합니다. 이를 사용하면 즐겁게 코드를 작성할 수 있을 뿐만 아니라 작업 효율성도 크게 향상됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, nodejs 버전 16, DELL G3 컴퓨터.
1. 꿀꺽꿀꺽이란 무엇인가요?
Gulp는 프론트 엔드 개발 프로세스의 흐름 기반 코드 구성 도구로, 웹 사이트 리소스를 최적화할 수 있을 뿐만 아니라 개발 프로세스 중 많은 반복 작업을 올바른 코드를 사용하여 자동으로 완료할 수 있습니다. 도구를 사용하면 코드를 즐겁게 작성할 수 있을 뿐만 아니라 작업 효율성도 크게 향상됩니다.
Gulp는 Nodejs를 기반으로 하는 자동 작업 실행기로서 테스트, 검사, 병합, 압축, 프런트엔드 코드 형식 지정, 자동 브라우저 새로 고침, 배포 파일 생성 및 파일 모니터링을 자동으로 완료하여 변경 후 지정된 단계를 반복할 수 있습니다.
2. 흐름이란 무엇입니까?
흐름, 흐름, 파일을 강과 비교한 다음 한 강은 흘러 나가고 다른 강은 유입됩니다. 이것이 gulp가 파일 스트림에서 작동하는 방식입니다. 이와 같이 한 작업의 출력이 다른 작업의 입력으로 사용됩니다.
이 작업은 jQuery의 체인 작업과 다소 유사합니다. $("").html("gg").css({}).parent().find("a").......; , gulp는 중간 파일을 제거하고 최종 출력만 디스크에 기록하므로 전체 프로세스가 더 빨라집니다.
3. 꿀꺽꿀꺽 설치
Gulp는 노드 환경을 기반으로 합니다. 먼저 노드가 설치되어 있는지 확인하세요.
노드가 설치되면 npm [(노드 패키지 관리자) nodejs 패키지 관리자, 노드 플러그인 관리(설치, 제거, 종속성 관리 등 포함)에 사용]도 자동으로 설치됩니다.
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을 버전 관리에 추가하면 다른 개발자가 그에 따라 다운로드할 수 있습니다.)
끝까지 입력하시면 현재 폴더에 package.json 파일이 생성됩니다. 이때 gulp를 사용하여 gulp를 시작하려고 하면 오류가 보고되는 것을 볼 수 있습니다.
오류 메시지에 따르면 gulpfile.js 파일을 생성해야 합니다.
그런 다음 gulp를 실행하십시오.
우리에게 필요한 "ok"가 인쇄되어 있고 gulp는 기본적으로 여기에서 정상적으로 작동할 수 있습니다.
4. gulp에서 일반적으로 사용되는 플러그인 사용
1) 병합된 파일 압축
새 index.html 파일 만들기
js 디렉터리에 두 개의 새 js 파일을 만듭니다.
꿀꺽꿀꺽 파일을 편집하세요. 다음과 같이:
우리는 gulp-uglify와 gulp-concat라는 두 가지 플러그인을 사용하므로 먼저 이 두 플러그인을 현재 디렉터리에 설치해야 합니다.
플러그인 설치 시 --save-dev를 사용하여 package.json에 추가하면 package.json에 파일이 성공적으로 작성되었는지 확인할 수 있습니다.
좋습니다. 설치가 완료된 후 node_modules를 클릭하면 플러그인이 성공적으로 설치되었음을 알 수 있습니다. 이제 gulp를 시작하겠습니다.
좋습니다. 오류가 보고되지 않으면 성공한 것입니다. 다음으로 파일을 확인하고 src 아래에 압축하고 병합하려는 all.min.js 파일이 있는지 확인하세요.
2) 꿀꺽꿀꺽
Sass를 설치하려면 먼저 Ruby를 설치하고 Sass 튜토리얼에 들어가야 합니다.
설치를 클릭하면 Sass와 Ruby 설치 방법에 대한 지침이 제공됩니다.
Ruby가 성공적으로 설치되면 Ruby 버전을 확인합니다.
성공 후 gem을 통해 sass를 설치합니다.
compass를 사용해야 하는 경우(compass와 sass의 관계는 jQuery 및 js와 동일함) compass를 설치하세요.
여기서 주목해야 할 점은 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-compass를 설치하십시오.
gulp를 시작한 후 스타일시트에서 해당 파일을 확인하세요.
좋아, sass가 CSS로 성공적으로 컴파일되었습니다.
3) gulp-minify-css를 통해 CSS를 압축합니다.
꿀꺽꿀꺽 시작한 후
4) gulp-load-plugins를 사용하여 플러그인 로드를 도와주세요.
gulp-load-plugins 플러그인은 package.json 파일에 gulp 플러그인을 자동으로 로드할 수 있습니다.
gulpfile에는 require('gulp-load-plugins')()만 필요합니다.
아래 플러그인을 사용하세요.** (여러 단어는 카멜 표기법으로 명명됩니다.)
5) gulp-imagemin 및 imagemin-pngQuant 이미지 압축
6) 웹 페이지를 자동으로 새로 고치는 gulp-livereload
먼저 gulp-livereload를 설치하세요: cnpm install gulp gulp-livereload, 여기서 열은 압축된 HTML과 컴파일 및 압축된 sass입니다.
그런 다음 꿀꺽 파일에서
새로 고침 없음을 성공적으로 달성하려면
1. 크롬 플러그인 라이브리로드 지원도 필요하니 벽을 넘으세요.
2. 서버 환경에서 웹 페이지 열기