Lavral Elixir로 Bower 모듈 가져오기

레퍼런스
NPM Package: Laravel elixir wiredep
NPM Package: Laravel elixir useref

bower로 설치한 모듈들을 elixir로 관리하는 방법은 여러가지가 있겠지만 여기서는 제가 쓰는 방법을 소개 합니다. 현재 Laravel은 최초 설정된 npm 모듈만 설치되어 있고 아직 bower 모듈은 설치되지 않은 상태로 가정합니다. bower_components 에서 가져오는 모듈 이외에 사용자가 작성한 파일들에 대한 처리는 편의상 생략하도록 하겠습니다.

1. 준비
먼저 루트에 .bowerrc라는 파일을 생성하고 아래의 내용을 입력해 줍니다. bower 모듈은 public/bower_components 디렉토리에 설치하라는 의미죠.

{
  "directory": "public/bower_components"
}

그리고 필요한 elixir 모듈을 설치합니다. 가장 기본적으로 사용되는 모듈은 laravel-elixir-wiredep과 laravel-elixir-useref죠. npm으로 이를 설치합니다.

  npm install laravel-elixir-wirdep laravel-elixir-useref --save-dev

그리고 자신이 사용하고자하는 bower 모듈들을 인스톨합니다.

2. bower_componet 모듈 가져오기
views 디렉토리의 blade 템플릿 파일 중에서 script와 stylesheet를 로드하는 역할을 하는 파일을 불러옵니다. 저는 layout/master.blade.php 라는 파일이네요. 파일을 열고 <head>태그 안쪽에 다음과 같은 내용을 입력합니다.

(주: js를 로드하는 script 태그의 위치는 body 태그가 끝나기 직전에 위치하는 것을 개인적으로 선호하고 그렇게 하는 것이 바람직하다고 생각하지만 여기서는 편의상 head 태그 안쪽에 배치하겠습니다. 또한 프로젝트에 AngularJS를 적용하고 블레이드 템플릿을 사용하는 경우 Angular에서 사용하는 {{ }}는 @를 붙여서 @{{ }} 이런 형태로 사용하여야 합니다. 그런데 Angular보다 html이 먼저 로딩되는 경우 짧은 순간이지만 Angular에서 렌더링하지 않은 상태의 @{{ }} 가 그대로 나타나는 경우가 있습니다. 이 경우에는 부득이하게 Angular 관련 스크립트는 head 쪽에서 로드하는 것이 바람직합니다.)

<!-- bower:css -->
<!-- endbower -->

<!-- bower:js -->
<!-- endbower -->

이제 잠시 gulpfile.js로 넘어와서 스크립트를 작성해보겠습니다.

var elixir = require('laravel-elixir');

// 아까 설치한 두 모듈을 로드합니다.
require('laravel-elixir-wiredep');
require('laravel-elixir-useref');

elixir(function (mix) {
  mix.sass('app.scss')
    .wiredep();
});

mix.sass(‘app.scss’)는 처음부터 작성되어 있는 내용입니다. 여기에 wiredep()을 추가하고 gulp를 돌려봅니다. 그리고 아까 bower로 시작하는 주석문을 달아준 master.blade.php를 열어보면 …

<!-- bower:css -->
  <link rel="stylesheet" href="/bower_components/sweetalert/dist/sweetalert.css" />
  // 이하생략
<!-- endbower -->

<!-- bower:js -->
  <script src="/bower_components/sweetalert/dist/sweetalert.min.js"></script>
  // 이하생략
<!-- endbower -->

신박하게도 주석문과 주석문 사이에 bower로 설치한 js 파일과 css 파일을 로드하는 스크립트가 자동으로 생성됐습니다.

3. 가져온 모듈 빌드하기

여기서 한발 더 낳아가 이 모듈들을 js의 경우에는 vendor.js, css의 경우에는 vendor.css라는 이름으로 병합해보겠습니다. 아까 열어놓은 master.blade.php 를 다시 편집합니다.

<!-- build:css(public) css/vendor.css -->
<!-- bower:css -->
  <link rel="stylesheet" href="/bower_components/sweetalert/dist/sweetalert.css" />
  // 이하생략
<!-- endbower -->
<!-- endbuild -->

<!-- build:js(public) js/vendor.js -->
<!-- bower:js -->
  <script src="/bower_components/sweetalert/dist/sweetalert.min.js"></script>
  // 이하생략
<!-- endbower -->
<!-- endbuild -->

그리고 gulpfile.js를 열어서 편집을 합니다.

var elixir = require('laravel-elixir');

// 아까 설치한 두 모듈을 로드합니다.
require('laravel-elixir-wiredep');
require('laravel-elixir-useref');

elixir(function (mix) {
  mix.sass('app.scss')
    .wiredep()
    .useref({
      src: 'layouts/master.blade.php'
    }, {
      searchPath: 'public'
    });
});

이제 gulp를 실행해보겠습니다. public/js 와 public/css 에 각각 vendor.js, vendor.css가 생성된 것을 알 수 있습니다. 하지만 정작 브라우저에서 개발자 도구를 열어 확인해 보면 vendor 파일을 가져오는 것이 아니라 합쳐지기 전의 bower_components 에 있는 파일들을 로드하고 있음을 확인할 수 있습니다.

4. 마무리

다시 master.blade.php로 돌아가서 약간의 수정을 가해봅니다.

@if(config('app.debug'))
  <!-- build:css(public) css/vendor.css -->
  <!-- bower:css -->
    <link rel="stylesheet" href="/bower_components/sweetalert/dist/sweetalert.css" />
    // 이하생략
  <!-- endbower -->
  <!-- endbuild -->
@else
  <script src="{{elixir('css/vendor.css'}}">
@endif

@if(config('app.debug'))
  <!-- build:css(public) js/vendor.js -->
  <!-- bower:js -->
  <script src="/bower_components/sweetalert/dist/sweetalert.min.js"></script>
  // 이하생략
  <!-- endbower -->
  <!-- endbuild -->
@else
  <script src="{{elixir('js/vendor.js'}}"></script>
@endif

Laravel이 Debug 모드일 때는 bower_components에서 파일을 불러오지만 Debug 모드가 아닐때는 elixir() 핼퍼 함수에서 생성한 경로에서 소스 파일을 가져오게 됩니다. 하지만 elixir() 핼퍼 함수로부터 해싱된 경로를 반환받기 위해서는 gulpfile.js 에서 먼저 해줘야 할 것이 있습니다.

var elixir = require('laravel-elixir');

// 아까 설치한 두 모듈을 로드합니다.
require('laravel-elixir-wiredep');
require('laravel-elixir-useref');

elixir(function (mix) {
  mix.sass('app.scss')
    .wiredep()
    .useref({
      src: 'layouts/master.blade.php'
    }, {
      searchPath: 'public'
    })
    .version(['js/vendor.js', 'css/vendor.css']);
});

이제 gulp를 돌려보겠습니다. Laravel의 Debug 모드는 루트의 .env 파일에서 변경할 수 있는데(config/app.php 가 아니라), 디버그 모드의 설정 여부에 따라 빌드된 vendor 파일을 불러오거나, bower_components 에서 파일을 불러오는 것을 확인 할 수 있습니다. 각 elixir 모듈의 세부적인 옵션들은 상단 링크에서 확인 하실 수 있습니다.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>