gulpfile.js 를 열고 이제 자동화 설정 셋팅을 해보자.
내가 하려는 자동화 작업은 이렇다.
- js는 js폴더에 작업한 여러개의 js를 합치고, 코드를 압축한다.
- scss는 컴파일해서 css로 만들되 역시 코드를 압축해 놓는다.
- html 파일은 그냥 개발폴더에 추가되거나 수정될 때 배포 폴더에 자동으로 수정된다.
- localhost로 서버화 시켜서 웹브라우져에서 미리 보면서 작업하고 수정될 때마다 실시간 반영된다.
- 이미지는 압축과정을 거쳐 배포 폴더에 저장된다.
gulp는 사용한다고 셋팅하기 전 플러그인을 설치해야한다. 설치할 플러그인 목록은 아래와 같다.
- gulp-uglify : js 압축
- gulp-concat : 파일 합치기
- gulp-sass : scss 컴파일
- gulp-minify-css : css 압축
- gulp-connect : 서버화 시키기
- gulp-imagemin : 이미지 압축
- gulp-changed : 변경된 것만 캐치
- del : 초기화
이렇게 설치할꺼고 아래처럼 입력한다.
npm install --save-dev gulp-uglify gulp-concat gulp-sass gulp-minify-css gulp-connect gulp-imagemin gulp-changed del
이렇게 한줄로 한꺼번에 전부 설치하려고 입력해도 되고, npm install --save-dev gulp-uglify 한번 npm install --save-dev gulp-concat 이렇게 하나씩 설치해도 된다.
아무튼 위 그림처럼 입력하고 나면 프롬프트 창에 뭔가 열심히 지나갈 것이다.
이렇게 지나가고 나면 플러그인들이 설치가 완료된 것이다.
이제 gulpfile.js 열어서 셋팅을 작성해보자.
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
//js
var sass = require('gulp-sass'),
minificss = require('gulp-minify-css');
//css
var connect = require('gulp-connect');
//server
var imagemin = require('gulp-imagemin'),
changed = require('gulp-changed');
//image
var del = require('del');
설치한 플러그인들을 변수로 선언했다.
var devsrc = 'dev';
var pubsrc = 'public_html';
var paths = {
"dev" : {
"js" : devsrc + '/js/*.js',
"css" : devsrc + '/css/*.scss',
"img" : devsrc + '/images/*+(png|jpg|gif)',
"html" : devsrc + '/html/*.html'
},
"pub" : {
"js" : pubsrc+'/js',
"css" : pubsrc + '/css',
"img" : pubsrc + '/images',
"html" : pubsrc + '/'
}
};
개발 코드들은 dev 폴더안에 있고 각 js/scss/html/img 에 대한 경로와 파일을 지정했다.
그리고 public_html 폴더안에 컴파일, 압축 등 자동화 완료 후 저장시킬 경로를 지정했다.
개인적인 구조이기 때문에 본인의 스타일에 맞게 수정한다.
gulp.task('gulp_js', function(){
gulp.src(paths.dev.js) //개발코드 위치
.pipe(uglify()) //코드 압축하고
.pipe(concat('all.js')) //all.js에 모든 js를 합친다.
.pipe(gulp.dest(paths.pub.js)); //배포 저장 위치 지정
});
gulp.task('gulp_css', function(){
gulp.src(paths.dev.css) //개발코드 위치
.pipe(sass().on('error', sass.logError)) //scss 컴파일하며 오류로그는 나오게한다.
.pipe(minificss()) //코드 압축하고
// .pipe(concat('result.css')) //본인은 css는 합치지 않는다.
.pipe(gulp.dest(paths.pub.css)); //배포 저장 위치 지정
});
gulp.task('gulp_html', function(){
gulp.src(paths.dev.html) //개발코드 위치
.pipe(gulp.dest(paths.pub.html)) //복사해서 이동시킴
.pipe(connect.reload()); //변경되면 실시간 새로고침
});
위 세개는 대표적으로 js / css / html에 관한 셋팅이다. 보면 'gulp_js', 'gulp_css', 'gulp_html' 이라고 있는데 그냥 자기가 지정하는 작업 이름이다. 자유롭게 써라.
이제 서버화 시키고 실시간 수정 반영되게 셋팅하자.
gulp.task('serverConnect', function(){
connect.server({
root : pubsrc,
livereload : true,
port : 8001
});
});
root는 저~ 위에 폴더 위치 선언한 것이다.
이미지 압축을 하게 만들자. 이미지를 저장하게 되거나 수정하게 되면 자동으로 압축해서 배포 폴더의 images에 저장되게 한다.
gulp.task('imgmin', function(){
gulp.src(paths.dev.img) //개발용 이미지 위치
.pipe(changed(paths.pub.img)) //변경 파일 감지
.pipe(imagemin()) //이미지 압축
.pipe(gulp.dest(paths.pub.img)); //배포 저장 위치 지정
});
이렇게 만들어 놓았으면 실시간으로 감지하게, 즉 scss 코드 수정하고 ctrl+s 누르면 자동으로 컴파일 되어 해당 위치에 저장되게 한다던지 하려면 watch라는 걸 넣는다.
gulp.task('gulp_watch', function(){
gulp.watch(paths.dev.js, ['gulp_js']);
gulp.watch(paths.dev.css, ['gulp_css']);
gulp.watch(paths.dev.html, ['gulp_html']);
gulp.watch(paths.dev.img, ['imgmin']);
});
이렇게 하면 js/css/html/img 가 자동으로 감지하여 배포폴더에 컴파일 또는 저장된다.
이제 셋팅이 끝났으니 자동화 실행시키면 된다.
그전에 자동화 실행하려는 것도 추가해야한다.
gulp.task('default', ['serverConnect', 'gulp_js', 'gulp_css', 'gulp_html', 'imgmin', 'gulp_watch']);
이렇게 한 뒤 cmd로 가서 gulp 라고 입력하자.
이렇게 나오면 이제 자동화가 되고 있는 것이다.
웹브라우저에 http://localhost:8001/ 를 접속하면 작업중인 프로젝트가 라이브되고 있을 것이다.
그러나 또한 작업하다보면 최종본이라는게 생기기 마련이다.
분명 작업되지 말아야할 파일이나 최종이 아닌 쓰레기 파일이 배포파일에 들어가 있을 수 있다.
그렇기 때문에 초기화한 뒤 배포파일을 생성하게 하는 것이다.
gulpfile.js 안에 초기화 하는 셋팅을 하자.
gulp.task('clean', function(){
del([pubsrc + '/*']);
})
그리고 초기화 한 뒤 배포용 작업을 하게 설정하자.
gulp.task('dev',['clean', 'gulp_js', 'gulp_css', 'gulp_html', 'imgmin', 'gulp_watch']);
이렇게 해놓고 나중에 최종 산출물을 만들 때 cmd에 gulp dev 입력하면 된다.
배포용 폴더안의 내용이 싹 지워지고 새로 컴파일 및 압축해서 배포용 폴더에 작업해준다.
끝.