Gulp 실용적인 구성 소개 및 사용

소개:

gulp는 프런트 엔드 개발 프로세스에서 코드를 작성하기 위한 도구입니다. 이는 웹 사이트 리소스를 최적화할 뿐만 아니라 여러 반복 작업에 올바른 도구를 사용할 수도 있습니다. 개발 프로세스를 자동으로 완료하면 코드를 즐겁게 작성할 수 있을 뿐만 아니라 작업 효율성도 크게 향상됩니다.

gulp는 Nodejs를 기반으로 하는 자동 작업 실행기입니다. javascript/coffee/sass/less/html/image/css 파일의 테스트, 검사, 병합, 압축, 서식 지정, 자동 브라우저 새로 고침 등을 자동으로 완료할 수 있습니다. 배포 파일이 생성되고 파일이 변경된 후 지정된 단계가 반복됩니다. 구현 측면에서는 유닉스 운영체제의 파이프 아이디어를 차용해 이전 레벨의 출력이 바로 다음 레벨의 입력이 되기 때문에 작업이 매우 단순하다. 이 기사를 통해 우리는 Gulp를 사용하여 개발 프로세스를 변경하여 개발을 더 빠르고 효율적으로 만드는 방법을 배웁니다.

gulp는 grunt와 매우 유사하지만 grunt의 빈번한 IO 작업에 비해 gulp의 스트림 작업은 빌드 작업을 더 빠르고 편리하게 완료할 수 있습니다.

이 구성을 데모 테스트 구성이라고 부르는 이유는 작업할 때 빠르게 효과를 생성하거나 특정 기능을 구현해야 하는 경우가 많기 때문입니다. 직접 구현할 시간이 없으면 기존 예제를 찾거나 연결해야 합니다. -인.

그러나 이러한 데모나 플러그인은 모바일 단말기에서 보거나 서버를 시작해야 하는 경우가 많기 때문에 이 구성의 주요 작업은 모바일 단말기와 PC 모두에서 볼 수 있는 로컬 서버를 시작하는 것입니다. 또한 코드를 수정할 때 자동으로 새로 고칠 수 있으므로 특히 모바일 장치에서 새로 고치기 위해 애플리케이션을 전환할 필요가 없으므로 많은 문제를 줄일 수 있습니다.

상세 코드는 다음과 같습니다.

gulpfile.js:

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'))

package.json:

{  "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!