Rails4로 Knockout & Bootstrap & Coffee & SASS & Haml 환경을 구축

11185 단어 hamlRailsCoffeeScriptSassknockoutjs
프런트 엔드의 약간의 움직임을 Knockout.js 와 CoffeeScirpt 로 쓰면서, 디자인은 Twitter Bootstrap 와 Font Awersome (아이콘)로 최소한의 것을 확보해, 마크업은 Haml (HTML 의 대체)와 SASS (CSS 의 대체) 로 기술하는 구성입니다.

Knockout.js를 사용하는 이유는 View에서 얇게 사용하기에 적합하기 때문입니다.

개인적으로 여러 번 반복해서 만들 것 같은 환경이므로, 순서를 여기에 남깁니다.
(덧붙여서 CoffeeScript와 SASS는 Rails4에서 표준이므로 특별히 아무것도하지 않습니다.)

또한이 절차에서 만든 Seed는 GitHub에 넣었습니다. 좋으면 사용하십시오.
⇒ htps : // 기주 b. 코 m/h 쿠스/K의 c 이렇게 t. js_i ls_see d

전제


  • OS 버전: Mac OS X 10.9.5 (Mavericks)
  • Ruby 버전: 2.1.2
  • Rails 버전: 4.1.1

    • 환경 구축 절차



    ① Rails 프로젝트 작성


    $ bundle exec rails new hoge_app --skip-bundle -T
  • 테스트는 Rspec을 사용하고 싶기 때문에 -T를 지정.
  • 데이타베이스는 디폴트의 sqlite3 를 채용.

    • ② Gemfile 편집



    rails_angular_app/Gemfile
    #gem 'turbolinks'

gem 'knockoutjs-rails'
gem 'bootstrap-sass'
gem 'font-awesome-sass'
gem 'haml-rails'
gem 'erb2haml', group: :development

gem 'better_errors', group: [:development, :test]
gem 'binding_of_caller', group: [:development, :test]
gem 'brakeman', group: :development
gem 'rails_best_practices', group: :development
gem 'pry-rails', group: [:development, :test]
gem 'rspec', group: [:development, :test]
gem 'rspec-rails', group: [:development, :test]
gem 'factory_girl_rails', group: [:development, :test]
gem 'rubocop', group: :development
gem 'rubocop-checkstyle_formatter', group: :development

  • turbolinks 는 Knockout.js 와 궁합이 나쁘기 때문에 제거한다.
  • 다음에 사용할 것 같은 gem 카운티도 추가.
  • gem의 버전은 고정하는 것이 좋을지도.

    • ③ Bundler로 gem 설치


    $ cd hoge_app
$ bundle install --path vendor/bundle

  • 설치가 끝나면 일단 여기서 동작 확인. 브라우저로 http://127.0.0.1:3000 에 액세스 해, 친숙한 화면이 표시되면 OK.
    $ cd hoge_app
$ ./bin/rails s

    • ④ Spring 활성화


    $ cd hoge_app
$ bundle exec spring binstub --all

    ⑤ Haml 관련



    기존 .erb 파일을 .haml 파일로 변환.
    $ cd hoge_app
$ ./bin/rake haml:replace_erbs

    ⑥ Knockout.js 관련


  • app/assets/javascripts/application.js 수정.

    app/assets/javascripts/application.js
    //= require knockout ←この行を追記
//= require turbolinks ←この行を削除


  • ` app/views/layouts/application.html.haml 수정.

    app/views/layouts/application.html.haml
    - = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
- = javascript_include_tag 'application', 'data-turbolinks-track' => true
+ = stylesheet_link_tag    'application', media: 'all'
+ = javascript_include_tag 'application'

    turbolinks가 비활성화되었습니다.


    • ⑦ Twitter Bootstrap & Font Awesome 관련


  • app/assets/stylesheets/application.css.scss 를 새로 작성하고 편집.
    $ touch app/assets/stylesheets/application.css.scss

    app/assets/stylesheets/application.css.scss
    @import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

    행의 순서를 바꾸면 움직이지 않으므로 주의!


  • 기존 app/assets/stylesheets/application.css 삭제.
    $ rm app/assets/stylesheets/application.css
  • app/assets/javascripts/application.js 수정.

    app/assets/javascripts/application.js
    //= require bootstrap-sprockets ←この行を追記


    • 이상으로 환경 구축은 완료.

    덧붙여서 Git 관리에서 제외하는 것은 다음과 같습니다.

    .gitigunore
    /vendor/bundle
/.idea ← IDE に RubyMine を使っている場合

    참고: 동작 확인 방법



    ① 우선 적당히 Scaffold


    $ ./bin/rails g scaffold person name:string age:integer memo:text

    $ ./bin/rake db:create（もし作成されていない場合）
$ ./bin/rake db:migrate

    ② Bootstrap & Font Awesome의 동작 확인



  • 공통 페이지 레이아웃을 수정.

    app/views/layouts/application.html.haml
    !!!
%html
  %head
    %title HogeApp
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
    = csrf_meta_tags
  %body
    %nav.navbar.navbar-default{role: "navigation"}
      .container-fluid
        .navbar-header
          %a.navbar-brand{href: "#"}
            %i.fa.fa-home
    .container
      = yield


  • 표시를 확인.
    $ ./bin/rails s

    브라우저에서 http://127.0.0.1:3000/people로 이동합니다.



    • ③ Knockout.js의 동작 확인



    보기



    app/views/people/index.html.haml
    〜

#ItemView
  %p
    ほげほげ：
    %input{"data-bind" => "value: hoge, valueUpdate: 'afterkeydown'"}
  %p
    %span{"data-bind" => "text: hoge"}

  :coffee
    $ ->
      ko.applyBindings new HOGEAPP_PEOPLE.ItemViewModel(), $("#ItemView")[0]

    ViewModel



    app/assets/javascripts/people.js.coffee
    $ ->
  HOGEAPP_PEOPLE = window.HOGEAPP_PEOPLE = window.HOGEAPP_PEOPLE ? {}

  HOGEAPP_PEOPLE.ItemViewModel = () ->
    @hoge = ko.observable()
    return

  return

    다음과 같이 데이터 바인딩이 움직이면 OK.



    ~이상~
    Atom에 정적 코드 분석을 도입하는 단계
    tmlib.js에서 웹 글꼴을 사용해보십시오!

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage