[해당 카테코리 첫 글을 시작하며...]Task Runner란?

목차

1. 정의

2. 필요성

3. 코드(내용)

 

 

https://github.com/yeoseon/tip-archive/issues/40

모던 자바스크립트란 · Issue #40 · yeoseon/tip-archive

 

1. 정의

정의

task runner란 각기 다른 부분의 빌드 과정을 자동화시켜주는 도구

 

 

2. 필요성

필요성

성능을 고려해 본다면 우리가 webpack을 통해 만든 bundle 파일을 축소시킬 필요 존재

JavaScript가 변경될 때마다 webpack 명령을 수행해 주어야 하는 건 꽤 귀찮음.

+ package.json파일에 devDependencies와 dependencies와 함께 scripts를 관리하므로, 프로젝트 전체 관리가 용이

package.json파일 내, scripts 코드

 

3. 코드(내용 목록)

task에 존재하는 내용 목록 => 단지 task를 자동화할 때 자동화되는 task의 내용임
	코드관련 task / 이미지 관련 task / 테스트 관련 task를 자동화 할 수 있음.
코드 압축
이미지 최적화
테스트 실행
Sass를 CSS로 변환
이미지 압축
그외

 

Grunt와 Gulp 등이 있지만, npm script를 통해 해결할 수도 있음.

 

package.json 파일에 다음과 같은 script를 추가한다. build와 watch 명령을 추가

{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --progress -p",
    "watch": "webpack --progress --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
  }
}

 

 

위의 scripts에 대해 

빌드는 아래와 같이 입력한다.

$ npm run build

watch에 지정된 --progress 옵션은 진행 과정을 백분율로 보여주고, -p는 코드를 압축

$ npm run watch