gulp
IE 대응을 위해 바벨을 적용할 일이 생겼는데, 이왕 사용하게 된 걸, gulp를 이용해서 스크립트를 es5 문법으로 변경하고, uglify까지 함께 적용하기로 했다.
gulp는 자바스크립트 빌드 자동화 툴이다.
설치
npm install -g gulp
npm init
npm install -save-dev gulp gulp-util
gulp에서 ES6 문법을 사용하기 위해 필요한 모듈 설치
npm install --save-dev babel-core babel-preset-es2015
.babelrc
파일 생성
{
"presets": ["es2015"]
}
gulpfile.babel.js 작성
import gulp from 'gulp';
import gutil from 'gulp-util';
import babel from 'gulp-babel'; // babel을 사용하기 위한 플러그인
import uglify from 'gulp-uglify';
import cleanCSS from 'gulp-clean-css';
import del from 'del';
const DIR = {
SRC: 'assets',
DEST: 'dist'
};
const SRC = {
JS: DIR.SRC + '/js/*.js',
CSS: DIR.SRC + '/style/*.css',
};
gulp.task('clean', () => {
return del.sync([DIR.DEST]); // dist 디렉토리 하위 비우기
});
gulp.task('js', () => {
return gulp.src(SRC.JS)
.pipe(babel({ // babel을 사용해서 js 파일 변환
presets: ['es2015']
}))
.pipe(uglify()) // minify
.pipe(gulp.dest(DIR.DEST));
});
gulp.task('css', () => {
return gulp.src(SRC.CSS)
.pipe(cleanCSS({compatibility: 'ie8'})) // css minify
.pipe(gulp.dest(DIR.DEST));
});
// 특정 디렉토리 하위에 변화를 감지해서 변경사항 반영
gulp.task('watch', () => {
gulp.watch(SRC.JS, ['js']);
gulp.watch(SRC.CSS, ['css']);
});
gulp.task('default', ['clean', 'js', 'css', 'watch'], () => {
gutil.log('Gulp is running');
});
스크립트 실행
# 특정 태스크만 실행시키려면 뒤에 태스크명 추가 입력
# gulp css
gulp
Last updated