레일즈 3.1부터 도입한 Sprockets 루비라이브러리

레일즈 3.1부터는 3.0에서는 볼 수 없었던 특이한 기능을 엿볼 수 있다.

3.1부터는 모든 javascript 파일과 모든 stylesheet 파일들을 각각 application.js와 application.css 두개의 파일로 합쳐서 렌더링하여 최종 유저들에게 보내는 html 파일에 삽입해 준다. 이렇게 다수의 파일을 하나로 합치는 기능은 Sprockets라는 루비라이브러리를 이용하여 가능하게 한다.

application.js 파일의 내용은 다음과 같다.

// FIXME: Tell people that this is a manifest file, real code should go into discrete files
// FIXME: Tell people how Sprockets and CoffeeScript works
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui-1.8.12.custom.min
//= require_tree .

//= 다음에 포함할 자바스크립트 파일을 들을 나열해 주어 최종적으로는 application.js 파일에 하나로 합쳐지게 되는 것이다.
3.0에서는 public 디렉토리에 있던 javascripts와 stylesheets, 그리고 images 디렉토리가 3.1에서는 app/assets/ 디렉토리로 이동하였다.
app/assests/javascripts/applcation.js 가 존재하게 되고 이 자바스크립 파일에 삽입되는 파일은 같은 디렉토리에 두면 된다.

3.1의 또다른 특징은 nesting 구조가 가능한 stylesheet 파일구조를 도입했다는 것이다. Sass라고 하는 것으로 확장자가 .scss 이다.
디폴트로 app/assets/stylesheets/application.css가 생성되고, 새로운 컨트롤러가 생성될 때마다, 동일이름의 .scss 파일에 여기에 생성된다.
3.1에서는 기본적으로 sass 젬이 설치하므로 .scss파일을 .css파일로 컴파일해서 sprockets에 의해서 application.css파일로 합쳐저서 html에 삽입되는 것이다.

글쓴이: 최효성

외과전문의,웹프로그래밍,컴퓨터 일러스트레이션 / Surgeon, Medical Illustration, Web Programmer

2 thoughts on “레일즈 3.1부터 도입한 Sprockets 루비라이브러리”

  1. 레일즈 3.1 beta1에서는 Sprockets가 javascript 뿐만 아니라 stylesheet 파일도 merging 해 준다.
    추가되는 css 파일을 app/assets/stylesheets/ 디렉토리에 두면 자동으로 application.css 파일로 자동으로 머지된다.
    거참 일일이 css 파일을 html 파일에 추가해 줄 필요가 없어졌다.

    그러나, 특정 파일에만 css 파일을 삽일하고 싶을 때는 어떻하나?

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중