Rails Webpack

Rails에서 Webpack과 Gulp 조합을 사용하기 위한 소소한 보조 라이브러리.

Install

gem install rails-webpack -v '0.4.0'

혹은 Bundler를 이용할 경우

Gemfile에 아래 추가후, bundle install

gem 'rails-webpack', '~> 0.4'

Usage

사전 설정

• node
• npm

은 자동으로 설치되지 않는다.

app/webpack에 설정과 의존성이 들어간다. 빌드된 최종 결과물은 app/assets/compiled에 저장. 사용자의 소스는 app/webpack/src에 작성할 수 있다.

초기 설정

rails generate webpack:config

config/webpack.yml 이 없다면 생성되나 이미 있다면 여러번 실행하더라도 의존성을 제외하고 설정파일을 자동으로 수정하지 않는다.

샘플 설정

---
main: 'common.js'
version: '1.0.0'
description: 'FIXME: <%= Rails.application.class.parent.name.underscore.gsub('/', '-') %>'
#homepage: 'https://github.com/astral1/rails-webpack'
license: 'MIT'
authors:
  - name: '<%= `git config user.name`.strip %>'
    email: '<%= `git config user.email`.strip %>'
gulp:
  default:
    - 'webpack'
  tasks:
    - name: 'webpack'
      dependencies:
        - 'bower'
bower:
  dependencies: []
npm:
#  repoistory:
#    type: 'git'
#    url: 'git+ssh://[email protected]/astral1/rails-webpack.git'
#  keywords:
#    - webpack
#    - rails
  dependencies: []
  develop_dependencies:
    - name: 'coffee-loader'
      version: '~0.7'
    - name: 'less-loader'
      version: '~2.2'
    - name: 'style-loader'
      version: '~0.12'
    - name: 'css-loader'
      version: '~0.17'
    - name: 'vinyl-named'
      version: '~1.1'
    - name: 'webpack'
      version: '~1.12'
    - name: 'webpack-stream'
      version: '~2.1'
    - name: 'bower'
      version: '~1.4'
    - name: 'gulp'
      version: '~3.8.11'
    - name: 'gulp-util'
      version: '~3.0.4'
    - name: 'gulp-bower'
      version: '~0.0.10'
    - name: 'gulp-zip'
      version: '~3.0.2'
    - name: 'gulp-load-plugins'
      version: '1.0.0-rc.1'
    - name: 'walk-sync'
      version: '~0.2.5'

• main - package.json의 main 값을 설정한다.
• version - resource package의 버전 asset pipeline의 버전도 여기에 맞춰진다.
• descriptsion - package.json과 bower.json에 포함될 resource package에 대한 설명
• homepage - resource-package의 주소 없어도 무방하다. 설정된다면, package.json, bower.json에 영향을 준다.
• license - script에 대한 License. 기본값은 MIT
• authors - script 작성자 정보. 기본으로 git user 정보를 이용해 설정된다.

Gulp 설정

• gulp.default - gulp의 기본 태스크
• gulp.tasks - gulp의 작업 의존성 설정

Bower 설정

• dependencies - Bower의 패키지 의존성 설정 Hash List 형태로 아래의 자료구조대로 작성한다.

[{name: 'flight', version: '~ 1.5'}, {name: 'q', version: '~ 1.4.1'}]

NPM 설정

• repoistory - 소스 확인 가능한 VCS 저장소 위치
• keyword - npm package를 위한 키워드
• dependencies - 운영에 필요한 의존성 목록 작성 규칙은 bower.dependencies와 동일
• develop_dependencies - 개발을 위한 의존성 목록 주로 gulp와 webpack을 위한 의존성 목록

설치

rails generator webpack:install

추가 명령

동기화

rake webpack:sync

webpack.yml의 변경분을 반영한다.

Rake

• rake gulp:webpack - gulp로 webpack 태스크 실행
• rake gulp:bower - gulp로 bower 태스크 실행
• rake 'gulp[task,arg1,arg...]' - gulp에서 사용자가 정의한 task를 파라미터 목록과 함께 실행
• rake npm:install - npm 패키지 설치
• rake npm:clean - npm으로 설치된 패키지 모두 삭제
• rake npm:install:clean - 기존 의존성을 모두 삭제한 후 재설치
• rake prepare:webpack - Webpack 작업 실행. assets:precompile이 실행될 때 함께 실행된다.
• rake webpack:init - 기본 레이아웃 작성. intializer, default script, page script등

TO DOs

• 의존성에 대한 버전 머지기능 지원(현재는 버전스펙까지 동일해야만 정리됨)

License

MIT 라이센스를 따르며, 상세한 사항은 LICENSE 파일 참조