SCSSでビジュアルデザインを見ながらコードを書くための環境構築 #7

ryamakuchi · 2018-08-09T16:01:26Z

scssでスタンダードレイアウトをコーディングしていくための、環境構築。

完了条件

my-standard-layout は削除されずに残されていること
- 学んだことをコメントで残したりしているため
スタイルを SCSS で書いていけること
SCSS を CSS にコンパイルできること
SCSS を編集して保存すると、自動で CSS にコンパイルが実行されること
SCSS や HTML を編集して保存すると、自動でブラウザがリロードされること
できるだけシンプルな構成で、index.html や scss がまっさらな状態になっていること

inouetakuya

みたよー！いいじゃん！:+1:

いくつかコメントしたので確認してくださいー 😄

inouetakuya · 2018-08-09T20:23:56Z

.gitignore

+yarn-error.log
+src/css/


これを ignore するのはあくまで my-standard-layout-scss 配下の話なので、ここに書くのではなく、my-standard-layout-scss/.gitignore に書くのが良さそうです。

合わせて、.gitignore を復習しておきましょう。

my-standard-layout-scss/.gitignore に

src/css/ と書いたときと

/src/css と書いたときと

src/css と書いたときとの違いが説明できるようなっていたら良いと思います。

あと、この html5-css3-modern-coding/.gitignore に src/css/ と書くことでどういうマズいことが起こり得るかが説明できると良いと思います。

この赤い印（警告）は、ファイルの末尾に改行を入れてねという意味です。詳細は下記。

ソースコードの最後に改行を入れる - かまたま日記3

なぜ gcc はファイルの最後に改行がないと警告を出すのか？ - Schi Heil と叫ぶために

git - No newline at end of file - Stack Overflow

おっと! ぼけてました!!! ルート直下の.gitignoreに書いてしまったら、他のstandard-layoutとかのフォルダ含め全てのsrc/css/が、監視されなくなっちゃう…

my-standard-layout-scss/.gitignore に

src/css/ と書いたときと

/src/css と書いたときと

src/css と書いたときとの違いが説明できるようなっていたら良いと思います。

my-standard-layout-scss/.gitignore に

src/css/ と書いたとき ↓
こうすると、 サブディレクトリ 配下のすべてのsrc/css配下のファイルが監視対象から外れる。
( my-standard-layout-scss/src/css配下も、my-standard-layout-scss/src/src/css配下も監視対象から外れる )
cssディレクトリ自体は無視されない

/src/css と書いたとき ↓
コレは、.gitignoreがおいてあるmy-standard-layout-scssの絶対パスになるので、my-standard-layout-scss/src/src/cssとかあったとしたら、無視されない

src/css と書いたとき ↓
上に書いた1. と似ているけど、これだとcssディレクトリ自体が無視されちゃう

はっっ
警告も消しときます--!!

今修正しました(・ω・)っ続きはまたお昼にやります!!

inouetakuya · 2018-08-09T20:25:47Z

my-standard-layout-scss/MEMO.md

@@ -0,0 +1,235 @@
+# Chapter-02


このメモは my-standard-layout のものなので、ここでは真っ新にして良いのでは？

中身まっさらにしました👍

inouetakuya · 2018-08-09T20:34:57Z

my-standard-layout-scss/README.md

@@ -0,0 +1,20 @@
+My Standard LayOut SCSS


細かいけど、LayOut ではなく Layout かなと。

正しい文字を使いましょう委員会ですね! ありがとうございます〜

inouetakuya · 2018-08-09T20:36:42Z

my-standard-layout-scss/package.json

