自己満足なBLOG

投稿者: nori

  • Google Developersにて(5)

    > MAMPのApacheのルートフォルダをappフォルダやdistフォルダにすれば良いのか？
    なんか違う気がするな。モヤっと！

    ということで、続き。

    browserSyncは、PHPには対応していないので、PHPファイルが変更されたら、Proxy経由でMAMPのページを表示するように設定すればいいらしい。

    で、Web starter kitの”gulpfile.js”を以下のように編集。

    // Watch files for changes & reload
    gulp.task(‘serve’, [‘styles’], function () {
      browserSync({
        notify: false,
        // Customize the BrowserSync console logging prefix
        logPrefix: ‘WSK’,
        // Run as an https by uncommenting ‘https: true’
        // Note: this uses an unsigned certificate which on first access
        //       will present a certificate warning in the browser.
        // https: true,
        //server: [‘.tmp’, ‘app’],
        // PHPのページに対応するため、Proxyの設定を行う
        proxy: “localhost:8888”,
        // external 指定すると、実行時のURLが外部IPアドレスで開く
        //external
      });
      gulp.watch([‘app/**/*.html’], reload);
      gulp.watch([‘app/styles/**/*.{scss,css}’], [‘styles’, reload]);
      gulp.watch([‘app/scripts/**/*.js’], [‘jshint’]);
      gulp.watch([‘app/images/**/*’], reload);
      gulp.watch([‘app/**/*.php’], reload);});
    $ gulp serveでサーバ起動。
    http://localhost:3000/basic.php
    とかのURLを開いてみる。
    basic.phpを編集して保存すれば、自動的に更新される。やった！！

    でも、index.htmlのcssが読み込まれない？
    .tmpフォルダが必要なの？

  • ありがとうございます。 注文が確定されました。

  • Google Developersにて(4)

    インストールが終わって、フォルダ構成を調べてみる。

    「app」開発用フォルダ
    index.html, basic.htmlなどが入っており、開発を行う場所。
    編集しながら次のURLで確認。
    http://localhost:3000/
    「dist」発行用フォルダ

    gulp serve:distによって処理された最終的なソースが入る場所。
    次のURLで最終的な確認。
    http://localhost:3001/
    （？？？ポート3001？あれ？どこから？と思ったら、ポートが使用中の場合、自動で次のポートが使用されるらしい。）

    じゃ、PHPには対応できるの？
    とりあえず、MAMPをインストール。
    MAMPはApache, MySQL, PHPなどの環境が一気にインストールできるっていう代物。
    次のサイトからダウンロードしましょう。
    https://www.mamp.info/
    有料のMAMP PROもデフォルトだと一緒に入るけど、インストール時にカスタマイズでチェックを外せば入らない。入れてしまってもUninstallerが付いてるからすかさずアンストールする。
    以下のURLでPHPを使ったサイトが閲覧可能になる。
    http://localhost:8888/
    MAMPのApacheのルートフォルダをappフォルダやdistフォルダにすれば良いのか？
    なんか違う気がするな。モヤっと！
  • Google Developersにて(3)

    Google Developersにて(3)

    Web Starter Kit のセットアップ

    Web Starter Kit は NodeJS、NPM、Sassに依存しているらしい。

    まずは、NodeJS と NPMをインストール。
    node -v
    で、入っているか調べて、入っていなかったら、次のページで緑色のボタンを押してね。
    Node.js
    https://nodejs.org/
    NPMは、Node.jsと一緒に自動的にインストールされるみたいです。

    続いて、Sassをインストール。
    え？NPMを入れたら、使えるの？

    本命のWeb Starter Kitをインストール。

    まだベータ版なのね。
    白いボタンをクリックしたら最新のzipファイル(web-starter-kit-X.X.X.zip)をダウンロード。
    解凍してから次のコマンドでインストール。
    $ cd web-starter-kit
    $ npm install
    $ npm install gulp -g
    ここで、エラー発生。
    再度sudoを付けて実行する。
    $ sudo npm install gulp -g

    で、何のことやら分からんうちにインストールが終わったようなので、次の魔法のコマンドを打ち込むと、

    $ gulp serve

    http://localhost:3000/

    いきなりchromeが勝手に動き出して、ページが表示されました。

    ？？？
    何でしょう？この何をしているのかの分からなさ。

    LAMPを入れたり、MAMPを入れたり、何だかんだサーバーを設定したりする作業を含んだ便利な環境を入れられたってことですか？

    詳しくは、また明日にでも調べましょう。

  • Google Developersにて(2)

    Build Your Site サイトを作ろう
    人気のあるbuild processは、Gulp と Grunt らしい。
    でも、build processって何ですか？全く分かりません。
    どちらも使ったことがなければ、Gulpを使いましょう。なぜなら、Web Starter Kitを使って同じように進んでいけるから。
    ということで、Web Starter Kit ではじめようを開いて、進めましょう。嬉しい事に日本語。だと思ったら、出だし部分だけじゃん！！
    で、それぞれを知るためには、それぞれのサイトの次のページを見てください。こちらは英語。

    Grunt Getting Started
    Gulp Getting Started

    道は長いな。