GULP사용법

사용법

첫설치시 npm install --global gulp-cli 설치명령어 npm install --save-dev gulp

1. gulp구조의 이해

1.1 Default TASK

  gulp.task("default", (callback)=>{

  console.log("ok")
  callback();
  })

default 테스크의 경우 gulp를 실행했을 때 실행되는 가장 기본적은 테스트이다.

1.2 pipe

gulp.pipe(...)은 Gulp 스트리밍의 마술이다. .pipe을 사용해서 앞단의 task 를 뒤로 넘겨줄 수 있다. 편하게 연결파이프 정도로 생각해주면 쉽다.

    gulp.task("테스크명",['먼저실행할 테스크'],function() =>{
      return gulp
             .src('인풋디렉토리') //'public/src/js/*js'
             .pipe('원하는 function')
             .pipe('원하는 function')
             .pipe('원하는 function')
             .pipe('원하는 function')
             .pipe(gulp.dest('아웃풋디렉토리')); //'public/dist/js'
    })

**별두개 *별한개 별두개/별한개.js의 경우 전체디렉토리를 별한개.js의 경우 js파일들만을 지칭한다.

1.2.1 Gulp.watch

  gulp.watch('디렉토리', function(event){
    실행할 내용.
  })

event의 경우 .type과 .path 두개의 오브젝트를 가지고있다. type의 경우 added,changed,deleted,renamed

path의 경우 이벤트를 trigeer 시킨 path 이다.

1.3 네이밍

gulp의 경우 카멜케이스보단 콜론스타일이 일반적이다 예를들어 dev:styles 또는 dev:dist 식이 일반적이다.

1.4 series와 paralel

• series(fn1,fn2.fn3) fn1부터 3까지 순차 실행

• parallel(fn1,fn2.fn3) 순서 상관 없이 실행

1.5 plubmer()

.pipe($.plumber())
.pipe(fn())
.pipe.on('error', $.sass.logError)

에러 메세지를 표시해주는 인자 pluber를 먼저 선언 후 on으로 감싸주어야함

2. GULP PLUGIN

2.1 gulpLoadPlugins

const gulpLoadPlugins = require('gulp-load-plugins');
const $ = gulpLoadPlugins();

//$.plugin명하면 플러그인들을 가져올 수 있음.

플러그인을 import하지 않아도 해당 플러그인을 사용할 수 있다

2.2 browserSync

서버실행 및 reload를 도와주며 각 디바이스별 auto 스크롤링을 도와줌

gulp.task('serve', ['styles', 'scripts', 'fonts'], () => {
  browserSync({
    notify: false,
    port: 9000,
    server: {
      baseDir: ['.tmp', 'app'],
      routes: {
        '/bower_components': 'bower_components'
      },
      startPath: './dist/index.html'
    }
  });

  gulp.watch([
    'app/*.html',
    'app/images/**/*',
    '.tmp/fonts/**/*'
  ]).on('change', browserSync.reload);
});

해당 코드를 실행할 경우 port 9000번에 basedir를 통해 정적 리소스들의 기준이 되는 폴더를 지정 자동 라우팅을 지원해준다.

2.3 sourcemaps

    .pipe($.sourcemaps.init())
     .pipe($.sass.sync({
       outputStyle: 'expanded',
       precision: 10,
       includePaths: ['.']
     }).on('error', $.sass.logError))
     .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
     .pipe($.sourcemaps.write())

enj 또는

 .pipe($.sourcemaps.init())
 .pipe($.babel())
 .pipe($.sourcemaps.write('.'))

sass를 css로 변환할 경우 디버그에 어려움이 많다. 이럴때를 위해 sourcemaps를 이용한다. 이럴경우 개발자도구에서 봤을때 문제가 없다.

2.4 del

gulp.task('clean', del.bind(null, ['.tmp', 'dist']));

clean테스크를 실행하여 .tmp dist 폴더를 지움