+  "license": "MIT",
+  "scripts": {
+    "build:scss": "node-sass --recursive src/scss --output src/css",
+    "build:scss:watch": "node-sass --recursive src/scss --output src/css --watch",


build:scss に変更があったときに、こちらにその変更が反映されるように、

"build:scss:watch": "yarn run build:scss --watch",

とするほうがベターかなと思いました。

See also inouetakuya/html5-css3-modern-coding@6a0f6d8

See also Fix: SCSS を Watch していても、新規に追加した SCSS ファイルがコンパイルされない by inouetakuya · Pull Request #11 · inouetakuya/html5-css3-modern-coding

ありがとうございます!
(そして、nodemon見ました、ブランチきって別プルリクしときますー)

あ、別プルリクにするんですね、了解ですー

inouetakuya · 2018-08-09T21:00:55Z

my-standard-layout-scss/README.md

+```
+
+```
+open http://localhost:3001


僕も勘違いしていたのですが、port はデフォルトで 3000 のようです。

Browsersync options
https://browsersync.io/docs/options#option-port

これまで 3000 を他の環境で使っていたから、代わりに 3001 が選ばれていたという...

なるほどですね。

に変更しました。こうすると、変更する場合でも1箇所だけで済む!ステキ!

ryamakuchi · 2018-08-10T12:21:19Z

@inouetakuya

まままマージしてもよろしいでしょうか…?

ryamakuchi · 2018-08-10T12:33:06Z

よし! 隊長どのの環境と見比べて問題なさそうなので、まままマージしちゃいます‥!

inouetakuya · 2018-08-10T12:33:22Z

見ますー 👀

ryamakuchi · 2018-08-10T12:33:46Z

あっっっ

タッチの差…

inouetakuya

#7 (comment)

LGTM でっす！

ryamakuchi added 5 commits August 9, 2018 23:35

my-standard-layoutをコピーしてmy-standard-layout-scssを作成した

57f311c

reset.cssとstyle.cssをそれぞれ.scssにrenameした

4620df1

コンパイルされたcssはバージョン管理対象外にするので、.gitignoreに追記

dc59bad

+ "node-sass": "^4.9.3" # yarnでnode-sassをインストール

549488d

README.mdを更新した

570bd43

ryamakuchi mentioned this pull request Aug 9, 2018

ビジュアルデザインを見ながらコードを書いていく環境を構築する（SCSS） inouetakuya/html5-css3-modern-coding#9

Merged

6 tasks

inouetakuya requested changes Aug 9, 2018

View reviewed changes

inouetakuya reviewed Aug 9, 2018

View reviewed changes

ryamakuchi added 5 commits August 10, 2018 07:41

.gitignoreを正しく修正した

7b66bcc

MEMO.mdの中を空にする

72e2ad0

正しい文字を使いましょう委員会どの〜

53d82f4

README.mdを修正

005dab9

+ "build:scss:watch": "yarn run build:scss --watch",

ec6b53a

に変更しました。こうすると、変更する場合でも1箇所だけで済む!ステキ!

build:scss:watchは一度build:scssしてからなのを忘れていた!

0ff2ef1

ryamakuchi merged commit 27b9564 into master Aug 10, 2018

inouetakuya reviewed Aug 10, 2018

View reviewed changes

ryamakuchi deleted the setup-scss branch August 10, 2018 16:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SCSSでビジュアルデザインを見ながらコードを書くための環境構築 #7

SCSSでビジュアルデザインを見ながらコードを書くための環境構築 #7

ryamakuchi commented Aug 9, 2018 •

edited

Loading

inouetakuya left a comment

inouetakuya Aug 9, 2018

inouetakuya Aug 9, 2018

ryamakuchi Aug 9, 2018

ryamakuchi Aug 9, 2018

ryamakuchi Aug 9, 2018

inouetakuya Aug 9, 2018

ryamakuchi Aug 9, 2018

inouetakuya Aug 9, 2018

ryamakuchi Aug 9, 2018

inouetakuya Aug 9, 2018

inouetakuya Aug 9, 2018

inouetakuya Aug 10, 2018

ryamakuchi Aug 10, 2018

inouetakuya Aug 10, 2018

inouetakuya Aug 9, 2018

ryamakuchi Aug 10, 2018

ryamakuchi commented Aug 10, 2018

ryamakuchi commented Aug 10, 2018

inouetakuya commented Aug 10, 2018

ryamakuchi commented Aug 10, 2018

inouetakuya left a comment

		yarn-error.log
		src/css/

SCSSでビジュアルデザインを見ながらコードを書くための環境構築 #7

SCSSでビジュアルデザインを見ながらコードを書くための環境構築 #7

Conversation

ryamakuchi commented Aug 9, 2018 • edited Loading

完了条件

inouetakuya left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryamakuchi commented Aug 10, 2018

ryamakuchi commented Aug 10, 2018

inouetakuya commented Aug 10, 2018

ryamakuchi commented Aug 10, 2018

inouetakuya left a comment

Choose a reason for hiding this comment

ryamakuchi commented Aug 9, 2018 •

edited

Loading