Web Tech/Gulp 검색 결과

해당 글 7건

package.json 간단히 알아보기

NodeJS package.json이 글에서는 package.json 파일에 작성되어 있는 것에 대해 간단히 알아보도록 하겠습니다.더 많은 정보는 npm-config 를 참고바랍니다. package.jsonpackage.json 에서 가장 중요한 항목은 "name" 과 "version" 입니다.이 항목들은 필수로 입력되어야 하며 이 항목들이 누락되면 여러분의 패키지는 설치할 수 없습니다. namename 과 version 을 통해서 각 패키지의 고유성을 판별하게 되고 패키지의 내용을 변경하려면 version 을 변경해야 합니다. serveral rulename 은 반드시 214자 보다 짧아야 하고, 이는 scoped package 의 scope 를 포함합니다.name 은 점(.)이나 밑줄(_)로 시작할 ..
Web Tech/Gulp 2016. 8. 8. 07:00

Gulp 사용법 #6 (Browser-sync)

Gulp with BrowserSync 로컬에서 프론트엔드 작업시 웹서버를 실행하여 작업한 결과물을 확인하게 됩니다. 파일을 수정할 때마다 띄워놓은 웹서버에서 refresh 를 하여 작업물을 확인하는 것이 일반적이지만 지금 다루려고 하는 BrowserSync 를 사용하면 위의 과정을 보다 편리하게 자동화시킬 수 있습니다. BrowserSync는 Gulp 플러그인이 아닌 node.js 기반의 어플리케이션이지만 Gulp 와 매끄럽게 연동해서 사용할 수 있습니다. 자체적으로 다양한 옵션을 가진 미니 웹서버 기능을 지원하고, 파일 변경시에 이를 자동으로 감지해서 브라우저 Refresh 를 수행할 수 있습니다. 가장 흥미로운 기능은 여러 개의 브라우저를 실행했을 때 한 브라우저에서 클릭을 하면 다른 브라우저에서도..
Web Tech/Gulp 2016. 8. 5. 14:58

Gulp 사용법 #5 (gulp-livereload)

Setting Up Gulp With LiveReload, and Other Tasks앞선 포스팅 단계별 gulp 사용법 #4 까지 스크립트, gulp-sass, gulp-sourcemaps 에 대해 알아보았습니다.이번 글에서는 liveReload 를 다뤄보도록 하겠습니다.일반적으로 로컬에서 프론트엔드 작업을 할 때 어떤 형태로든 웹서버를 띄워서 결과물을 확인하게 됩니다. 파일을 수정할 때마다 정적 리소스들을 빌드해준 후에 띄워놓은 웹서버에 접속해서 리프레시를 해서 결과물을 확인하는 것이 일반적인 작업 패턴일 것입니다.livereload 는 파일 변경(Sass, css, js, html 등...)시에 이를 자동으로 감지해서 브라우저 refresh 를 자동으로 수행할 수 있도록 도와 줄 수 있는 도구입니다..
Web Tech/Gulp 2016. 8. 5. 07:00

Gulp 사용법 #4 (gulp-sass, gulp-sourcemaps)

gulp-sass, gulp-sourcemaps 지난 포스팅에서부터 단계별(#1,2,3)로 전반적인 Gulp 설치와 사용방법에 대해 알아보았습니다. 이 글에서는 CSS 의 전처리기인 Sass 를 컴파일하는 gulp-sass 와 Sass 파일을 역추적할 수 있는 gulp-sourcemaps 에 대해 간단히 알아봅니다. gulpfile.js 지난 gulp 사용법 #3 의 소스코드를 가지고 이어서 gulp-sass, gulp-sourcemaps 모듈을 설치하고 gulpfile.js 를 작성해 보도록 합니다. 먼저 두 개의 gulp 플러그인을 다음과 같이 설치하도록 합니다. Command Line Interface $ npm i gulp-sass gulp-sourcemaps --save--dev gulpfile..
Web Tech/Gulp 2016. 8. 4. 07:00

Gulp 사용법 #3 (gulp-uglify, gulp-rename)

Gulp Plugin - gulp-uglify, gulp-rename 지난 포스팅에서 gulp 설치와 대략적인 gulp 문법, 그리고 gulp 플러그인을 다운받은 후 간단한 gulpfile.js 를 작성해 보는 시간을 가졌습니다. 이번 글에서는 프론트 엔드에서 많이 사용되는 다양한 플러그인을 설치하고 그에 따른 gulpfile.js 를 한 단계, 한 단계 작성해 보도록 합니다. gulp 는 앞서 설명했듯이 node.js 스트림 기반의 task runner 입니다. 반복적으로 발생하는 노가다성의 작업들을 빌드를 함으로서 필요한 작업을 보다 쉽게 처리할 수 있도록 gulp(자동화 빌드 시스템) 란 유용한 도구를 이용해 처리할 수 있습니다. gulp 의 작업흐름 방식은 다음과 같습니다. 위 이미지에서 보았듯이..
Web Tech/Gulp 2016. 8. 3. 08:00

Gulp 사용법 #2 (gulp-concat)

Syntax Gulp 이전 포스팅에서는 gulp 의 설치방법 및 간단한 task 에 대해 알아보았습니다. 이제 본격적으로 gulp 사용방법에 대해 알아봅니다. 만약 gulp 설치가 되어 있지 않다면 Gulp #1 설치를 참고하시기 바랍니다. Determining Folder Structure(폴더 구조 생성하기) gulp 의 workflow(작업흐름) 방식을 이해하기 위해서 전체적인 맥락을 짚어보며 진행하도록 하겠습니다. gulp 설치를 완료한 후 package.json 과 gulpfile.js가 준비되었다면 사용자 프로젝트에 디렉터리 구조를 구성할 필요가 있습니다. 먼저, src (source) 폴더와 dist (distribution) 폴더를 먼저 만들어두로록 합니다. scr 폴더는 어떠한 처리도 하..
Web Tech/Gulp 2016. 8. 2. 08:13

Gulp #1(걸프 설치 및 개요)

자동화 빌드 시스템 : Start Gulp 현재 생산성을 높이고 개발자들의 수고를 덜어줄 수 있는 유용한 도구로는 Grunt, Gulp, Brunch, Bower 등이 있습니다.이러한 도구는 예를 들어 사용자들이 반복적으로 수행하게 되는 일인, javaScript 와 CSS를 온라인 툴이나 기타 툴을 사용하여 파일의 용량을 줄이기 위해 압축, 병합을 시도한 후 수정작업이 발생할 경우 또 다시 일련의 반복작업을 하게 되는 것이 다반사인데 이러한 반복적인 할 일들을 자동으로 대신 처리해주는 것이 자동화 빌드 시스템입니다. 이 글에서는 다른 자동화 빌드 시스템보다 쉬운 문법을 제공하고 있는 gulp 에 대해 알아보도록 합니다.gulp 는 Grunt 보다 후발주자임에도 쉬운 문법으로 인해 접근성이 뛰어나 꾸준한..
Web Tech/Gulp 2016. 8. 1. 13:19