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

Phalconでの開発環境を作る(その2)

More than 3 years have passed since last update.

今回はGruntをインストールして、GruntタスクからPHPビルトインサーバの実行、ファイルの変更監視を行い、Livereloadしてみます。

1.npmのインストール

npmはnode.jsでできたパッケージマネージャです。
Gruntはnpmからインストールするのでnode.jsをインストールしましょう。
インストール方法については過去エントリを参照ください。
http://qiita.com/ya-sasaki/items/46c85a05e77fef5e31c0

また、過去エントリの記載に従い、以下のパッケージについてもインストールしましょう。
grunt-cli,coffee-script,stylus,yeoman,bower

ビルトインサーバの起動にはgrunt-phpも必要になります。

$ npm install grunt-php

2.Gruntの雛形をインストール

イチからpackageをインストールするのは手間がかかるのでYeomanで雛形を作ります。
(--save-devはパッケージの有効範囲をプロジェクト内にするためです)

$ cd c:\htdocs\phalcon-sample
$ npm install generator-jadestyl --save-dev
$ yo jadestyl

jadestylを使ってjade,coffee,stylusをGruntでビルドする環境ができました。

3.Gruntfile.jsの修正

修正する箇所というか、以下のようにしました。

module.exports = function(grunt) {
  var config = {
    jade: { // jadeのcompile task
      src: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: '**/*.jade',
          dest: 'app/views/',
          ext: '.volt'
        }],
        options: {
          pretty: true
        }
      }
    },
    stylus: { // stylusのcompile task
      src: {
        files: [{
          expand: true,
          cwd: 'src/styles/',
          src: '**/*.styl',
          dest: 'public/css/',
          ext: '.css'
        }],
        options: {
          compress: false
        }
      }
    },
    coffee: { // coffeeのcompile task
      src: {
        files: [{
          expand: true,
          cwd: 'src/scripts/',
          src: '**/*.coffee',
          dest: 'public/js/',
          ext: '.js'
        }]
      }
    },
    php: { // PHPビルトインサーバ
        options: {
            port: 8000,
            base: 'public/'
        },
        web: {
            options: {
                open: true
            }
        }
    },
    watch: { // 監視タスク
      jade: {
        files: 'src/*.jade',
        tasks: 'jade:src'
      },
      stylus: {
        files: 'src/styles/*.styl',
        tasks: 'stylus:src'
      },
      coffee: {
        files: '**/*.coffee',
        tasks: 'coffee:src'
      },
      web: {
          options: {
              livereload: true
          },
          files: [ // 変更監視
              'app/**/*',
              '!app/cache/**/*',
              'public/**/*'
          ]
      }
    },
    concurrent: { // タスクのグループ
      compile: {
        tasks: [
          'jade', 'stylus', 'coffee'
        ],
        options: {
          logConcurrentOutput: false
        }
      },
      run: {
        tasks: [
          'php:web',
          'watch:jade', 'watch:stylus', 'watch:coffee', 'watch:web'
        ],
        options: {
          logConcurrentOutput: true
        }
      }
    }
  };

  grunt.initConfig(config);

  // Load all Grunt tasks
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  grunt.registerTask('default', ['concurrent:compile', 'concurrent:run']);
  grunt.registerTask('selenium', []);
  grunt.registerTask('test', []);
  grunt.registerTask('tdd', []);
};

デフォルトタスクはJade,Coffee,StylusのコンパイルとWebサーバの起動(live reload)。
selenium, test, tddは後から挑戦してみます。

gruntを実行しましょう。

$ grunt
Running "concurrent:compile" (concurrent) task

Running "coffee:src" (coffee) task
File public/js/coffee-sample.js created.

Done, without errors.

Running "stylus:src" (stylus) task
File public\css\main.css created.

Done, without errors.

Running "jade:src" (jade) task
File "app/views/index.volt" created.

Done, without errors.

Running "concurrent:run" (concurrent) task
Running "watch:stylus" (watch) task
Waiting...Running "watch:jade" (watch) task
Waiting...Running "php:web" (php) task
Running "watch:coffee" (watch) task
Waiting...Running "watch:web" (watch) task
Waiting...PHP 5.5.19 Development Server started at Thu Apr 16 13:14:27 2015
Listening on http://127.0.0.1:8000
Document root is C:\htdocs\phalcon-sample\public
Press Ctrl-C to quit.
[Thu Apr 16 13:14:27 2015] 127.0.0.1:54482 [200]: /

Done, without errors.

gruntを実行するとdefaultに定義されたlivereload開発のタスクが実行されます。
Phalconのテンプレートはvoltなので、jadeから.voltへコンパイル、.voltも監視対象でlivereloadしますが、jadeの構文がvoltの構文と相性がよくなかったりした場合は、jadeをやめて大人しくEditorからemmetします。

最初からjade-phalconを使わないのは、せっかくPhalconExtension(2系だとZephir実装)でvoltテンプレートエンジンが提供されているのに、PHPのテンプレートパーサ使う必要もないでしょ。と思ったので、、、

4.Livereloadプラグインの導入(GoogleChrome

ここでちょっと嵌ったのですが、ブラウザをLivereloadするにはブラウザ側に拡張プラグインいれないといけないようです。
私はGoogleChromeなのでChromeExtensionからインストールしました。
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

これでPhalconのLivereload開発が可能になりました。
しばらくMockアプリを作ることになっているのでテストタスクのエントリは5月ぐらいになると思います。

Why do not you register as a user and use Qiita more conveniently?
  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
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