状況
- PHPのプロジェクトだが、Gulpを使ってCSSの圧縮をしている
- 開発環境はDockerで構築している
- コンテナのオーケストレーションにはDocker Composeを使っている
ディレクトリ構成
多少省略しているが、こんな感じ。
app
|-- index.php
|-- gulpfile.js <-- これ
|-- docker-compose.yml
`-- docker
|-- db
| |-- Dockerfile
| `-- my.cnf
|-- nodejs
| `-- Dockerfile <-- これ
`-- web
`-- Dockerfile
やったこと
アプリ側はこんな感じ
index.php
<html>
<head>
<link type="text/css" rel="stylesheet" href="/assets/css/style.min.css">
</head>
</html>
下記のgulpfile.jsを作成
簡略化しているので動かないかも
gulpfile.js
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
gulp.task('watch', function() {
return gulp.src('./**/*.scss')
.pipe($.plumber())
.pipe($.sass())
.pipe($.pleeease({
autoprefixer: {
browsers: ['last 2 versions', 'android >= 4', 'ios >= 8']
},
minifier: true,
}))
.pipe(gulp.dest('public/assets/css'));
});
下記のDockerfileを作成
docker/nodejs/Dockerfile
FROM node:latest
RUN npm install -g gulp
WORKDIR /app
CMD gulp watch
docker-compose.ymlに追記
docker-compose.yml
web:
build: ./docker/web
links:
- db
volumes:
- ./:/app
ports:
- "8000:8000"
db:
build: ./docker/db
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: hoge
MYSQL_USER: hoge
MYSQL_PASSWORD: hoge
nodejs:
build: ./docker/nodejs
volumes:
- ./:/app
volumesで、gulpからファイルが操作できるようにしている。
使い方
docker-compose up -d
するだけで、gulp watchが走る。
初回起動時だけ、node_modulesを入れるために
docker-compose run nodejs npm install
をする必要があるかもしれない。