[Gulp] gulp #1
gulp 설치
$ node -v
$ npm -v
$ gulp -v
- 버전 확인하기 (미설치거나 버전이 낮다면 설치및 업데이트를 하자)
cd 작업폴더
npm install gulp --save-dev
- 작업 폴더에 npm install를 하자 (node_modules 과 package.json 생성)
es6 사용시
npm install --save-dev babel-core babel-preset-es2015
- npm babel preset을 설치해준다.
"babel": {
"presets": [
"es2015"
]
}
package.json
에 해당 코드를 넣어주자- 같은 디렉토리에
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!!');
});
첫 세팅은 이렇게만 해놓자
Author And Source
이 문제에 관하여([Gulp] gulp #1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pubgyu/Gulp-gulp-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)