Sass ビルド環境構築のメモ

osx で Sass のビルド環境を作る際のメモ.

1. Node.js のインストール
2. 作業用フォルダの作成 (package.jsonなど)
3. Gulp のインストール
4. Sass 環境に必要なパッケージをインストール
5. gulp でビルドする
$ sudo npm install gulp -g  // gulp インストール
$ sudo npm install          // Sass 環境に必要なパッケージをインストール

補足:
Atom に EditorConfig プラグインを適用するとチームでコードスタイルを統一することができる.

セットアップ時に以下のエラーが出力されてビルド出来なかったので,以下のコマンドで対処した.
permission denied, mkdir /node_modules/node-sass/build’

$ npm config set user 0
$ npm config set unsafe-perm true

参考: Ubuntuにnode-sassを入れようとしたらつまづいた話
参考: 『現場のプロが本気で教える HTML/CSSデザイン講義』のサンプルデータ
参考: 「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」の公式サポートサイト

PhpStorm の日本語ヘルプを読んでみた件

久しぶりに PhpStorm を使用していて日本語ヘルプの存在を知りました.
英語が得意ではないので,必要最低限の箇所しか読んでいなかったのですが,これを機会にザーと読み流して気になるところをメモしておきます.

▼ 気になる項目

VimエディターとしてPhpStormを使用する
Toolbox Appを使ってPhpStormを管理する

JetBrains ToolboxアプリはJetBrains製品をインストールするための推奨ツールです。
早期アクセス・プログラム(英語)(EAP)リリースを含むさまざまな製品または同じ製品の複数のバージョンをインストールおよび保守し、必要に応じて更新およびロールバックし、ツールを簡単に削除するために使用します。

PhpStormワークショップ資料
コードとパスの自動補完
ソースコードナビゲーション
PhpStormのキーボードショートカットをマスターする

▼ キーボード ショートカット

どこでも検索 PhpStormウィンドウの右上隅にある虫めがねアイコン search_everywhere をクリックするか、Shift を2回押します
基本補完 ⌃Space
宣言に移動 ⌘B
実装に移動 ⌥⌘B
エラーまたは警告間を移動する F2 または ⇧F2
ナビゲーションにフォーカスを移動する ⌘↑
ウィンドウからエディターにフォーカスを切り替える

PhpStorm で JavaScript をデバッグする方法

PhpStorm で JavaScript のデバッグができるとは知っていたが試したことがなかった.
やってみたらとても簡単だったので,設定ポイントをメモしておきます.

▼ 設定ポイント

– Run/Debug Configurations([Run] – [Edit Configurations…] を選択)に JavaScript デバッグ設定ができているか?

JavaScript デバッグ設定ができていれば,エディタの右上のプルダウンリストで選択できる.
ブレークポイントを指定して,デバッグ ボタンを押下すると,ブラウザが起動し,指定行でブレークすることができる.

CakePHPをセットアップするために composer を使用したら遅すぎた件

数年ぶりに composer コマンドを使用したら以下のエラーが出力された.
以前はこのようなエラーが出力されたことがなかったので,手順を再確認したが問題が見つからず困っていたところ,どうやら composer のレスポンスが遅い時があるとのこと.
有志の方がサーバを立てているとのことだったので,そちらを利用させてもらうことでエラーを回避することができた.

▼ エラー内容

The "https://repo.packagist.org/packages.json" file could not be downloaded: failed to open stream: Operation timed out
Retrying with degraded mode, check https://getcomposer.org/doc/articles/troubleshooting.md#degraded-mode for more info

▼ PHPライブラリ リポジトリ https://packagist.org のミラーサイト

https://packagist.jp

// enableにする場合
$ composer config -g repos.packagist composer https://packagist.jp

// disableにする場合
$ composer config -g --unset repos.packagist

CakePHPをインストールする方法

ひさしぶりにCakePHPをインストールしたので,手順をメモしておきます.

1. osxにMAMPをインストール

XAMPPを使用する方法もあるが,私にはMAMPを使用した方が簡単だった.
mod_rewrite.soなど使用できる状態か?httpd.confファイルの設定を確認しておく.

2. PHP intlが有効化確認する

php -i | grep intl

有効でないなら,php.iniの設定を確認する.

extension=php_intl.so

3. Composerをインストール

curl -sS https://getcomposer.org/installer | php

パスが通った場所に移動しておく

mv composer.phar /usr/local/bin/composer

コマンドとして認識できているかテスト

composer

4. CakePHPをセットアップする

composer create-project --prefer-dist cakephp/app cake3アプリ名