티스토리 뷰
퍼블리싱이라는 작업단계는 디자이너가 디자인을 하고 코드로 UI를 구현하는 첫 단계로 HTML/CSS를 이용해 마크업과 스타일시트를 적용해 매우 기본적인 UI 목업(Mockup)을 만든다고 생각할 수 있는데 간혹 Javascript를 적용해 어떤 방식으로 동작해야하는지 보여줘야하는 간단한 스크립트 작업을 해야할 상황이 있다. 아니면 본인이 프론트 앤드 개발까지 전부 작업해야하는 상황이라면.... Gulp라 아니라 Webpack으로 작업을 진행하는게 맞잖아!?! 이거 포스팅 하고 바로 다음으로 Webpack 관련 포스팅 올릴 거니까 그거 보고 환경을 만드시라.
암튼 이 Gulp 시리즈는 위에서 이야기한대로 "퍼블리싱"이라는 작업에 초점을 맞춰서 진행하는 이야기니까 "간단한 javascript"까지 작업한다는 것을 가정하고 진행할거다.
그 외에도 폰트 파일이라던지, 이미지 파일이라던지, 이미지 파일을 최적화(Optimize) 하는 과정도 필요하다. 오늘은 이러한 javascript를 비롯한 에셋파일들을 처리하는 걸 작업해보겠다.
일단 javascript 처리하는 것 부터 시작하자.
Javascript Optimize
일단 Javascript를 최적화 하기위한 몇가지 패키지를 설치하도록 하자.
$ npm install gulp-concat -D
$ npm install gulp-uglify -D
$ npm install gulp-rename -D이렇게 3개의 패키지를 설치하자. 각각의 패키지는 아래의 역할을 수행한다.
| 패키지명 | 역할 |
| gulp-concat | 파일을 하나의 파일로 압축해준다. |
| gulp-uglify | 자바스크립트 코드를 압축해 용량을 줄여준다. |
| gulp-rename | 파일의 이름을 바꿔준다. |
설치를 완료했으면 적절하게 스크립트 파일을 배포해보도록 하자.
일단 common.js 파일을 하나 만들고 각 페이지마다 서로 다른 스크립트 파일을 적용한다고 생각하자. 그래서 아래 처럼 common.js, index.js 파일을 만들어주자.
자, 그리고 코드를 살짝 작성해보겠다.
common.js
var Common = function() {
var self = this;
self.init = function(){
console.log("Initialize!");
}
self.init();
}
var common = new Common();index.js
var IndexController = function(){
var self = this;
self.init = function(){
console.log("indexController Initialized!");
}
self.init();
}
var idxCtl = new IndexController();
이렇게 코드를 작성했다면 아래처럼 gulpfile.js 파일의 내용을 추가하도록 하자
gulpfile.js
var concat = require('gulp-concat');
//
// 중간 생략...
//
gulp.task( 'script:concat', () => {
return new Promise( resolve => {
gulp.src( PATH.ASSETS.SCRIPT + '/*.js' )
// src 경로에 있는 모든 js 파일을 common.js 라는 이름의 파일로 합친다.
.pipe( concat('common.js') )
.pipe( gulp.dest( DEST_PATH.ASSETS.SCRIPT ) )
.pipe( browserSync.reload({stream: true}) );
resolve();
})
});
//
// 중간 생략...
//
gulp.task('watch', () => {
return new Promise( resolve => {
gulp.watch(PATH.HTML + "/**/*.html", gulp.series(['html']));
gulp.watch(PATH.ASSETS.STYLE + "/**/*.scss", gulp.series(['scss:compile']));
gulp.watch(PATH.ASSETS.SCRIPT + "/**/*.js", gulp.series(['script:concat']));
resolve();
});
});
//
// 중간 생략...
//
gulp.task( 'default', gulp.series(['scss:compile', 'html', 'script:concat', 'nodemon:start', 'browserSync', 'watch']));위와 같이 코딩을 하면 스크립트에 변경이 발생하는 경우 watch로 감지한 뒤에 재 배포를 수행하게 되는 하나의 업무가 완성되면서 스크립트는 common.js 파일 하나로 합쳐져 배포되는 것을 확인 할 수 있다.
제대로 배포되는 것을 확인했으니 이제 common.js 파일을 index.html 파일에 적용시켜서 확인해보도록 하자.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gulp Sample</title>
<link rel="stylesheet" href="/assets/style/default.css" />
<script type="text/javascript" src="/assets/script/common.js"></script>
</head>
<body>
<h1>Hello, gulp!!</h1>
</body>
</html>이렇게 적용하고 브라우저 개발자 도구로 콘솔을 확인해보면 아래처럼 자바스크립트가 정상적으로 동작하는 것을 확인할 수 있다.
자, 그럼 한발 더 나아가서 코드를 uglify까지 하는 것을 진행해보도록 하자.
gulpfile.js
//
// 생략..
//
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
//
// 생략..
//
gulp.task( 'script:build', () => {
return new Promise( resolve => {
gulp.src( PATH.ASSETS.SCRIPT + '/*.js' )
.pipe( concat('common.js') )
.pipe( gulp.dest( DEST_PATH.ASSETS.SCRIPT ) )
.pipe( uglify({
mangle: true // 알파벳 한글자 압축
}))
.pipe( rename('common.min.js') )
.pipe( gulp.dest( DEST_PATH.ASSETS.SCRIPT ) )
.pipe( browserSync.reload({stream: true}) );
resolve();
})
});
//
// 생략..
//
gulp.task('watch', () => {
return new Promise( resolve => {
gulp.watch(PATH.HTML + "/**/*.html", gulp.series(['html']));
gulp.watch(PATH.ASSETS.STYLE + "/**/*.scss", gulp.series(['scss:compile']));
gulp.watch(PATH.ASSETS.SCRIPT + "/**/*.js", gulp.series(['script:build']));
resolve();
});
});
//
// 생략..
//
gulp.task( 'default', gulp.series(['scss:compile', 'html', 'script:build', 'nodemon:start', 'browserSync', 'watch']));이제 압축한 버전까지 배포하게 되면서 "script:concat"이 아닌 "script:build"로 task 이름을 바꾸고 위와 같이 task 내용을 수정하였다.
그래서 수정된 코드를 실행해 보면 common.min.js 파일이 배포되면서 압축된 코드를 확인해 볼 수 있다.
그러면 common.min.js를 가져다 쓸지, 아니면 common.js를 가져다 쓸지는 작업자의 마음이다.
자, 오늘은 스크립트 배포까지 알아봤다. 사실 이번 하나의 포스트에 이미지 최적화까지 넣으려고 했는데 분량조절을 실패했다. 그래서 다음 편에 jQuery같은 라이브러리나 vue.js 같은 라이브러리들, 그리고 이미지 최적화 같은 Assets 파일들을 배포하는 걸 알아보는 시간을 갖겠다.
오늘은 이만. 안녕!
'Dev > HTML&CSS' 카테고리의 다른 글
| #7. Glup로 퍼블리싱 개발환경 만들기 - 최종장 (2) | 2019.05.15 |
|---|---|
| #6. Glup로 퍼블리싱 개발환경 만들기 - Assets관리(하) (0) | 2019.05.14 |
| #4. Glup로 퍼블리싱 개발환경 만들기 - Watch와 BrowserSync (2) | 2019.05.09 |
| #3. Glup로 퍼블리싱 개발환경 만들기 - HTML과 웹서버 (0) | 2019.04.24 |
| #2. Glup로 퍼블리싱 개발환경 만들기 - 전처리 스타일시트 (0) | 2019.04.23 |
- TAG
- gulp, gulp-concat, gulp-rename, gulp-uglify