Gulp에서 파일 작업하기

Gulp는 파일 그룹을 가져와서 해당 그룹에 특정 작업을 수행한 다음 변경된 파일을 새 위치에 배치할 수 있게 해줍니다.

이를 위해 특별한 함수인 src와 dest가 사용됩니다. 먼저 우리 라이브러리에서 이들을 가져와 보겠습니다:

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

src 함수는 지정된 파일을 얻을 수 있게 해줍니다:

javascriptfunction task(cb) {
  return src('src/styles.css'); // 콜백 호출 대신 return 사용
}

그런 다음 이 파일에 대해 pipe 함수를 사용하여 체인 방식으로 다양한 작업을 수행할 수 있습니다. 개략적으로 다음과 같습니다:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(작업1)
    .pipe(작업2)
    .pipe(작업3)
}

체인의 마지막 pipe 호출은 수행된 작업의 결과가 전송될 폴더를 지정하는 dest 함수로 끝납니다:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(작업1)
    .pipe(작업2)
    .pipe(작업3)
    .pipe(dest('dist')); // dist 폴더로 보냄
}

각 작업은 우리 파일에 대한 일부 조작을 수행합니다. 예를 들어, 먼저 LESS를 CSS로 변환한 다음 CSS 속성에 접두사를 추가하고, 그 다음 결과 CSS를 최소화하는 등의 작업을 할 수 있습니다.

각 작업에는 Gulp용 고유한 npm 플러그인이 있습니다. 플러그인을 설치하고 우리 파일에 연결해야 합니다. 다양한 플러그인에 대한 연구는 다음 강의에서 하겠습니다.

지금은 준비 운동으로 우리 파일을 가져와 마치 몇 가지 작업을 수행한 것처럼 dist 폴더에 복사본을 보내 보겠습니다:

javascriptfunction task(cb) {
  return src('src/styles.css')
    .pipe(dest('dist'));
}

파일 경로 배열

src 함수는 매개변수로 하나의 파일뿐만 아니라 배열 형태로 여러 파일을 바로 받을 수 있습니다:

javascriptfunction task(cb) {
  let files = [
    'src/styles1.css',
    'src/styles2.css'
  ];
  
  return src(files)
    .pipe(dest('dist'));
}