디렉토리 구조
gulp-es6-webpack/
├── .babelrc
├── dist
├── node_components
├── server
│ └── main.js
└── src
├── css
│ └── style.css
├── images
│ └── image.png
├── index.html
└── js
└── main.js
├── gulpfile.babel.js
├── index.js
├── package.jsonsrc 폴더 에는 Front-end 사이드에서 사용할 파일들이 있으며 gulp에서 minify 하여 dist 폴더에 변환된 파일들을 저장 하게 된다.gulpfile 을 추가적으로 작성하기 전에 저희 예제 프로젝트의 디렉토리 구조를 알아보자.
server 폴더의 경우 server 사이드에서 사용 할 파일들이 있습니다. 이 프로젝트에선 server 부분에서도 ES6 를 쓸 것인데, 이에 관해서는 나중에 설명하기로 하자.
js 파일 및 css 파일들은 마음대로 작성하고.
image 또한 원하는 이미지를 넣자.
Gulp API
gulp 에는 4가지의 주요 API가 있다.
- gulp.task
- gulp.src
- gulp.dest
- gulp.watch
gulp.task(name [, deps, fn]) 는 gulp가 처리할 ‘작업‘ 을 정의한다.
인수 name 은 string 형태로서 task의 이름을 지정하며, deps와 fn 은 optional 인수로서, 생략되어도 되는 인수다.
deps 는 task name 의 배열 형태이며 이 인수가 전달 될 시, 이 배열 안에 있는 task들을 먼저 실행 한다음에,
함수형태로 전달되는 fn 을 실행한다.
gulp.task('hello', () => {
console.log('hello');
});
gulp.task('world', ['hello'], () => {
console.log('world');
});이렇게 만든 task 는, 명령어 gulp name 을 통해 커맨드라인에서 특정 task를 실행 할 수 있다.
$ gulp world
[15:20:52] Requiring external module babel-register
[15:20:54] Using gulpfile ~/node_tutorial/gulp-es6-webpack/gulpfile.babel.js
[15:20:54] Starting 'hello'...
hello
[15:20:54] Finished 'hello' after 268 μs
[15:20:54] Starting 'world'...
world
[15:20:54] Finished 'world' after 120 μsgulp.src(globs[, options]) 는 어떤 파일을 읽을지 정한다.gulp 명령어를 실행 할 때, name 을 명시하지 않으면 default task 가 실행된다.
인수 glob 은 string 형태나 array 형태입니다. node-glob syntax 를 사용하여 “**/*.js” 이런식으로 여러 파일을 한꺼번에 지정 할 수 있다.
options는 Object 형태이며 node-glob에 전달 할 옵션이다. 자세한 내용은 GULP API를 확인해주자.
이 함수가 리턴한 객체에서는 .pipe 를 통하여 다른 플러그인을 사용해 변환 할 수 있다.
이에 대한 예제는 잠시 후 플러그인을 설치하고 gulpfile 을 작성 할 때 알아보자.
gulp.dest(path[, options]) 는 어디에 저장할지 정한다.
path 는 디렉토리를 입력하며,
options는 객체로서 { cwd: ____, mode: ____ } 형태다.
cwd 는 현재 디렉토리 위치로서 .path가 /build/ 이런식으로 상대적일때 현재 디렉토리를 따로 설정하고 싶을 때 사용하며, mode 는 파일권한 (기본 : “0777”) 이다.
이에 대한 예제 또한 gulpfile을 작성 할 때 알아보겠다.
gulp.watch(glob[, opts], tasks/cb) 는 전달된 glob에 해당하는 파일들을 주시하고있다가, 변동이 있을 시 tasks를 실행한다.
인수 tasks 는 task name의 배열형태다. 배열 형태가 아닐 땐 event를 파라미터로 가지고있는 콜백함수 cb 를 작성한다.
opts는 gulp에서 사용하는 라이브러리인 gaze 에 전달 할 옵션이다.
매뉴얼에 적혀있는 예제를 한번 훑어보자:
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
// OR
gulp.watch('js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});gulpfile작성
gulp에 대한 간단한 설명을 봤으니, 이제 gulpfile을 작성해보자
- minify javascript
- minify css
- minify html
- compress image
gulp 자체에서는 위 기능들을 지원하지 않는다. 대신 gulp 플러그인들이 위 역할들을 대신해준다.
플러그인 설치
플러그인 검색은 Gulpjs 홈페이지 에서 할 수 있다.
사용 할 플러그인은 다음과 같다
del 모듈은 gulp 플러그인은 아니다. gulp 플러그인으로 제작된 모듈이 아니더라도 gulpfile 내에서 사용 할 수는 있다.
이 모듈은 특정 디렉토리를 삭제해주는 플러그인이다. 동기식으로 삭제 할 수 있는 기능을 가지고 있고.
gulp 작업이 실행 될 때 마다 기존 dist 디렉토리에 있는 파일들을 삭제해줘야 하기 때문에 이 플러그인을 사용한다.
npm 을 통하여 설치해보자.
npm install --save-dev gulp-uglify gulp-clean-css gulp-htmlmin gulp-imagemin del
설치가 끝났다면 gulpfile 상단에 위 플러그인들을 import 해주자.
import uglify from 'gulp-uglify';
import cleanCSS from 'gulp-clean-css';
import htmlmin from 'gulp-htmlmin';
import imagemin from 'gulp-imagemin';
import del from 'del';디렉토리 정의
const DIR = {
SRC: 'src',
DEST: 'dist'
};
const SRC = {
JS: DIR.SRC + '/js/*.js',
CSS: DIR.SRC + '/css/*.css',
HTML: DIR.SRC + '/*.html',
IMAGES: DIR.SRC + '/images/*'
};
const DEST = {
JS: DIR.DEST + '/js',
CSS: DIR.DEST + '/css',
HTML: DIR.DEST + '/',
IMAGES: DIR.DEST + '/images'
};Task 작성
minify javascript
gulp.task('js', () => {
return gulp.src(SRC.JS)
.pipe(uglify())
.pipe(gulp.dest(DEST.JS));
});코드를 저장하고 실행해보자.
$ gulp js
[16:48:43] Requiring external module babel-register
[16:48:43] Working directory changed to ~/node_tutorial/gulp-es6-webpack
[16:48:43] Using gulpfile ~/node_tutorial/gulp-es6-webpack/gulpfile.babel.js
[16:48:43] Starting 'js'...
[16:48:43] Finished 'js' after 74 ms
minify cssdist/js 폴더에 파일이 저장되었는지도 확인해보자. 그렇다면 다음 단계로 넘어가자
gulp.task('css', () => {
return gulp.src(SRC.CSS)
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest(DEST.CSS));
});
minify html
gulp.task('html', () => {
return gulp.src(SRC.HTML)
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest(DEST.HTML))
});
compress images
gulp.task('images', () => {
return gulp.src(SRC.IMAGES)
.pipe(imagemin())
.pipe(gulp.dest(DEST.IMAGES));
});
clean
gulp.task('clean', () => {
return del.sync([DIR.DEST]);
});
default
기본 gulp task 를 정의 할 차례다. 기본 task 에서는 위에 만든 여러 task 들을 실행하도록 설정한다.
gulp.task('default', ['clean', 'js', 'css', 'html', 'images'], () => {
gutil.log('Gulp is running');
});gulp 명령어를 입력해서 테스트 해보자. 오류가 없다면 Watch Watch를 작성해보자
WATCH 작성하기
watch는 특정 디렉토리 및 파일들을 감시하고 있다가 변동이 감지 될 시, 지정한 task 를 실행시키는 기능이다.
gulp.task('watch', () => {
gulp.watch(SRC.JS, ['js']);
gulp.watch(SRC.CSS, ['css']);
gulp.watch(SRC.HTML, ['html']);
gulp.watch(SRC.IMAGES, ['images']);
});
watch 를 작성하는건 위와 같이 간단하다. 첫번째 인수로 전달된 값에 해당하는 파일들을 감시하고 있다가, 두번째 인수로 전달된 task 를 실행한다. 어떤 파일이 변경되었는지 기록하고싶다면, 코드를 다음과 같이 수정하자.
gulp.task('watch', () => {
let watcher = {
js: gulp.watch(SRC.JS, ['js']),
css: gulp.watch(SRC.CSS, ['css']),
html: gulp.watch(SRC.HTML, ['html']),
images: gulp.watch(SRC.IMAGES, ['images'])
};
let notify = (event) => {
gutil.log('File', gutil.colors.yellow(event.path), 'was', gutil.colors.magenta(event.type));
};
for(let key in watcher) {
watcher[key].on('change', notify);
}
});
그리고, ‘watch’ 를 default task 부분의 deps 배열에 넣어준다.
gulp.task('default', ['clean', 'js', 'css', 'html', 'images', 'watch'], () => {
gutil.log('Gulp is running');
});
이제 테스트를 해보자 새로운 screen 을 열어서 gulp 를 실행 시킨 다음에 파일을 수정해보자.
$ screen -S gulp
#####################################################################
$ gulp
[15:25:49] Requiring external module babel-register
[15:25:50] Using gulpfile ~/node_tutorial/gulp-es6-webpack/gulpfile.babel.js
[15:25:50] Starting 'clean'...
[15:25:50] Finished 'clean' after 11 ms
[15:25:50] Starting 'js'...
[15:25:50] Starting 'css'...
[15:25:50] Starting 'html'...
[15:25:50] Starting 'images'...
[15:25:50] Starting 'watch'...
[15:25:50] Finished 'watch' after 20 ms
[15:25:50] Finished 'html' after 154 ms
[15:25:50] Finished 'js' after 178 ms
[15:25:50] Finished 'css' after 165 ms
[15:25:52] gulp-imagemin: Minified 1 image (saved 17.06 kB - 13.2%)
[15:25:52] Finished 'images' after 2 s
[15:25:52] Starting 'default'...
[15:25:52] Gulp is running
[15:25:52] Finished 'default' after 308 μs
#####################################################################
# CTRL+A+D, edit files ...
#####################################################################
$ screen -r gulp
#####################################################################
[15:28:02] File /home/vlpt/node_tutorial/gulp-es6-webpack/src/index.html was changed
[15:28:02] Starting 'html'...
[15:28:02] Finished 'html' after 35 ms
[15:28:09] File /home/vlpt/node_tutorial/gulp-es6-webpack/src/js/main.js was changed
[15:28:09] Starting 'js'...
[15:28:09] Finished 'js' after 11 ms
[15:28:21] File /home/vlpt/node_tutorial/gulp-es6-webpack/src/css/style.css was changed
[15:28:21] Starting 'css'...
[15:28:21] Finished 'css' after 29 ms성공이다.
'node JS' 카테고리의 다른 글
| 11.GULP-Javascript 빌드 자동화툴(기본세팅) (0) | 2020.02.13 |
|---|---|
| 10.Node js mongo DB와 Express를 사용해 Restful API만들기-2 (0) | 2020.02.08 |
| 9.Node js mongo DB와 Express를 사용해 Restful API 만들기-1 (0) | 2020.01.31 |
| 8.Node js Express-4(Express-session) (0) | 2020.01.25 |
| 7.Node js Express-3(Restful API) (0) | 2020.01.18 |
WRITTEN BY
