Drupal8ローカル環境にgulpオートリロードを組み合わせる方法

2022年4月28日 20:34 更新｜2015年12月22日 17:01 公開

今回の記事は前回作成したDrupal8のローカル環境にgulpのオートリロードを組み合わせ、開発効率をあげるための紹介です。
前回の記事：Drupal8 をローカル環境に構築する（Acquia Dev Desktop 2）

gulpのオートリロードが何か分からない方はこちらの動画を参照ください。

今回はAcquia Dev Desktop2と、gulpの組み合わせですが、ローカル環境はXAMMPでも、MAMPでも方法は同じです。

「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

詳細はこちら

方法

まずパソコンにmpmと、gulpを入れます。下記コマンドを入力し「npm」と、「gulp」がインストールされているか確認ください。
```
$ npm -v
$ gulp -v
```
※. 導入していない方は下記記事を参照しインストールしてくださ。
Gulpでlocalhostサーバーを起動、さらにBrowser-Syncで作業効率化
Druapl8を導入した階層に「gulp-connect」と、便利ツール「Browser-sync」をインストールします。
```
$ npm install gulp-connect
$ npm install browser-sync gulp --save-dev
```

Drupal8を導入した階層に gulpfile.jsを作成します。
gulpfile.jsに下記コードを入力します。「proxy: 」に、ローカルアドレスを入力します。
gulp.watch(" 対象先 *", ['bs-reload']);

var gulp = require('gulp');
// browser Sync
var browserSync = require('browser-sync');

// Static server
gulp.task('browser-sync', function() {
        browserSync.init({
        // ここにローカルホストのアドレスを入力
        proxy: "http://PROJECTNAME.dd:8083/"
        });
});

gulp.task('default', ['browser-sync']);

// Reload all Browsers
gulp.task('bs-reload', function () {
    browserSync.reload();
});

// Watch scss AND html files, doing different things with each.
gulp.task('default', ['browser-sync'], function () {
    gulp.watch("themes/*", ['bs-reload']);

});

コマンドラインからgulpを起動します。
```
$ gulp
```

「gulp」とコマンドラインから入力するとブラウザが起動します。gulp.watchで指定した階層以下のファイルが変更されると、ブラウザ画面が自動でリロードされます。