[Gulp] gulp #1

gulp 설치

---

$ node -v
$ npm -v
$ gulp -v

1. 버전 확인하기 (미설치거나 버전이 낮다면 설치및 업데이트를 하자)

cd 작업폴더
npm install gulp --save-dev

2. 작업 폴더에 npm install를 하자 (node_modules 과 package.json 생성)

es6 사용시

---

npm install --save-dev babel-core babel-preset-es2015

1. npm babel preset을 설치해준다.

"babel": {
    "presets": [
      "es2015"
	]
}

2. package.json에 해당 코드를 넣어주자
3. 같은 디렉토리에 gulpfile.babel.js를 생성 하자

setting

---

gulpfile.babel.js

import gulp from 'gulp';
import cleanCSS from 'gulp-clean-css'; //css 경량화
import uglify from 'gulp-uglify'; //js 압축
import webserver from 'gulp-webserver'; //server

// dir
const DIR = {
    SRC : 'src',
    DIST : 'dist'
}
const SRC = {
    JS : DIR.SRC + '/js/*.js',
    CSS : DIR.SRC + '/css/*.css',
    HTML : DIR.SRC + '/html/*.html',
    IMAGES : DIR.SRC + '/images'
}
const DEST = {
    JS : DIR.DIST + '/js',
    CSS : DIR.DIST + '/css',
    HTML : DIR.DIST + '/',
    IMAGES : DIR.DIST + '/images'
}

// task 
const series = ['server','tJs','tCss','tHtml','watch'];

// serve
gulp.task('server', () => {
    console.log('server..')
    return gulp.src(DIR.DIST + '/')
    .pipe(webserver());
});
// js
gulp.task('tJs', () => {
    console.log('js 컴파일..')
    return gulp.src(SRC.JS)
    .pipe(uglify())
    .pipe(gulp.dest(DEST.JS))
});
// css
gulp.task('tCss', () => {
    console.log('css 컴파일..')
    return gulp.src(SRC.CSS)
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest(DEST.CSS))
});
// html
gulp.task('tHtml', () => {
    console.log('html 컴파일..')
    return gulp.src(SRC.HTML)
    .pipe(gulp.dest(DEST.HTML))
});
// watch
gulp.task('watch', () => {
    gulp.watch(SRC.JS, gulp.series('tJs'))
    gulp.watch(SRC.CSS, gulp.series('tCss'))
    gulp.watch(SRC.HTML, gulp.series('tHtml'))
});
// default
gulp.task('default',gulp.series(series), () => {
    console.log('pubgyu - gulp start!!');
});

첫 세팅은 이렇게만 해놓자