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

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

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

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

 

方法

 

 

  1. まずパソコンにmpmと、gulpを入れます。 下記コマンドを入力し「npm」と、「gulp」がインストールされているか確認ください。
    $ npm -v
    $ gulp -v
    

    ※. 導入していない方は下記記事を参照しインストールしてくださ。
    Gulpでlocalhostサーバーを起動、さらにBrowser-Syncで作業効率化

  2. Druapl8を導入した階層に「gulp-connect」と、便利ツール「Browser-sync」をインストールします。
    $ npm install gulp-connect
    $ npm install browser-sync gulp --save-dev
    
  3. 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']);
    
    });
    
  4. コマンドラインからgulpを起動します。
    $ gulp
    

 

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

 

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。