gulp 사용

1. node. js 설치 및 설정 환경 을 다운로드 하 십시오.
2. 디 렉 터 리 초기 화: 프로젝트 폴 더 로 콘 솔 을 시작 하여 npm init 를 실행 합 니 다.이렇게 하면 package. json 파일 이 생 성 됩 니 다.
3. 이 어 콘 솔 전역 에 gulp 패 키 지 를 설치 합 니 다: npm install - g gulp;설치 완료 후 부분 설치: npm install -- save - dev gulp, 이렇게 하면 gulp 버 전 정 보 는 package. json 파일 에 저 장 됩 니 다. 이 항목 은 전체 적 으로 gulp 를 설치 하지 않 은 컴퓨터 에서 도 npm isntal 을 실행 할 수 있 습 니 다.
4. 부분 적 으로 gulp 를 설치 하 는 의존 패키지: gulp - mainify - html, gulp - csmin, gulp - uglify 와 gulp - imagemin, 이 세 가방 은 각각 html, css, js 와 그림 을 압축 합 니 다.gulp - concat 패키지 가 js 파일 을 통합 합 니 다.gulp - clean 폴 더 삭제

var pkg = require("pkgName");
gulp.task("taskName", function(){
    gulp.src("filePath")
        .pipe(gulp.dest("      ")) //     
        .pipe(pkg())
        .pipe(gulp.dest("      ")) //         
})

5. gulp 접 두 사 를 한꺼번에 도입 하 는 가방: gulp - load - plugins;가방 을 설치 한 후 gulpfile. js 파일 에서 var $= require ("gulp - load - plugins") () 를 실행 합 니 다.그리고 $[pkgName] 을 통 해 직접 호출 할 수 있 습 니 다.
6. 자동화 리 셋 페이지 사용: gulp - connect 패키지 와 open 패 키 지 를 추가 합 니 다.

gulp.task("server",function(){
	$.connect.server({
		root: "dev/",
		port: 8000,
		livereload: true
	});
	open("http://localhost:8000");
	gulp.watch("src/*.html",["html"]);
	gulp.watch("src/css/*.css",["css"]);
	gulp.watch("src/js/*.js",["js"]);
	gulp.watch("src/images/**",["imgae"]);
});

그리고 모든 등록 작업 의 pipe (파이프 흐름) 맨 뒤에 추가 합 니 다. .pipe ($. connect. reload ()) 는 감청 파일 이 수 정 될 때마다 자동 으로 브 라 우 저 를 새로 고 칩 니 다. 처음 브 라 우 저 를 새로 고치 지 않 은 것 은 default 작업 이 server 작업 만 추 가 했 기 때문에 html 나 다른 작업 을 추가 하지 않 았 습 니 다. 감청 파일 이 수정 되 지 않 으 면 업데이트 되 지 않 습 니 다.
7. gulp 가 자주 무 너 지 는 문 제 를 해결 합 니 다. gulp - plumber 가방 (이 글 을 확인 해 보 세 요) 을 사용 하면 오류 가 발생 하기 쉬 운 곳 의 pipe 흐름 이 시작 되 는 곳 에 pipe ($. plumber () 를 더 하면 현재 파이프 흐름 에서 발생 하 는 오 류 를 포착 할 수 있 습 니 다.