레일 자산 파이프라인에 대해 알아야 할 모든 것

자산 파이프라인은 무엇입니까?

레일스 애플리케이션을 빌드하는 경우 자산 파이프라인에 대해 들어보셨을 것입니다. 자산 파이프라인은 브라우저에서 자바스크립트 파일,스타일시트 및 이미지를 처리하고 사용할 수 있도록 준비하는 도구 및 메커니즘으로 생각할 수 있습니다. 이러한 프로세스는 커피 스크립트 또는 말대꾸와 같은 다른 언어로 작성된 자산뿐만 아니라 사전 처리 자산을 축소하고 압축 할 수 있습니다.

자산 파이프라인은 정적 자산과 관련된 다양한 문제를 해결하기 위해 만들어졌습니다. 이러한 문제 중 하나는 태그에 별도로 지정된 각 자산을 별도로 검색해야 한다는 것입니다. 또한 주석,여분의 공백 및 긴 변수 이름으로 많은 대역폭을 낭비 할 수 있습니다. 또 다른 문제는 캐싱을 포함합니다. 예를 들어 서버에서 자바스크립트 파일을 제공하는 경우 브라우저는 일정 기간 동안 해당 파일을 자동으로 캐시합니다. 그러면 페이지 로드 시간이 향상되지만 나중에 자산이 변경되면 어떻게 될까요? 브라우저는 그것에 대해 알 수 없으므로 캐시 수명이 만료 될 때까지 캐시 된 자산을 계속 사용합니다. 사전 프로세서는 브라우저에 퇴장하기 전에 자신의 적절한 대응에 해당 파일을 변환하는 데 필요한,그래서 브라우저가 직접 해석 할 수 없습니다.

자산 파이프 라인은 자비로 적절하게 사용될 때 위의 모든 문제를 해결할 수 있습니다. 여러 자산을 하나로 컴파일하고,자산을 축소 및 압축하고,캐싱 문제를 피하기 위해 자산을 소화 할 수 있으며,대체 언어를 사전 처리하고 자바 스크립트와 씨에스로 전환 할 수 있습니다.

이 게시물은 자산 파이프 라인과 관련된 다양한 주제를 다룹니다:

• 자산 파이프라인을 사용하는 방법의 기본 사항
• 자산을 배치할 위치를 구조화하는 모범 사례
• 사전 컴파일 배열을 사용하여 자산 파이프라인에서 처리되는 파일을 지정하는 방법
• 일부 문제점

기본 사용법

자산 파이프라인이 사용되는 두 가지 기본 방법이 있습니다:

1. 개발 모드에서 서버를 실행하면 자동으로 자산을 사전 처리하고 즉시 준비합니다.
2. 프로덕션 모드에서는 자산을 사전 처리,버전 화 및 압축 및 컴파일하는 데 사용할 수 있습니다. 다음 명령을 실행하여 수행할 수 있습니다:

1

bundle exec rake assets:precompile

그러면 기본적으로public/폴더에assets디렉터리가 만들어집니다. 그런 다음 모든 압축 및 컴파일 된 파일을 해당 디렉토리,적절한 형식 및 새로운 소화 버전으로 추가합니다. 그런 다음 레일스가 파일을 전달할 필요가 없도록(그리고 즉시 전처리 등을 실행할 수 있도록)해당 파일을 직접 서버로 설정할 수 있습니다.)자체.

기본값을 변경할 수 있으므로 예상대로 작동하지 않으면config/application.rb에서 응용 프로그램 구성 파일을 확인하십시오. 레일 4 에서 자산 처리는 일반적으로config/initializers/assets.rb로 구성됩니다.

파일 구조

자산 파이프라인의 기존 기능을 쉽게 이해할 수 있는 방식으로 자산을 구성하는 것이 중요합니다. 당신이 알아야 할 첫 번째 것은 사용자 정의 자바 스크립트,스타일 시트 및 이미지의 모든app/assets/디렉토리에 가야한다는 것입니다. 기본적으로javascripts,stylesheets및images에 대한 폴더가 각각 있습니다. fonts,audios및videos를 이러한 자산 유형의app/assets/디렉터리에 추가할 수도 있습니다. 사용중인 모든 타사 코드(예:백본.(주)제이에스)vendor/assets/디렉터리에 배치해야 합니다.:

1234567891011

rails-app/ app/ assets/ images/ # Image assets javascripts/ # Custom Javascript/coffeescript stylesheets/ # Custom CSS/Sass ... vendor/ assets/ javascripts/ # Javascript libraries, etc. stylesheets/ # Vendor themes, javascript library themes, etc.

