12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

gradle-node-plugin 使って Sass をコンパイルしたりすればいいじゃない

Last updated at Posted at 2015-05-27

gradle-node-plugin という神プラグインを知りました。

これ使うと ./gradlew build とかした時に Sass をコンパイルしたり、./gradlew jettyRun でサーバ動かしてる時も Sass が編集されたらコンパイルしたり が割と簡単に書けそうだなと思い、下記のような build.gradle と package.json でやってみました。

実際のコード

build.gradle

plugins {
  id "com.moowork.node" version "0.9"
}

apply plugin: 'com.moowork.node'

// Sass をコンパイルします
task sassCompile(type: NpmTask, dependsOn: 'npm_install') {
  args = ['run', 'sass:build']
}

// Sass ファイルをウォッチして自動コンパイルします
task sassWatchStart(type: NpmTask, dependsOn: 'npm_install') {
  args = ['run', 'sass:watch:start']
}

// Sass ファイルのウォッチを停止します
task sassWatchStop(type: NpmTask) {
  args = ['run', 'sass:watch:stop']
}

processResources.dependsOn sassCompile
jettyRun.dependsOn sassWatchStart
jettyRun.finalizedBy sassWatchStop

package.json

{
  ...
  "scripts": {
    "sass:build": "node-sass src/main/assets/css --output src/main/webapp/static/css",
    "sass:watch": "nodemon --watch src/main/assets/css --ext sass,scss --exec 'npm run sass:build'",
    "sass:watch:start": "forever start -c \"npm run sass:watch\" ./",
    "sass:watch:stop": "forever stop ./"
  },
  ...
  "dependencies": {
    "node-sass": "^3.1.2"
  },
  "devDependencies": {
    "forever": "^0.14.1",
    "nodemon": "^1.3.7"
  }
}

(会社コードからの抜粋なので、タイポあるかも。すみません)

ポイント

sass:watch:start では、forever を使って Sass を監視するプロセスを daemon 化し、gradle の実行を止めないようにしています。そのため、build.gradle で jettyRun.dependsOn sassWatchStart と書いても jettyRun までタスクが止まらずに進んでくれるようになっています。

sass:watch:stop で forever のプロセスを終了するコマンドが書いてあるので、jettyRun.finalizedBy sassWatchStop と書くことで、jettyRun 終了時に Sass 監視プロセスを終了させています。

余談

gradle-compass という、その名の通り compass を gradle から便利に使えるプラグインがあります。これめっちゃ便利!と思ったんだけど、compass gem のインストールに使ってるリポジトリ http://rubygems-proxy.torquebox.org/ が今朝から多分死んでて困ったので、がんばりました。

でも結果的に幅広く応用できそうな対応ができたからよかったかも。browserify とかもこんな感じで行けそうだし、若干夢が広がった感があります。

12
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?