• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

eu81273/gulp-step-by-step: gulp.js 를 시작하기 위한 단계별 예제들과 설명 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

eu81273/gulp-step-by-step

开源软件地址(OpenSource Url):

https://github.com/eu81273/gulp-step-by-step

开源编程语言(OpenSource Language):

JavaScript 91.3%

开源软件介绍(OpenSource Introduction):

gulp 시작하기

gulp.js을 시작하기 위해 필요한 가장 기본적인 사용 방법들을 정리했습니다. gulp

gulp 개념

gulp 는 node.js 기반의 task runner 입니다. 반복적인 귀찮은 작업들이나 프론트엔드 빌드에 필요한 작업들을 gulp 통해 쉽게 처리해줄 수 있습니다.

프론트엔드에서 반복적으로 하는 작업들

Gulp 는 스스로를 Stream 기반의 Build System 이라고 소개하고 있습니다.

요청 후 한번에 결과를 받는 것이 아니라 이벤트로 중간중간 전달받는 방식을 stream이라고 하는데, 이 stream 을 기반으로 하고 있기 때문에 가장 node.js 의 강점을 잘 살리고 있고 실제로 작업 속도도 비교적 더 빠른 것으로 알려져 있습니다.

gulp의 특징

gulp 의 task 는 pipe 로 연결되는데, 작업 대상 파일들이 pipe 를 따라 흘러가며(stream) 병렬로 동시에 여러 task를 수행하게 됩니다. gulp 라는 이름과 빨대가 꽂힌 컵모양의 심볼이 gulp 의 특징을 잘 반영하고 있다고 볼 수 있습니다.

gulp 설치하기

gulp 를 사용하기에 앞서 node.js 와 npm 이 먼저 미리 설치되어 있어야 합니다. node.js 와 npm 이 설치되었다면, 먼저 아래와 같이 package.json 파일을 생성해줍니다.

$ npm init

package.json 파일이 생성되었다면, 아래와 같이 gulp 를 global 과 local 모두 설치해줍니다.

$ npm install --global gulp-cli
$ npm install --save-dev gulp

--save-dev 옵션으로 설치해주는 이유는, 대부분 gulp 가 production 이 아닌 개발 과정에서만 필요하기 때문에, NODE_ENV 의 값이 production 인 경우 gulp가 설치되지 않도록 하기 위해서 입니다.

이제 이어서 gulp의 설정 파일인 gulpfile.js 을 step1부터 차근차근 따라가며 만들어가보도록 하겠습니다.

gulp 한 단계씩 따라해보기

단계별로 gulpfile.js 과 약간의 더미 파일들을 구성해두었습니다. 각 단계에 대한 설명 혹은 주석을 참고해서 직접 실행도 해보고 수정도 해보면 gulp 사용법을 익히는데 도움이 될 것입니다.

각 단계들을 바로 실행해보고 싶다면, 먼저 gulp-step-by-step 저장소를 아래와 같이 clone 합니다.

$ git clone https://github.com/eu81273/gulp-step-by-step.git

clone 받은 저장소의 원하는 예제가 위치한 폴더로 이동한 후, package.json 파일에 설정된 디펜던시들을 설치합니다.

$ cd gulp-step-by-step
$ cd step01_hello_world
$ npm install

디펜던시 설치가 완료된 후 각 예제의 설명을 따라 gulp 를 실행하면 예제의 결과를 확인해 볼 수 있습니다. (아래의 예는 step 01 을 실행하는 예입니다.)

$ gulp hello

Gulp 를 활용하는데 도움이 되는 링크들




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap