소개:
gulp는 프런트 엔드 개발 프로세스에서 코드를 작성하기 위한 도구입니다. 이는 웹 사이트 리소스를 최적화할 뿐만 아니라 여러 반복 작업에 올바른 도구를 사용할 수도 있습니다. 개발 프로세스를 자동으로 완료하면 코드를 즐겁게 작성할 수 있을 뿐만 아니라 작업 효율성도 크게 향상됩니다.
gulp는 Nodejs를 기반으로 하는 자동 작업 실행기입니다. javascript/coffee/sass/less/html/image/css 파일의 테스트, 검사, 병합, 압축, 서식 지정, 자동 브라우저 새로 고침 등을 자동으로 완료할 수 있습니다. 배포 파일이 생성되고 파일이 변경된 후 지정된 단계가 반복됩니다. 구현 측면에서는 유닉스 운영체제의 파이프 아이디어를 차용해 이전 레벨의 출력이 바로 다음 레벨의 입력이 되기 때문에 작업이 매우 단순하다. 이 기사를 통해 우리는 Gulp를 사용하여 개발 프로세스를 변경하여 개발을 더 빠르고 효율적으로 만드는 방법을 배웁니다.
gulp는 grunt와 매우 유사하지만 grunt의 빈번한 IO 작업에 비해 gulp의 스트림 작업은 빌드 작업을 더 빠르고 편리하게 완료할 수 있습니다.
이 구성을 데모 테스트 구성이라고 부르는 이유는 작업할 때 빠르게 효과를 생성하거나 특정 기능을 구현해야 하는 경우가 많기 때문입니다. 직접 구현할 시간이 없으면 기존 예제를 찾거나 연결해야 합니다. -인.
그러나 이러한 데모나 플러그인은 모바일 단말기에서 보거나 서버를 시작해야 하는 경우가 많기 때문에 이 구성의 주요 작업은 모바일 단말기와 PC 모두에서 볼 수 있는 로컬 서버를 시작하는 것입니다. 또한 코드를 수정할 때 자동으로 새로 고칠 수 있으므로 특히 모바일 장치에서 새로 고치기 위해 애플리케이션을 전환할 필요가 없으므로 많은 문제를 줄일 수 있습니다.
상세 코드는 다음과 같습니다.
var gulp = require('gulp'), browserSync = require('browser-sync').create();// 启动 browserSync 服务,自己启动server,并且为浏览器实时刷新提供服务gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: './'}, files: './demo/**/*', browser: ["chrome"] }) })// 默认任务,在命令行输入`gulp`来启动任务gulp.task('default', gulp.parallel('browserSync'))
{ "name": "gulp-demo", "version": "1.0.0", "description": "", "main": "index.js?1.1.11", "scripts": {"test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": {"browser-sync": "^2.18.12","gulp": "gulpjs/gulp#4.0" } }
XX—
|— 데모
|— file.js
| — package.json
이 구성은 하나의 플러그인browserSync만 사용합니다. 이 플러그인은 모바일 및 PC 터미널을 자동으로 새로 고치고 동기화할 수 있는 로컬 호스트 서버를 시작합니다.
browserSync는 매우 강력한 플러그인입니다. 여기에 간단하고 이해하기 쉬운 중국어 문서가 있습니다. 필요한 경우 직접 확인할 수 있습니다. 또한 여기서 약간의 트릭은 gulp의 감시 기능을 사용하지 않고도 플러그인의 구성 옵션을 통해 직접 파일 수정 사항을 모니터링할 수 있다는 것입니다. 이는 더 간단합니다.
위 내용은 Gulp 실용적인 구성 소개 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!