gulp는 프런트 엔드 개발 프로세스의 흐름 기반 코드 구성 도구로, Nodejs 기반의 자동 작업 실행기로서 웹 사이트 리소스를 최적화할 수 있을 뿐만 아니라 테스트, 검사, 병합 및 압축도 자동으로 완료할 수 있습니다. 프런트엔드 코드를 포맷하고, 브라우저를 자동으로 새로 고치고, 배포 파일을 생성하고, 파일을 모니터링하여 변경 후 지정된 단계를 반복합니다. 이를 사용하면 즐겁게 코드를 작성할 수 있을 뿐만 아니라 작업 효율성도 크게 향상됩니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, nodejs 버전 16, DELL G3 컴퓨터.
1. 꿀꺽꿀꺽이란 무엇인가요?
gulp는 프런트 엔드 개발 프로세스의 흐름 기반 코드 구성 도구로, 웹 사이트 리소스를 최적화할 수 있을 뿐만 아니라 개발 프로세스 중 많은 반복 작업도 자동화할 수 있습니다. 올바른 도구를 사용하면 코드를 즐겁게 작성할 수 있을 뿐만 아니라 작업 효율성도 크게 향상됩니다.
gulp는 Nodejs 기반의 자동 작업 실행기로서 테스트, 검사, 병합, 압축, 프런트엔드 코드 서식 지정, 자동 브라우저 새로 고침, 배포 파일 생성 및 변경 후 반복적으로 지정되는 파일 모니터링을 자동으로 완료할 수 있습니다. . 단계.
2.플로우란?
흐름, 흐름, 파일을 강과 비교하면 한 강이 흘러나오고 다른 강이 유입됩니다. 이것이 gulp가 파일 흐름에서 작동하는 방식입니다.
3. Gulp 설치
gulp는 노드 환경을 기반으로 합니다. 먼저 노드가 설치되어 있는지 확인하세요-g gulp
그런 다음 데스크탑 데모/bbs2.0/src로 이동하여 bash 환경으로 들어간 다음 cnpm install gulp를 사용하여 현재 디렉토리에 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이 있습니다.
成功 RUBY 설치 성공 후 Ruby 버전을 확인하세요
성공 후 GEM을 통해 SASS sass에서 아무 파일이나 열고 편집하세요
를 설치하고 gulp-sass 및 현재 디렉터리로 이동
3) gulp-minify-css를 통해 css를 압축
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!