Gulp 소개 :
Gulp는 프론트 엔드 개발의 건축 코드이며 자동화 프로젝트를 구축하기위한 강력한 도구입니다. 웹 사이트 리소스를 최적화 할 수있을뿐만 아니라 개발 프로세스 중에 올바른 도구를 사용하여 많은 반복적 인 작업을 자동으로 완료 할 수 있습니다. 그녀와 함께, 우리는 코드를 행복하게 작성할뿐만 아니라 업무 효율성을 크게 향상시킬 수 있습니다.
Gulp는 Nodejs를 기반으로하는 자동 작업 러너입니다. 테스트, 확인, 병합, 압축, 서식, 자동 브라우저 새로 고침, 배포 파일 생성 파일의 파일 생성을 자동으로 완료하고 파일을 변경 한 후 지정된 단계를 반복하여 청취 할 수 있습니다. 구현 측면에서, 그녀는 UNIX 운영 체제의 파이프 아이디어를 빌 렸습니다. 이전 레벨의 출력은 직접 다음 레벨의 입력이되어 작업을 매우 간단하게 만듭니다. 이 기사를 통해 GULP를 사용하여 개발 프로세스를 변경하여 개발을보다 빠르고 효율적으로 만드는 방법을 배웁니다.
Gulp는 Grunt와 매우 유사하지만 Grunt의 빈번한 IO 운영과 비교할 때 Gulp의 스트리밍 작업은 건설 작업을보다 빠르고 편리하게 완료 할 수 있습니다.
오늘 Gulp를 배울 때 Gulp-Iglify를 사용하여 JS 모듈을 압축했습니다. Gulp.Watch를 사용하여 JS 파일의 변경 사항을들을 때 반복적 인 압축 문제가 발생했습니다.
디렉토리 구조는 다음과 같습니다.
gulpile.js 코드는 다음과 같습니다.
var gulp = require ( 'gulp'); var uglify = require ( 'gulp-uglify'); var rename = require ( 'gulp-rename'); gulp.task ( 'uglify', function () {gulp.src ( './ src/js/*. js'). 파이프 (Rename ({wiffix : '. min'}). 파이프 (uglify ()). 파이프 (gulp.dest ( './ src/js')) gulp.watch ( './ src/js/*. js', [ 'uglify']); watcher.on ( 'change', function (event) {console.log ( 'file' + event.path + '는' + event.type + ', 실행 작업 ...');Gulp Uglify 명령을 실행 한 후 :
해당 *.min.js도 생성됩니다.
그러나 Kong.js 파일을 열고 다시 저장하면 다음 상황이 발생합니다.
한 번 저장 한 다음 다시 압축하십시오. *.min.min ... js와 같은 많은 JS 압축 파일이 있으며 Kong.js에 따라 첫 번째 Kong.min.js 값만 변경됩니다. 나중에, 나는 다음 문서를 확인했고 누군가가 Gulp-Iglify에 대해 썼고 그것이 사용될 수 있음을 발견했습니다! Min.JS를 필터링하려면 압축을 방지하고 코드를 변경하십시오.
var gulp = require ( 'gulp'); var uglify = require ( 'gulp-uglify'); var rename = require ( 'gulp-rename'); gulp.task ( 'uglify', function () {gulp.src ([ './ src/js/*. js', '! ./ Src/js/*. min.js')). 파이프 (Rename ({wiffix : '. min'}). 파이프 (uglify ()). 파이프 (gulp.dest ( './ src/js');});}); gulp.watch ( './ src/js/*. js', [ 'uglify']); watcher.on ( 'change', function (event) {console.log ( 'file' + event.path + '는' + event.type + ', 실행 작업 ...');위의 것은 Gulp.Watch ()와 함께 사용될 때 Gulp-Uglify 및 Gulp.Watch ()에 대한 편집기의 소개입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!