Help us understand the problem. What is going on with this article?

docker-composeを使いつつgulpでブラウザを自動更新する

More than 1 year has passed since last update.

PHPを使いつつSCSSを使いたい場面があり、作業効率を確保する為にDockerとgulpを同時に使用する方法を選びました。
もっと楽に出来る方法がありそうですが、さくっと環境構築を終わらせたかったので自分の知っている方法だけで終わらせました。
※MAMPを使っている方は、記事に記載している Dockerdocker-compose のインストールと使用は不要です。

叶えたいこと

  • PHPを使いつつSCSSの自動コンパイルを行いたい。(ApacheとNode.jsを同時に使用したい。)
  • 作業ファイルを保存したらブラウザを自動更新したい。(手動でリロードする手間を省きたい。)

環境

  • MacOS
  • npmのバージョン・・・6.4.1
  • Node.jsのバージョン・・・10.6.0
  • gulpのバージョン・・・4.0.0

前提

以下がインストール済みであることを前提としています。

  • Docker
  • docker-compose
  • Node.js
  • npm
  • gulp

ディレクトリ構造

作業ディレクトリ             
├── gulpfile.js
├── htdocs ・・・「localhost:8080」で見るディレクトリ
├── node_modules
├── package.json
├── src ・・・作業ファイルを入れるディレクトリ。gulpで更新後のファイルをhtdocsに入れる。
└── yarn.lock

設定ファイルの内容

docker-compose.yml
version: '3'

services:
  apache:
    image: php:7-apache
    volumes:
      - $PWD:/var/www/html
    ports:
      - 8080:80
gulpfile.js
const gulp = require('gulp');
const watch = require('gulp-watch');
const browserSync = require('browser-sync').create();
const runSequence = require('gulp4-run-sequence');
const DEST_DIR = './htdocs/';

gulp.task('browser-sync', function(){
    browserSync.init({
    proxy: 'localhost:8080' // ←docker-composeで指定したport
    });
});

gulp.task('bs-reload', function(){
    browserSync.reload();
});

gulp.task('hoge', function() {
    return gulp.src(['src/hogehoge/**/*.hoge'])
    .pipe(gulp.dest(DEST_DIR))
});

gulp.task('default', gulp.series(
  gulp.parallel('browser-sync', 'hoge', function() {
    watch([/*作業対象のファイル*/], function() {
        return runSequence(
            'hoge',
            'bs-reload'
        );
    });
  })
));

hoge は任意で設定
※途中の設定は諸々省略して記載しています。

使い方

  • 作業ディレクトリのルートで npm i を実行し、必要なパッケージをダウンロード
  • htdocs に移動し、 docker-compose up -d を実行し、ダウンロードが完了したら docker-compose start を実行
  • 作業ルートに戻りgulpコマンドを実行し、ローカルサーバーを起動する

※ ローカルサーバー起動後は localhost:8080 ではなく localhost:3000 で表示されます。(port3000が使用済みなら3001)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした