메뉴 보이기
Profile
이온디

2019.03.21

스크랩

Grunt, Gulp, Webpack

조회 수 9 추천 수 0

2017년에 Grunt와 Gulp를 언급하는 이유

현재 대세는 단연코 Webpack이라고 할 수 있습니다.
하지만 모든 새로운 것들에는 그들이 나오게 된 이유가 있다고 생각됩니다.

Webpack을 더 잘 사용하기위해서는 이전 Grunt와 Gulp에 대한 이해가 필요하다는 생각이 들어서 간단히 정리해보려고 합니다.

Grunt와 Gulp

Grunt와 Gulp는 사람의 실수나 반복적인 작업을 줄이기 위한 자동화 툴(task runner)입니다.

보통 CSS와 Javascript 파일을 concat, minify, compress, uglify를 하는데 많이 사용되죠,
즉 사전에 필요한 반복적인 작업들을 간단한 작업만으로 진행할 수 있습니다.

또한, 이들은 Node.js에서 사용할 수 있으며 여러 Plugin을 활용 할 수 있습니다

Grunt vs Gulp

위에서 처럼 두가지 툴 모두 같은 작업을 수행하지만, 수행하는 방법은 차이가 있습니다

설정방법

Grunt는 설정에 기반하여 동작하는 반면, Gulp는 Javascript를 기반으로 동작합니다.

아래는 Grunt의 설정 예 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Grunt는 JSON 형태의 confing를 구성하는 방식으로 구현됩니다
imagemin: {
    jpgs: {
        options: {
        progressive: true
        },
        files: [{
            expand: true,
            cwd: 'src/img',
            src: ['*.jpg'],
            dest: 'images/'
        }]
    }
}

설정파일 기반의 Grunt와 달리 Gulp는 Javascript (Nodejs) 코딩을 할 줄 아는 사람이면 쉽게 접근할 수 있는 것이 장점인것 같습니다.

1
2
3
4
5
6
// Gulp는 javascript를 사용합니다.
gulp.task('jpgs', function() {
    return gulp.src('src/images/*.jpg')
    .pipe(imagemin({ progressive: true }))
    .pipe(gulp.dest('optimized_images'));
});

속도

Gulp와 Grunt의 속도의 차이를 이해하기 위해서는 둘의 처리 방식이 다르다는걸 알아야 합니다.

Gulp는 스트림(Stream)을 기반으로 하는 빌드 시스템 입니다. 스트림을 이용해 데이터를 읽고 출력하며 작업들을 메모리에서 처리합니다. 즉, 요청 후 한번에 결과를 받는 것이 아니라 이벤트 중간중간 전달받아 작업을 하기 때문에 비교적 작업속도가 빠릅니다.

스트림(Stream)이란?
데이터의 입, 출력시 비동기적으로 처리될 수 있는 데이터의 연속된 흐름으로써, Node.js에서는 이 스트림을 읽고 쓸 수 있습니다.

또한 Gulp는 동시에 여러 작업을 처리 할 수 있지만 Grunt는 일반적으로 한 번에 하나의 작업 만 처리합니다.

출처 :

결론

Gulp가 Grunt보다 속다가 빠르다는건 맞지만, 사용의 편의성 또한 무시할 수 있는 부분이 아니기에 무엇이 자신에게 맞는지를 잘 파악해서 사용하는게 좋은것 같습니다.

출처 :

Webpack

Gulp와 Grunt와 같은 자동화 도구덕분에 많은 작업의 양이 줄었는데도 불구하고 Webpack이 나왔습니다. 이런 자동화도구에서 어떤 부분이 불편했던 것이었을까요? 우선 Webpack은 모듈 번들러이고 Gulp와 Grunt는 task runners입니다.

결론부터 말하자면 Webpack이 이들을 1:1로 대체된다기 보다 이 기능이 포함되어 있고 더 많은 작업을 할 수 있기 때문에 이 도구를 쓰는것입니다. webpack은 Browserify와 같은 의존성 관리 기능까지 포함하고 있으니 “webpack = (Grunt || Gulp) + Browserify” 이게 될텐데 안 쓸 이유가 없을 것입니다. 게다가 속도까지 더 빠르니까요.

우선 Browserify?

Browserify 는 Node.js 기반 javascript code 를 브라우저 환경에서도 실행 가능하도록 해줍니다.

