Laravel - Laravel Mix 사용법

 

Laravel에서는 Webpack의 빌드 기능을 사용하여 자바스크립트 파일과 Css파일을 빌드시켜 사용할 수 있는 Laravel Mix라는 기능을 제공한다. 또한 Laravel Mix는 Webpack보다 사용하기 쉽고 성능 부분에서도 큰 차이가 없다는 장점을 가지고 있다.

 

1. 준비단계

Laravel Mix기능을 사용하기 위해서는 Node와 Npm이 설치되어 있어야 한다.

node -v
npm -v
# node와 npm의 설치 유무 확인

 

2. Laravel Mix 실행

package.json을 살펴보면 Laravel Mix 방법을 찾을 수 있는데, 두가지의 방법으로 실행할 수 있다.

npm run watch
npm run watch-poll

• watch : watch는  Css와 Js파일의 변경 부분이 있을 경우 자동으로 탐지하여 컴파일을 시켜준다.
• watch-poll : Css와 Js파일들을 일정한 주기로 컴파일 시켜주는 옵션이다.

일정한 간격으로 컴파일 시키기 위해서는 package.json의 watch-poll부분에 옵션을 추가해줘야 한다. 라라벨 프로젝트를 생성한 초기 상태에는 자동 컴파일 간격이 명시되어 있지 않기 때문에 npm run watch와 동일하게 파일의 변경에 따라 컴파일 된다.

 

2-1. 자동 컴파일 간격 설정

"scripts": {
    "watch-poll": "npm run watch -- --watch-poll"
}

package.json을 살펴보면 scripts 부분에 watch-poll이 있는 것을 확인할 수 있다. 위의 부분은 자동 컴파일 간격을 설정하지 않은 상태이다.

 

"scripts": {
    "watch-poll": "npm run watch -- --watch-option-poll=3000"
}

위와 같이 poll옵션을 추가한 후, 뒷 부분에 컴파일 간격을 추가하면 된다. poll의 단위는 ms로써, 3000ms는 3초를 나타낸다. 위의 부분처럼 설정시, 3초 간격으로 Css와 Js파일을 자동 컴파일하는 것을 확인할 수 있다.

 

3. Laravel Mix 살펴보기

const mix = require('laravel-mix');
const productionSourceMaps = true; // create source-map files

laravel에서 laravel-mix를 사용하기 위해서는 package.json에 기본적으로 설치된 laravel-mix 플러그인을 사용해야 한다. require를 통해 해당 플러그인을 가져와 사용한다.

빌드를 할 때, 소스맵 파일을 생성하고자 한다면 소스맵 변수에  true로 값을 넣어준 후, 하단에 컴파일하는 구문에 추가해 주면 된다.

require('laravel-mix')는 라라벨을 설치했을 때, webpack.mix.js가 설치되면서 자동적으로 삽입되는 구문이기에 따로 입력할 필요는 없다.

 

3-1. Sass 컴파일

mix.sass('resources/assets/css/build.scss',
	 'public/dist/css/main.css').sourceMaps(productionSourceMaps, 'source-map'); // sass 컴파일

resources/assets/css 경로에 존재하는 build.scss를 파일을 빌드하여 public/dist/css/main.css로 만들라는 명령이다. sourceMaps에 true값을 넣었기에 css파일 외에도 map파일이 추가적으로 생성된다.

map파일이 추가적으로 생성되면 개발을 하면서 소스 코드를 디버깅 할 수 있다. 만약 개발단계를 넘어 홈페이지를 운영하는 단계에 이르게 되면 이 값을 false로 변경하면 된다. 값을  false로 변경하면 map파일이 생성되지 않는다.

 

3-2. Js 컴파일

mix.js('resources/assets/js/index.js',
       'public/dist/js/index.js').sourceMaps(productionSourceMaps, 'source-map');

Sass를 컴파일 할 때와 동일하게 Js를 컴파일 할 때, mix 뒷부분에 js를 넣고 코드를 작성하면 된다.

 

4. browserSync

mix.browserSync('insert domain');
// insert domain 부분에 현재 실행중인 웹 페이지의 url 입력

browserSync를 사용하면 laravel mix에 입력하여 빌드를 하고자 하는 scss, js 파일 등에 변경사항이 발생할 경우(소스 코드 추가 및 스타일 추가 등)에 자동적으로 페이지에 적용이 된다.

browserSync를 사용하지 않았을 때는, 새로 컴파일 된 파일이 존재하면 웹 페이지에 적용시키기 위해 페이지 새로고침을 해야했다. 하지만 이 기능을 사용하면 파일 변경을 자동으로 감지하여 변경 사항을 브라우저에 추가해준다. 이 기능을 사용하면 소스코드 변경 후, 새로고침 없는 편리한 환경에서 개발을 진행할 수 있다.

 

---

참고 사이트 : 

https://laravel.com/docs/8.x/mix

Laravel - The PHP Framework For Web Artisans

 

https://stackoverflow.com/questions/57546731/laravel-mix-browsersync-not-loading-at-localhost3000

Laravel-Mix + BrowserSync Not Loading at localhost:3000