gulp 사용하기

뺑이님 열심히 올리셔서 같이 한번 올려요~

현업이랑 떨여저서 사용안하다 보니 기억도 가물하고해서 다시 공부할겸 ㅠ

기본적으로 홈페이지 가면 잘 되어 있다. 필요한 플러그인 찾을때도 쉽게 찾을수 있다.

http://gulpjs.com

// 전역 설치  
$ npm install gulp -g
 
//프로젝트 폴더 설치
$ mkdir newproject
$ cd newproject
 
// 프로젝트 정보관리를 위해  package.json 생성하기
// 타자힘들어서 터미널 화면 긁어왔다.
soon:gulp soon$ npm init
name: (gulp) newproject
version: (1.0.0) 0.0.1
description: sample
entry point: (index.js)
test command: 
git repository: 
keywords: 
author: soon
license: (ISC)
About to write to /Users/soon/Downloads/gulp/package.json:
{
  "name": "newproject",
  "version": "0.0.1",
  "description": "sample",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "soon",
  "license": "ISC"
}
Is this ok? (yes) y
//완료하면 package.json 파일이 생성되고 내용은 위와같은 json이다
 
// gulp 설치 방법
// 전역으로 설치하면 -g 옵션을 주면된다.
$ npm install gulp -g
// --save-dev 개발시에만 사용되니까 붙이는 옵션이라는데..
$ npm install gulp --save-dev
 
// 플러그인 설치
// http://gulpjs.com/plugins/  홈페이지 참조
$ npm install gulp-[플러그인명] --save-dev
// 샘플
$ npm install gulp-uglify --save-dev

#실제 실행

$ npm init
...
$ npm install gulp --save-dev

결과 아래 파일과 폴더가 생성된다. 

/node_modules/

/package.json

추가 생성

/src/     소스파일이 있는 폴더

/dist/    컴파일된(?) 배포할 파일이 있는 폴더

/gulpfile.js  gulp 설정 파일

gulp 사용하기

# gulpfile.js 의 기본구조 

var gulp = require('gulp');
//...
gulp.task('mytask', function(){
    //...
    // 테스크는 작업단위 이며 처리할 코드를 입력하면된다
});
 
gulp.task('default', ['mytask'] );

   

실행은 커맨드 라인에서 gulp 만 입력하면 된다

### gulp의 사용예제

/src/js/에 base.js board.js 파일을 추가한다.

@ js파일의 내용

// $> /src/js/base.js
function customFunc(){
    return "func";
}

// $> /src/js/board.js
function getList()
{
    return "list";
}

@gulpfile.js

var gulp = require('gulp');
//gulp 플러그인들이다 당연히 설치되어 있어야한다.
// npm install gulp-concat --save-dev
// npm install gulp-minify --save-dev
var concat = require('gulp-concat');
var minify = require('gulp-minify');
 
// js관련 빌드작업
gulp.task('my_js_task', function(){
    return gulp.src('src/js/*.js')  // 적용대상 (/src/js/ 폴더의 모든 js파일이 대상
            .pipe(concat('app.js')) // pipe로 작업추가 concat('app.js') 대상을 app.js로 합친다.
            .pipe( minify({
                ext:{
                    src:'.js',
                    min:'.min.js'
                }
            })
            )  // minify(...) 압축
            .pipe( gulp.dest( 'dist/js' ) );  //저장
    /**
        /src/js/의 모든 .js 파일을 대상으로 
        합치고 
        합쳐진내용을 압축하여 저장한다.
        minify(
            ext:{
                src:'.js' 원본파일을 .js로 저장
                min:'.min.js' 압축된 파일을 .min.js로 저장
            }
        */
});
 
//css 관련 빌드 작업
gulp.task('my_css_tak', function(){
    //...
});
 
gulp.task('default', ['my_js_task', 'my_css_task'] );

@gulp 실행 결과

/dist/js/ 에 파일이 생성되었다. (파일이 있었다면 수정되겠지..)

// $> /dist/js/app.js
function customFunc(){
    return "func";
}
function getList()
{
    return "list";
}
 
// $> /dist/js/app.min.js
function customFunc(){return"func"}function getList(){return"list"}

위 샘플은 자업시 여러 이유로  분할하여 작업한  js파일을 하나로 모아서 압축하여 결과물 폴더에 저장된다

@응용하기

솔찍히 별로 많이 응용은 못해봤다 주로 사용해본걸로 적어보자면

• 파일합치고 압축 (html, css, js 만 생각해봐도 엄청 편하다)
• sass, less 컴파일 하여 합치고, 압축
• 파일의 변화 감지 (저장 자등으로 지정 작업처리 되도록 가능하다.)
•  ㄴ 수정시  alt-tab로 브라우저 새로고침 안하고 자동갱신 (gulp-webserver, livereload 등으로 가능..)
• 임시폴더 파일 자동삭제
• js, css 문법 검사
• 이미지 압축도 되는거 같더라;;

그외에도 플러그인 찾아보면 다양하게 많다.

한마디로 신세경!!