Grails 3.0.4でCoffeeScript,SASSを使えるようにした

岡山でgroovyやってる人があんまりいないからちょっとやってみるか、というくらいの気持ちでgroovyの勉強を始めようと思い、とりあえずGrailsを使ってみることにしました。といってもまだアプリを作ってないですが、とりあえず素のJavaScriptとCSSは嫌だなぁと思っていたので、CoffeeScriptとSASSを使えるようにしてみました。

groovyとGrailsのインストール

groovyとgrailsはgvmを使ってインストールしました。

まずはgvmのインストール。

curl -s get.gvmtool.net | bash

次に、groovyとgradleとgrailsのインストール。

gvm install groovy
gvm install gradle
gvm install grails

Grailsプロジェクトの作成

次に、grailsプロジェクトを作成してみます。

grails create-app sample

その後、プロジェクトに必要なファイルを入れるために、プロジェクトディレクトリに移動した後、grailsコマンドを打ちます。

cd sample
grails

grailsのコンソールが起動するためにライブラリのダウンロードが走ります。結構時間かかります。

grailsのコンソールでrun-appと打つなどして、grailsを起動させてみましょう。終わったら、Ctrl+Cで終わらせます。

build.gradleの修正

CoffeeScript、SASSを動くようにするためにbuild.gradleを修正します。
Grailsのバージョンが3になって、1,2系のプラグインとの互換性がなくなったみたいです。gradleでインストールする際に、bintrayを使いましょうというふうに書いてありました。なので、mavenのリポジトリにbintrayのurlを追加します。repositoriesブロックを修正します。

repositories {
    mavenLocal()
    maven { url "https://repo.grails.org/grails/core" }
    maven { url "http://dl.bintray.com/bertramlabs/asset-pipeline" }
}

次に、buildscriptブロックを修正します。
coffee-asset-pipelineとsass-asset-pipelineを追加します。

buildscript {
    ext {
        grailsVersion = project.grailsVersion
    }
    repositories {
        mavenLocal()
        maven { url "https://repo.grails.org/grails/core" }
        maven { url "http://dl.bintray.com/bertramlabs/asset-pipeline" }
    }
    dependencies {
        classpath "org.grails:grails-gradle-plugin:$grailsVersion"
        classpath 'com.bertramlabs.plugins:asset-pipeline-gradle:2.1.1'
        classpath 'com.bertramlabs.plugins:coffee-asset-pipeline:2.0.7'
        classpath 'com.bertramlabs.plugins:sass-asset-pipeline:2.3.1'
    }
}

次に、runtimeの記述を追記します。dependenciesブロックを修正します。

dependencies {
    compile "org.springframework.boot:spring-boot-starter-logging"
    compile "org.springframework.boot:spring-boot-starter-actuator"
    compile "org.springframework.boot:spring-boot-autoconfigure"
    compile "org.springframework.boot:spring-boot-starter-tomcat"
    compile "org.grails:grails-dependencies"
    compile "org.grails:grails-web-boot"

    compile "org.grails.plugins:hibernate"
    compile "org.grails.plugins:cache"
    compile "org.hibernate:hibernate-ehcache"
    compile "org.grails.plugins:scaffolding"

    runtime "org.grails.plugins:asset-pipeline"
    runtime 'com.bertramlabs.plugins:sass-asset-pipeline:2.3.1'
    runtime 'com.bertramlabs.plugins:coffee-asset-pipeline:2.0.7'

    testCompile "org.grails:grails-plugin-testing"
    testCompile "org.grails.plugins:geb"

    // Note: It is recommended to update to a more robust driver (Chrome, Firefox etc.)
    testRuntime 'org.seleniumhq.selenium:selenium-htmlunit-driver:2.44.0'

    console "org.grails:grails-console"
}

assetsでコンパイルされるファイルの対象を設定しておきます。基本的にscssファイルは除外し、application.scssのみ対象とします。

assets {
    minifyJs = true
    minifyCss = true
    excludes = ['**/*.scss']
    includes = ['application.scss']
}

とりあえずここまで。

application.js.coffeeとapplication.scssを作成

grails-app/assets/javascripts/application.jsを削除し、application.js.coffeeを作成と、grails-app/assets/stylesheets/application.cssをリネームしapplication.scssにします。

#= require jquery-2.1.3.js
#= require_self
#= require_tree .

# application.jsにあった処理を一応coffeescriptにしておく
$ ->
  $('#spinner').ajaxStart(->
    $(this).fadeIn()
  ).ajaxStop( ->
    $(this).fadeOut()
  )

application.scssはリネームするだけですが、一応載せておきます。

/*
*= require main
*= require mobile
*= require_self
*/

これで終わりです。一応、grails run-appしてみましょう。ちゃんと動けばOKです。

まとめ

ここまでやるんならRailsでいいような気がしてきた…(オィ


タグ Grails, groovy | パーマリンク.

コメント・トラックバック一覧

  1. Pingback: Grails3.0.4で、Bootstrap3のレイアウトでscaffoldできるようにする。その1 | 自転車で通勤しましょ♪ブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です