Flywheel×Gitlab×SourceTree×gulpの環境構築と便利なWEBフレームワーク私的まとめ

2019年11月26日

Flywheelの説明

WordPressローカル環境ツール「Local by Flywheel」のインストール方法と使い方

https://nelog.jp/local-by-flywheel-install

Flywheelでサイトを立ち上げた後にやること

WordPressサイトを一つ立ち上げたら、Gitと連携するために以下を実施して下さい。

サイト名>app>publicのpublicフォルダ配下のファイルを全て別の場所に待避する(app直下に移動でOK) 2. publicフォルダにGitをクローンする(後述)
1で待避したファイルをpublic配下に戻し、重複するファイルは移動しないで「スキップ」する
残った待避ファイルを削除する

FlywheelのファイルもGitのクローンしたファイルも復元可能なので、恐れずにいろいろ試して見て下さい！

Gitの説明

Gitは優れたバージョン管理システムで、最近のシステム開発現場ではほぼ必ず使われている、非常に優れたシステムです。

ほとんどが無料で使うことができ、初心者にも使いやすいGUI系ソフトが広く広まっています。

Gitの使い方講座！初心者には「SourceTree」がおすすめ！

https://www.sejuku.net/blog/6111
ソフトを無料でインストールして使うことが出来ます。

GitlabをSource Treeでクローンする方法

https://qiita.com/yama-t/items/304b43ab7abdb18b34c6
Gitプラットフォームの一つであるGitlab内にあるプロジェクトを、GitのGUIソフトSource Treeを使って自分のPCにダウンロードする方法

Bitbucketのリポジトリをローカルにクローンする方法

https://note.com/koushikagawa/n/nc6bedac0746c

Sassとは

Sassは効率よくCSSを書くためのプログラミング言語みたいなものです。
gulp(後述)の環境を構築することで、自動的にコンパイルでき、非常に楽です。

MindBEMdingとは

https://github.com/manabuyasuda/styleguide/blob/master/how-to-bem.md FLOCSSの基本思想となっているMindBEMding(BEM)は開発現場でのCSS記述ルールの基本となっているので理解しておくと良いです。

gulpの説明

gulpとは

https://app.codegrid.net/entry/gulp-1

タスク自動化ツール「gulp」を使って制作時間を短縮しよう

https://www.webcreatorbox.com/tech/gulp

プロジェクトフォルダは
public>wp-content>theme>sax-hack>gulp
です。

package.jsonも既に用意してあるので、node.jsをインストールしたら「手順4」の

$ npm install gulp

を実行してしまってOKです(だったはず…)。

次回からはプロジェクトフォルダに移動後、

$ gulp

で自動的にcssが生成されるようになります。

黒い画面は怖いですが…

cmdやターミナルなどの黒い画面は慣れるまで怖いと思いますが、基幹ファイルを削除しなければ基本壊れることは無いです。
でも、「削除すると壊れるので」注意して操作をしたり、少しずつで良いので知識を身につけていって下さい！

【rm/del,rd】ファイルやディレクトリを削除する～今週のコマンド003
https://magazine.mast.tsukuba.ac.jp/archives/1174

その他

サイトで使っているフレームワークやWordpressテーマについて解説します。

Bootstrap 4

https://getbootstrap.jp/docs/4.2/getting-started/introduction/ とても便利なCSS,Javascriptのフレームワークです。

Fontawesome

https://fontawesome.com/icons?d=gallery&m=free
これはまだ未実装ですが、便利なので今後使っても良いと思っています。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

https://saruwakakun.com/html-css/basic/font-awesome

その他独自ルールなど

WordPressテーマ Thor

https://fit-theme.com/the-thor/

Thor公式マニュアル

https://thor-manual.fit-theme.com/
下にある徹底ガイドの方が画像が多くてイメージしやすいかも

THE THOR（ザ・トール）の使い方マニュアル！徹底ガイド

https://thor-navi.site/