gulp 설치 및 .src() .pipe() .dest() / 설명 수정 추가 :(

1. gulp-cli 글로벌 설치(최초 1번만 설치)

npm install --global gulp-cli  

2. 프로젝트에 gulp 설치

npm install --save-dev gulp 

3. gulpfile.js 생성

프로젝트 root에 gulpfile.js를 생성 후, 아래와 같이 설정한다.

const gulp = require("gulp"); // ★★★★ gulp 플러그인 사용시 필수 사항

gulp.task('func이름1', function() {
    return func기능1
});


gulp.task('func이름2', function() {
    return func기능2
});

gulp.task( "default", 
    gulp.parallel(
       "func이름1", "func이름2",
));

3-1. 사용 예

const gulp = require("gulp");
const fileinclude = require('gulp-file-include');

gulp.task('fileinclude', function() {
    return gulp.src([
        "./src/html/*",
        "!" + "./src/html/include/*"
    ])
    .pipe(fileinclude({
        prefix: '@@',
        basepath: '@file'
        }))
    .pipe(gulp.dest('./dist/html'));
});

gulp.task( "default", 
    gulp.parallel("fileinclude")
);

4. gulp 실행: 터미널에서 gulp!

gulp

정상적으로 작동할 시, 다음과 같은 코드가 입력된다.

Starting 'default'...
Finished 'default' after 26 ms

---

★ gulp 기본 코드

gulp.src()

: task 할 파일의 위치를 지정

 

gulp.pipe()

: gulp.src()에서 지정된 파일들을 읽은 후, 수행되어져야 할 플러그인으로 연결. 또 여러 플러그인이 실행되어져야 할때, 각 function 사이에서 파이프 역할 수행.

 

gulp.dest()

: task 결과물이 저장될 위치 지정

 

3의 예시 코드 해석:

gulp야

gulp.src([
   "./src/html/*",
   "!" + "./src/html/include/*"
])

'src/html 안의 있는 모든 파일들을 읽고 (include안에 있는 파일 제외)

.pipe(fileinclude({
   prefix: '@@',
   basepath: '@file'
}))

fileinclude(gulp-file-include)를 실행 후

.pipe(gulp.dest('./dist/html'));

변환된 파일들은 dist폴더에 저장해줄래?