공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/Parcel

08. concat 으로 파일 합치기

serpiko 2018. 5. 2. 15:59




   08. concat 으로 파일 합치기


- parcel의 build 명령어를 통해서 minify 는 지원하는데 


- 파일을 하나로 합쳐주지는 않으므로


- concat 을 설치하여 사용해보자



01. 설치


npm install -g concat



02. index.html 파일에 concat 결과물로 연결해 놓기


- src 내용에 미리 './src/concat.js' 를 기입해놓고..


<script src='./src/concat.js'></script>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    <div id="app"></div>
    <script src='./src/concat.js'></script>

</body>

</html>




03. 분할되어있는 js 파일들 src/concat_1.js   src/concat_2.js   src/concat_3.js 준비


- 아래와 같이 각각의 js파일을 만들어보자


src/concat_1.js

console.log('concat_1');


src/concat_2.js

console.log('concat_2');


src/concat_3.js

console.log('concat_3');




04. 파일 합치기


- concat 명령어를 통해서 파일을 하나로 합치자


Usage: concat [options]
 
concatenate multiple files
 
Options:
    -h, --help                   output usage information
    -V, --version                output the version number
    -o, --output <file>          output file

examples:

concat -o output.css ./1.css ./2.css ./3.css

- 명령어는 터미널에서 아래와 같이

concat -o ./src/concat.js ./src/concat_1.js ./src/concat_2.js ./src/concat_3.js


명령어를 실행하면 ./src/concat.js 로 파일이 합쳐져서 생성된다.




05. package.json 의 scripts 에 명령어를 등록해 놓으면 편하다.


"scripts": {
        "start": "parcel index.html",
        "concat": "concat -o src/concat.js src/concat_1.js src/concat_2.js src/concat_3.js"
    }

- 이렇게 등록해 놓으면 매번 CLI 를 타이핑 하지 않고


npm run concat


으로 실행이 가능하다.



06. parcel Serve 실행


- 아래 3개 명령어 모두 같은 동작을 하므로 아무거나 실행


npm start
npm run start
npm parcel index.html


- localhost:/1234 에서 결과 확인 해보면 

  취합된 concat.js 파일을 통해서 아래와 같은 결과가 뜰 것이다.







저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > Parcel' 카테고리의 다른 글

09. php 와 작업  (0) 2018.05.08
07. scss 연동하기  (0) 2018.04.30
06. vuejs 사용해보기  (0) 2018.04.30
05. vue, babel 설치 .babelrc 셋팅 하고 출력하기  (0) 2018.04.30
04. npm init  (0) 2018.04.30
댓글