Jun 개발노트

Gulp

January 16, 2020

Gulp

Gulpfile.js 설명

gulp.task('combine-js',['lint-js'], function(){
    return gulp.src('/public/js/**/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('public/dist/js'));
});

gulp.task('default',['combine-js']);
  • gulp.task(name, deps, func)

    • name - task의 이름을 지정하며, 이름에는 공백이 포함되어서는 안된다.
    • dept - 현재 선언하고 있는 task를 수행하기 전에 실행되는 task들
    • func - 실제 수행되는 내용
  • gulp.src(files)

    • 대상 파일들 (배열이나 String)
    • ex) [‘src/js/apple.js’, ‘src/js/hello.js’, ‘!src/js/world.js’] <= !는 제외
  • gulp.pipe(…)

    • task의 결과들의 결과물을 function으로 전달 (pipe로 연결되는 의미 추론)
  • concat(최종 파일명)

    • src와 pipe를 통해서 결과물을 하나의 파일로 만들어 준다 (병합)
  • gulp.task(‘default’, [ ‘task명’ ])

    • default값으로 gulp만 명령어로 쳤을시 실행되는 task를 지정할수 있다.

Gulp 폴더 구조

node_modules/

public/
    src/
        index.html
        img/
        js/
        scss/
    dist/
        index.html
        img/
        js/
        css/
    lib/
        vanilla.js
        fancy.js

gulpfile.js
package.json

미리 dist(배포폴더)를 만들어서 프로젝트를 구성하자


Written by Junho You 배운것을 기록하자