Gulp - 플러그인 설치 및 사용하기

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  입력하면 된다.
배포용 폴더안의 내용이 싹 지워지고 새로 컴파일 및 압축해서 배포용 폴더에 작업해준다.

끝.

TOP