웹 서버가public/디렉토리의 정적 파일을 자동으로 서버하므로 모든 자바 스크립트,이미지 및 스타일 시트 자산이 거기에 배치되어서는 안되는 이유는 무엇입니까? 하나는public폴더의 아무 것도 자동으로 사전 처리,컴파일 또는 압축되지 않으므로 자산을 거기에 넣으면 자산 파이프 라인을 완전히 우회하고 모든 이점을 잃게됩니다. 거기에 자산을 넣을 때 레일 코드 내에서 자산을 쉽게 참조 할 수있는 능력을 잃게됩니다. 예를 들어 다음 코드가 있는 뷰를 가질 수 있습니다:

12345678910

# app/assets/images/logo.png= image_tag('logo')# Outputs something like <img src="/assets/logo-.png" /># public/images/logo.png= image_tag('/images/logo.png')# Outputs something like# <img src="/images/logo.png" />

두 번째 시나리오(public/images/logo.png)에서는 사이트가 기본 디렉터리에서 배달된 경우에만 작동합니다. 또한 자산 파이프라인의 파일 버전 관리를 활용할 수 없습니다.

미리 컴파일

이제app/assets/javascripts/폴더에 넣은 모든 것이 앱에 대해 자동으로 미리 컴파일되는지 궁금할 것입니다. 다행히도 자산 파이프라인은 컴파일되는 파일과 순서를 지정하는 방법을 제공합니다. 기본적으로 응용 프로그램입니다.및 응용 프로그램.모든 비 자바 스크립트와 함께(또는 말대꾸/커피 스크립트 등가물),비 씨에스 에셋이 포함되어 있습니다. 응용 프로그램 이외의 자바스크립트 파일을 포함합니다.및 응용 프로그램.두 가지 방법 중 하나로 요구해야 합니다:

1. config/initializers/assets.rb(레일스 4)또는 응용 프로그램 구성 파일(예:config/application.rb)의 사전 컴파일 배열에 추가하거나
2. 자산 매니페스트 또는 하위 파일 매니페스트 중 하나에 파일을 포함하십시오.

첫 번째 옵션은 다음과 같습니다:

12

# In config/initializers/assets.rbRails.application.config.assets.precompile += %w( some-other-file.js even-another.css )

이 옵션은 특정 페이지에만 포함하는 것이 적합하고 다른 페이지에는 포함해서는 안 되는 파일에 가장 적합합니다. 예를 들어,사이트의 일부가 아이프레임 내장 위젯으로 사용될 경우widget.js및widget.css또는 이와 유사한 항목만 해당 페이지에서 사용할 수 있습니다. 이러한 파일은 위와 같이 미리 컴파일된 배열에 추가되어야 합니다.

두 번째 옵션은 대부분의 시간을 사용해야하는 것입니다.그리고 하나의 응용 프로그램.파일. 매니페스트는 해당 자산의 맨 위에 기록됩니다.

커피 스크립트에서 다음과 같습니다:

12345

# In application.coffee##= require jquery#= require jquery_ujs#= require_tree .