1
2
3
4
5
6
var path = require('path');
var foo = require('./helpers/foo')

module.exports = function bar () {
  return 'bar'
};

즉, 브라우저와 Node.js의 코드를 동일하게 사용할 수 있습니다.

하지만 브라우저에서 작업결과를 봐야하기 때문에 매번 코드를 컴파일이 해야하는데, 코드의 양이 많아지면 하나 수정하는데도 엄청 오래걸릴 수 있다는 얘기가 됩니다.

참고한 블로그를 보면 webpack을 사용해 watch한 경우 빌드시간이 20초 0.1 ~ 0.3으로 단축되었다는 글을 볼 수 있었습니다.

실제로 정확히 이해하고 적용하는데는 시간이 걸리겠지만, 좋은 부분이 있다는 건 확실히 이해해야 할것 같습니다.

출처 :

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

Profile
에디터
번호 제목 날짜 조회 수 추천 수 URL
공지 [추천사이트] 코딩을 배울 수 있는 사이트 2015.08.24 247 0  
46 [스크랩] Front-End 발전 역사와 개발 생태계 2019.03.21 21 0 https://moon9342.github.io/front-end-ecosystem 
45 [스크랩] JavaScript의 strict mode란 무엇인가? 2019.03.21 9 0 https://moon9342.github.io/javascript-use-strict 
44 [스크랩] Babel을 사용해보자 2019.03.21 10 0 https://moon9342.github.io/javascript-babel 
43 [스크랩] [Gulp.js] Gulp 입문 ① - Gulp에 대한 소개 2019.03.21 9 0 https://programmingsummaries.tistory.com/356 
42 [스크랩] 프론트엔드 개발을 위한 Gulp 2019.03.21 13 0 https://github.com/FEDevelopers/tech.des...95%9C-Gulp 
[스크랩] Grunt, Gulp, Webpack 2019.03.21 9 0 https://fullest-sway.me/blog/2017/03/29/tool-each/ 
40 [팁테크] webpack 2018.08.26 42 0  
39 [자료공유] PC/Mobile 구분하는 소스(php, javascript, nginx 등) 2018.04.12 34 0 http://detectmobilebrowsers.com/ 
38 [자료공유] protect.js prtsc 캡처 방지 소스 2017.05.08 0 0 http://stackoverflow.com/questions/31309...for-any-we 
37 [자료공유] 웹페이지 화면캡쳐(Printscreen)방지 소스 1 2017.05.08 1465 0 http://blog.daum.net/_blog/BlogTypeView....icleno=295 
36 [포럼] JAVASCRIPT (위시켓) 2016.07.06 50 0 http://blog.wishket.com/java%EC%99%80-ja...C%9D%80-2/ 
35 [포럼] PHP, ASP, JSP.. 어느 것을 고를까요? (위시켓 블로그) 2016.07.06 101 0 http://blog.wishket.com/q-php-asp-jsp-%E...%EC%9A%94/ 
34 [포럼] PHP 간단 개념과 장단점에 대해서 (위시켓 ) 2016.07.06 88 0 http://blog.wishket.com/php-%EA%B0%84%EB...C%84%9C-3/ 
33 [포럼] PHP, JSP, ASP 중 선택은? (joonia, 20101015) 2016.07.06 169 0 https://kldp.org/node/118666 
32 [스크랩] 개발자의 몸값을 올리는 10가지 방법 (Rich Hein, 2014,10.29) 2016.07.03 78 0 http://www.itworld.co.kr/slideshow/90233 
31 소프트웨어 개발 채용의 5가지 동향 (Sarah K. White, 2015.05.20) 2016.07.03 16 0 http://www.itworld.co.kr/news/93560 
30 자바스크립트는 개발 세계를 지배할 수 있을까 (Andrew C. Oliver, 2012.10.11) 2016.07.03 20 0 http://www.itworld.co.kr/news/78199 
29 [스크랩] 2016년과 이후 JavaScript의 동향 2016.07.03 174 0 http://d2.naver.com/helloworld/3618177 
28 [스크랩] 웹 퍼블리셔는 프론트엔드 개발자가 아니다? (by 끄적이는멀더끙) 2016.06.15 141 0 http://blog.publisher.name/1200 
27 [뉴스] Web frameworks for Swift, a DB for React Native, and iOS UI automation from Google 2016.03.04 144 0