자바스크립트 개발도구 - git, npm, gulp

책 <러닝자바스크립트>를 기본으로 배운 자바스크립트 내용입니다.

 

목차

• git 시작하기
• git 새 로컬 저장소, 새 파일, (.gitignore, README.md) 파일 만들기
• npm 시작하기
• npm 패키지 관라
• gulp 시작하기

 

 

<git>

git 시작하기

git : 형상관리, 버전 관리 시스템으로 여러명이 개발할 때

      코드관리를 효율적으로 할 수 있게 해는 시스템이다.

 

git 동작 과정

 

git 새 로컬 저장소 만들기

• git-bash실행
• 적당한 경로에 관리할 프로젝트 디렉토리 생성(test) -> 프로젝트 루트
• 프로젝트 디렉토리에 $git init 입력
• ".git" 파일이 생성되면 완료

 

저장소에 새 파일 만들기

$ vim 파일 이름 
# 파일 내용 작성

$ git add 파일 이름
$ git status
$ git commit -m "커밋 메세지 작성"

※ git add 는 파일 추가가 아니라 파일의 변경사항을 추가하는 것이다.

 

저장소에 .gitignore파일 생성

$vim .gitignore 

####.gitignore 파일 내용####

# npm 디버그 기록
npm-debug.log*

# 프로젝트 의존성
node_modules

# 임시 파일
*.tmp
*~

###########################

$git add .gitignore
$git status
$git commit -m "Initial commit: added .gitignore."

 

저장소에 README.md파일 생성

= Learning JavaScript
= = Chapter 2: JavaScript Development Tools

In this chapter we're learning about Git and other
development tools.

 

<npm>

npm시작하기

npm : Node Package Manager

node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램이다.

 

npm package관리

• node.js설치(npm내장되어 있음.) : https://nodejs.org/에서 안정 버전 설치
  
• 언더스코어 : 코딩을 도와주는 자바스크립트 라이브러리로 매우 작은 용량에 80여가지의 function을 제공.
  

#프로젝트 루트(test)에 언더스코어 설치
$npm install --save underscore

• 생성된 node_modules 우선 삭제
• npm은 package json파일로 의존성 관리하는데, package.json을 읽고 필요한 패키지를 자동으로 설치함.(의존성 : 프로젝트 설치하고 사용하는 모듈)

$npm init
$npm install

 

<gulp>

빌드도구 gulp : 반복 작업 자동화해주는 도구

• 전역에 gulp설치
  

$npm install -g gulp

• 로컬에 gulp설치
  

$npm install --save-dev gulp

• es6코드를 es5코드로 변형허주는 gulpfile.js 파일생성 (gulp의 task는 pipe로 연결되있음.) 

#gulpfile.js

const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', function() {  
  // 노드 소스  
  gulp.src("es6/**/*.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
    
  // 브라우저 소스
  gulp.src("public/es6/**/*.js")
    .pipe(babel())
    .pipe(gulp.dest("public/dist"));
});

• 설치 확인
  

$gulp

<지금까지의 프로젝트 구조>

.git .gitignore	#Git
package.json node_modules	#npm
es6(es6 코드들 저장) dist(es5 코드들 저장)	#노드 소스(서버)
public/ es6 public/ dist	#브라우저 소스 (클라이언트)