위의 매니페스트에는 현재 트리의 모든 파일(예:app/assets/javascript/*)이 포함됩니다. require_tree은 디렉터리를 통해 자산을 재귀적으로 컴파일하지 않습니다. 포함할 파일 폴더가 있는 경우 매니페스트에도 해당 폴더를 추가해야 합니다:

1

#= require_tree ./components

또 하나의 매니페스트 지시문은require_self이며,이 지시문은 현재 파일의 자바스크립트를 체인의 해당 지점에 포함하는 데 사용됩니다. 위의require_self은.js파일에 다음과 같이 쓸 수 있습니다:

1234567

// In application.js////= require jquery//= require jquery_ujs//= require_tree .//= require_tree ./components//= require_self

매니페스트는 동일한 기본 형식을 사용하지만 적절한 주석 스타일을 사용합니다:

123456

/** In application.css * *= require reset *= require global *= require layout */

매니페스트에 의해 컴파일된 각 파일에는 고유한 범위가 있으므로 변수 및 믹스인을 활용하려면@import규칙을 사용해야 합니다.

require_tree지시문의 사용에주의하십시오. 즉,브라우저에서 자바스크립트를 평가할 때 필요한 부분을 사용할 수 없는 문제가 발생할 수 있습니다. 이 문제는 적절한jQuery(document).ready()또는window.onload가드를 사용하여 수동으로 순서를 지정하거나01_,02_와 같은 숫자로 파일 앞에 붙이면 피할 수 있습니다:

12345

# application.js# Note that the `.js` isn't needed at the end of the filename.##= require subfolder/library#= require subfolder/depends-on-library

따라서 하위 폴더의 파일을 사용하여 최상위 매니페스트를 단순화할 수 있습니다.

말대꾸와 커피 스크립트,그리고 레일 자산 도우미

나는 말대꾸와 커피 스크립트는 위의 섹션에서 조금 언급 한,하지만 난 아직 그들이 무엇에 갔다하지 않았습니다. 이미 익숙한 경우”레일 자산 도우미”섹션 아래로 건너 뛸 주시기 바랍니다.1765>

말대꾸와 커피 스크립트

말대꾸와 커피 스크립트는 각각 사전 프로세서를 사용하여 구문을 변환 할 수있는 언어입니다. 이 같은 타이프 스크립트 이하,하지만 말대꾸와 커피 스크립트와 같은 여러 가지 다른 전처리 언어는 레일 기본적으로 포함되어 있으며,아마도 가장 인기 있습니다. 나는 이 언어에 광대한 세부사항으로 여기에서 가지 않을 것이다,그래서 정보 더를 위 연결을 체크아웃하십시오.

내 경험에 비추어 볼 때,말대꾸와 커피 스크립트는 많은 구문 설탕(예쁜 코드 기능)을 제공하지만,전처리 단계에서 유효하지 않은 코드에 대한 예외가 발생한다는 사실은이를 사용하도록 보증하기에 충분합니다. 커피 스크립트가 자동으로 파일 당 코드를 래핑하고 따라서 바닐라 자바 스크립트에서보다 쉽게 발생할 수있는 범위 두통을 많이 방지,로컬 변수에var키워드를 추가합니다.

예를 들어,다음 커피 스크립트 코드:

12345

$ -> $('#element').on 'click', -> state = 'clicked' window.state = 'clicked' console.log 'element clicked'

다음 자바스크립트로 변환됩니다:

1234567891011

(function() { $(function() { return $('#element').on('click', function() { var state; state = 'clicked'; window.state = 'clicked'; return console.log('element clicked'); }); });}).call(this);

전처리기가 파일을 처리하면 익명 함수((function() {}).call(this))에서 코드를 자동으로 래핑하고state의 첫 번째 사용에var키워드를 추가합니다. 전역 범위를 사용하려면window.접두사를 지정해야 합니다.

이 커피 스크립트에 더 많은,하지만 자동 범위는 찾기 어려운 버그를 방지 개인적으로 나를 위해 매우 도움이되었습니다.

레일 자산 도우미

레일 프로젝트에서 말대꾸를 사용하여 얻을 수있는 또 다른 훌륭한 기능은 자산 경로 도우미입니다. 말대꾸에서 다른 자산을 참조할 때 다음 구문을 사용하여 적절한 경로를 가져올 수 있습니다:

123

.logo { background-image: image-url("logo.png");}

헬퍼image-path,asset-url및asset-path도 사용할 수 있습니다. -url도우미는 경로를url()으로 래핑합니다.1765>

자산 파이프라인을 사용하면 파일 이름을 접미사로 지정하여 자바스크립트 자바스크립트 자바스크립트 자바스크립트 자바스크립트 자바스크립트 자바스크립트 자바스크립트 자바스크립트 자바스크립트 자바스크립트 자바스크립트 자바스크립트 코드를 평가할 수 있습니다.(예:application.js.erb또는application.scss.erb). 이 기능은 자바 스크립트에 자산 경로를 추가하는 데 유용 할 수 있지만 전체적으로이 기능을 사용하지 않는 것이 좋습니다. 파일에 또 다른 전처리 단계를 추가하여 미리 컴파일하는 데 걸리는 시간을 늘립니다. 또한 나쁜 습관으로 이어질 수 있습니다. 문자열을 번역하는 것과 같이 컴파일 타임에 이해가되지 않는 코드를 추가하려는 유혹을받을 수 있습니다. 이러한 문자열은 컴파일 타임에 만 번역되므로 변환의 전체 목적을 무효화합니다. 자바스크립트 파일을 사용하는 유일한 이유는 가이드에서 설명한 대로asset_path도우미를 사용해야 합니다.

자산 파이프라인 문제점

다음은 레일스 애플리케이션의 자산 개발에 도움이 될 수 있는 문제점 및 가벼운 음식입니다.

• 자바스크립트를 사용할 전역 데이터를 어떻게 추가합니까?
  • 곤 보석은 자바 스크립트가 소비 할 페이지에 전역 범위의 데이터를 삽입하는 데 사용할 수 있습니다. 이 기능은 현재 사용자의 아이디 또는 사이트 설정을 제공하는 것과 같은 작업에 적합합니다.
• 사전 컴파일 배열을 어디에 보강해야합니까?
  • 레일 4 에서는config/initializers/assets.rb에서 배열을 보강하고 레일 3 에서는config/application.rb에서 배열을 보강해야합니다. 자산 사용.또는 응용 프로그램.따라서 환경을 추가하는 경우(아마도staging)새 환경을 위해 특별히 미리 컴파일된 배열을 보강할 필요가 없습니다.
    • 자산.2015 년: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • 신청.2015 년: config.assets.precompile += %w( widget.js widget.css )
• 사전 컴파일 배열을 보강하여 자산을 별도로 미리 컴파일해야 할 때는 언제입니까?
  • 이 작업은 거의 수행되어서는 안됩니다. 대부분의 경우,이 작업을 수행하려는 유일한 이유는 애셋이 나머지 애셋을 원하지 않는 특수 페이지에 단독으로 포함되는 경우입니다. 응용 프로그램을 사용하여.및 응용 프로그램.귀하의 자산에 끌어 명단.
• 레일이 정적 파일을 제공 할 수 있도록해야합니까?
  • 예. 이 12 요소 응용 프로그램 지침을 따르고 미리 컴파일 배열에 파일을 포함 하는 것을 잊은 경우 또는 미리 컴파일 하는 것을 잊은 경우 오류를 방지 합니다.
  • 레일 3 에서config.serve_static_assets = true을 설정하고 레일 4 에서config.serve_static_files = true를 설정합니다.
• 내 자바 스크립트가 잘 작성되었는지 어떻게 보장 할 수 있습니까?
  • 고품질 자바스크립트와 자바스크립트(또는 커피스크립트와 말대꾸)를 작성하는 데는 많은 시간과 경험이 소요될 수 있지만,나에게 큰 도움이 된 한 가지는 린터를 사용하는 것이다. 숭고한 텍스트와 같은 일부 십오에는 린터를 통합하는 플러그인이 있습니다. 나는 개인적으로 승화 패키지를 사용합니다. 만약 당신이 일반-오래 된 자바 스크립트와 씨에스를 작성 하려고,당신은 확실히 린 터를 사용 해야 합니다.
• 미리 컴파일된 자산이 배치된 디렉터리를 변경하려면 어떻게 해야 합니까?
  • config.asset.prefix설정을/static과 같은 다른 디렉터리로 변경할 수 있습니다.
  • 프로덕션 사용을 위해 자식에서 미리 컴파일된 자산을 추적하려면development.rb에서 자산 접두사를 변경합니다.
  • 컨트롤러에 대해/assets경로 네임스페이스를 사용하려면 자산 접두사를 전역으로 변경합니다.
• 고정 자산을 어떻게 제공합니까?자세한 내용은 레일 가이드의 자산 미리 컴파일 섹션을 참조하십시오):

