개시하다

지난번에 Gulp의 환경을 정리했기 때문에 이번에는 기본적인 문법을 배웠다.
개발 환경: Mac(터미널 사용)

기본 문법

1.gulpfile.js 파일 만들기

2. 파일 복사에 대한 설명

gulpfile.js

const{src, dest} = require('gulp');

function copyFiles(){
      return src('./src/index.html')
      .pipe(dest('./dest'));
}

exports.copyFiles = copyFiles;

작업

1. Gulp은 어떤 파일을 처리하는 프로세스이기 때문에 작업 대상인 파일의 지정과 작업 후의 출력 목적지를 결정한다.
src→작업 대상 지정,dest→작업 완료 시 폴더
gulpfile.js

const{src, dest} = require('gulp');

2. src 폴더를 만들고 그 중에서 index를 만든다.서류를 만들다
3. 처리된 파일을 저장하기 위해 dist 폴더 만들기
4. 상대 경로를 사용하여 위치를 저장 상태로 지정
pipe로 끊임없이 처리합니다.
gulpfile.js

return src('./src/index.html')
.pipe(dest('./dest'));
}

5. 터미널에서 실행되는 함수copyFiles 추가
gulpfile.js

exports.copyFiles = copyFiles;

6. 프로젝트 폴더로 이동
　＊gulpfile.js의 갈고리에서 터미널을 실행해야 합니다.
7. 터미널에서 실행하고 dist 폴더에서 index.저장 >
Terminal

gulp copyFiles

★여러 파일일 때
배열 지정
gulpfile.js

return src(['./src/index.html','./src/sub.html'],)

많은 경우, 어댑터로 지정하면 src 폴더에 저장된 모든 파일이 복사됩니다
gulpfile.js

return src('./src/*')

★HTML만 지정할 때
gulpfile.js

return src('./src/*.html')

● 폴더와 컨텐트를 복사할 때
gulpfile.js

return src('./src/**')

마찬가지로 HTML만 복사하는 경우도 ♪지정 >

Gulp에 작업 추가

1. 파일 이름 바꾸기 플러그인 설치
Terminal

yarn add gulp-rename --dev

그래서 패키지.제이슨에 추가된 거 알아요.

2. 리퀘스트에 지정한 파일을 설치하고 넣기
옵션을 추가하려면 파일 이름의 시작에prefix에 추가할 문자열을 추가하십시오.
gulpfile.js

const{src, dest} = require('gulp');
const rename = require('gulp-rename');

function copyFiles(){
      return src('./src/index.html')
      .pipe(rename('./dest'){
        prefix: 'hello-'
　　　}))
 　　　.pipe(dest('./dest'));
}

exports.copyFiles = copyFiles;

이상은 글로벌 개발의 절차입니다.

최후

기본적인 문법과 Gulp 개발의 절차를 배웠다.
다음은 다양한 플러그인으로 처리하고 싶습니다.