최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰



빌드 패키지 직접 구성해보기 ( sass + concat + minifier )



# nodejs plugins CLI

use nodejs plugins bundler to try CLI

## Feature

- npm
- node-sass
- concat
- minifier

### Installation

```sh
> npm install -g npm
> npm install node-sass --save-dev
> npm install concat --save-dev
> npm install -g minifier --save-dev
```

### Plugins

| Plugin | URL |
| ------ | ------ |
| node-sass | [https://github.com/sass/node-sass] |
| concat | [https://www.npmjs.com/package/concat] |
| minifier | [https://www.npmjs.com/package/minifier] |


### CLI Example
```sh
> concat -o output.css ./1.css ./2.css
> node-sass src/style.scss dest/style.css
> node-sass src/style.scss dest/style.css
```

### Order Step
- step1 : concat ( css, js )
```sh
> concat -o style.scss ./1.scss ./2.scss ./3.scss
> concat -o main.js ./1.js ./2.js ./3.js
```
- step2 : scss to css
```sh
> node-sass style.scss style.css
```
- step3 : minify ( css, js )
```sh
> minify style.css  // style.min.js
> minify main.js  // main.min.js
```

### Complete package.json "scripts"
- package.json
```sh
"scripts": {
    "concat-css": "concat -o style.scss ./1.scss ./2.scss ./3.scss",
    "concat-js": "concat -o main.js ./1.js ./2.js ./3.js",
    "scss": "node-sass style.scss style.css",
    "minify-css": "minify style.css",
    "minify-js": "minify main.js"
},
```




'■ 백엔드 ■ > NodeJS' 카테고리의 다른 글

Express Middleware  (0) 2020.06.26
Nodejs설치  (0) 2018.06.21
minifier - minifying CSS/JS  (0) 2018.05.14
--save와 --save-dev 차이  (0) 2018.05.14
vue-axios  (0) 2018.05.09
댓글