私はPhpStormで開発をしていますが、「File Watcher」という機能を使っています。

ファイルを変更したらSCSSやWebPack等にコマンドを送ってくれる便利機能なのですが、先日ローカルマシンをアップデートしたからかエラーが出てくるようになりました。

そこで各ライブラリ群をDockerに移し、PhpStormのFile Watcherと連携しました。

Dockerfile作成

SCSSとWebPackが入っているDockerコンテナを作成します。私は古いWebPackを使っているので、このあたりはプロジェクト毎にバージョンを合わせたほうが良いですね。

####################
FROM alpine:3.10
RUN apk update && apk upgrade --update-cache && apk add --no-cache nodejs npm \
####################
# SASS＆WebPackインストール
#（npm configを設定しないとSASSでエラー）
####################
&& npm config set user 0 \
&& npm config set unsafe-perm true \
&& npm i -g node-sass@4.14.1 \
####################
# WebPackインストール(globalと/watcher内）
# -g がついたwebpackは直接叩く用。ついてないwebpackはjsからrequireする用です。
# (loader系はhttpdocsの親階層じゃないとエラーになるしNODE_PATH設定面倒なので)
####################
&& npm i -g webpack@1.15.0 \
&& mkdir /watcher && cd /watcher \
&& npm i webpack@1.15.0 \
&& npm i bower-webpack-plugin@0.1.9 \
&& npm i script-loader@0.6.1 \
&& npm i exports-loader@0.6.2 \

SCSS(File Watcher)設定

Program

docker

Arguments

run -i –rm -w=/watcher$FileDir$ -v $ProjectFileDir$:/watcher$ProjectFileDir$ phpstorm-file-watcher:builded-alpine3.10 node-sass –output-style compressed $FileName$ $FileNameWithoutExtension$.min.css

output paths to refresh

$FileNameWithoutExtension$.min.css

Working directory

$FileDir$

Environment Variables

なし

WebPack(File Watcher)設定

Program

docker

Arguments：run

run -i –rm -w=/watcher$FileDir$ -v $ProjectFileDir$:/watcher$ProjectFileDir$ phpstorm-file-watcher:builded-alpine3.10 webpack $FileName$ $FileNameWithoutExtension$.min.js

output paths to refresh

$FileNameWithoutExtension$.min.js

Working directory

$FileDir$

Environment Variables

なし