1234567

location ~ ^/assets/ { expires 1y; add_header Cache-Control public; add_header ETag ""; break;}

• 무엇이 명백한가.또는 매니페스트-.제이슨?
  • 매니페스트.또는 매니페스트-.에셋을rake assets:precompile으로 미리 컴파일하면 파일이 자동으로 생성됩니다. 여기에는 앱에서 사용할 파일에 대한 정보가 포함되어 있습니다.
• 자산 파이프라인에 포함해서는 안 되는 파일 유형은 무엇입니까?
  • 일반적으로 큰 파일(비디오,많은 수의 다운로드 등)을 유지하기를 원할 것입니다.)별도의 저장소 또는 클라우드 파일 관리자에서. 그런 다음 파일을 앱에서 참조 할 수 있지만 자식 저장소를 늪지 할 필요는 없습니다.
• 레일 3 자산을 어떻게 더 빨리 컴파일 할 수 있습니까?
  • turbo-sprockets-rails3보석을 사용합니다.
• 내 자산에 캐나다(콘텐츠 전송 네트워크)를 사용할 수 있습니까?
  • 예! 다이제스트,또는 지문,각 자산에 접미사 그들을 잘 작동합니다. 레일스 앱에서 자산을 제공하도록 캐나다를 설정한 다음config.action_controller.asset_host구성을 캐나다에 적합한 도메인(예:config.action_controller.asset_host = 'mycdn.fictional-cdn.com')으로 설정합니다. 환경 변수를 사용하여config.action_controller.asset_host = ENV를 설정하는 것이 좋습니다.

자산 파이프라인을 적절하게 사용하면 성능,복원력 및 코드 청결도 측면에서 애플리케이션의 전반적인 품질을 향상시킬 수 있습니다. 자산 파이프라인의 기능을 사용하면 정적 자산 코딩 및 전달과 관련된 가장 큰 문제 중 일부를 자동으로 극복할 수 있습니다.