[Rails] Rails5でES6 + Sass + Slimが使える環境を整える

※ 2017/09/23 追記
Rails5.1からwebpacker推奨になり、
sprockets-commonerは非推奨となっています。

Gem

gem 'slim-rails'
gem 'sprockets-commoner'
gem 'sass-globbing'
gem 'autoprefixer-rails'

gem入れるだけのやつが多い。
bundle install後は再起動したほうがいいかも。

• slim-rails

• viewをslimで書ける

• sprockets-commoner

• es6&npmが使えるようになる

• sass-globbing

• sassでワイルドカードが使える

• autoprefixer-rails

• ベンダープレフィックス補完

sprockets-commonnerの設定

※ 2017/02/21追記

このファイルなしでもRAILS_ENV="development"なら動いたが、RAILS_ENV="production"だと動かない現象が起こったので追記

config/initializers/sprockets_commoner.rb

Rails.application.config.assets.configure do |env|
  Sprockets::Commoner::Processor.configure(env,
    include: ['node_modules', 'app/assets/javascripts'],
    exclude: ['vendor/bundle', 'vendor/assets'],
    babel_exclude: [/node_modules/, 'vendor/assets']
  )
end

「babelするのは app/assets/javascripts以下だけ」という指定をしている

babelの下準備

必要なnpmをインストール

yarn add babel-core babel-preset-es2015 babel-preset-stage-0

もしくは

npm install babel-core babel-preset-es2015 babel-preset-stage-0

.babelrcファイルを新規作成

..babelrc

{
  "presets": [
      "es2015",
      "stage-0"
  ]
}

application.css周辺

ファイルをまたぐmixinや変数が使えないのが不便なので
cssのエントリポイントはcss→sassにする

mv application.css application.css.scss

app/assets/stylesheets/application.css.scss

@import "./modules/**/*";

sass-globbingを使うとワイルドカード指定ができて便利

application.js周辺

turbolinksはOFFにするのが無難

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks  # これを消す
//= require_tree . # これも消す

app/views/layouts/application.html.slim

= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

'data-turbolinks-track': 'reload' を消す

coffeeとsassファイルが自動生成されないようにする

config/application.rb

    config.generators do |g|
      g.stylesheets false
      g.javascripts false
    end