Web制作

ど素人のgulpの使い方まとめ

とりあえず参考サイト

とりあえずSassのコンパイルだけなら下記のそのままでいける

ttps://ics.media/entry/3290

あれやこれややりたいなら下記がとても参考になる

今からでも遅くないGulpを使った開発環境の作り方

が、しかしgulp3系統での話なので最後の最後で監視するところでうまくいかない+「gulp-progeny」のせいで動かないのでこれだけ削除した。

 

導入しませう

  1. とりあえずNode.jsを入れる必要がある
  2. 作業するようのフォルダを作成する
  3. ターミナルでcd(チェンジディレクトリ)を打って、上記フォルダを掘り込む
  4. npm init -yを入力でpackage.jsonを作成
  5. 作ったフォルダ(ローカル)にnpm install -D gulpでgulpをインスコ
  6. とりあえずgulpの下準備おわた

 

Sassコンパイルして画像の圧縮してブラウザの自動リロードしたい

gulpfile.js(gulpの設定ファイル)を適当に作る。

そこにvar gulp = require( ‘gulp’ );を記載

で、やりたいタスクをインスコしてここに記載していく。

 

Sass関連

内容はググろう

 

画像ファイルの圧縮関連

内容はググろう。とりあえずだいたいの拡張子の画像を圧縮

js関連のはいらんので無視

 

ブラウザのオートリロード

–save-devにしてるので勝手にpackage.jsonに記載されやす

 

「gulpfile.js」の設定

いちばん四苦八苦したところですが。一旦これで動くってのを貼る。

適宜は適宜やってください。
ちなみに

 

「/**」はそのディレクトリ全部

「/*.scss」はそのディレクトリのscss全部とかいう動き

メモ書きでした。

 

追記

PHP扱いたいときは下記をインスコして

適宜gulpfile.jsを更新

フォントをCSSで複数読み込む方法

Googleフォントを自前でサーバーに突っ込む時にどうやって表示すんの?ってなった時のメモ。

表示したい箇所に下記を当て込む

この形式でフォントのウェイトや種類を複数取り込むことができるよ!

本当のデンス、チャンス、ロマンスは自分次第やで!

「マストドン」に公式マークをつけるぞ

マストドンにも公式マークを付けれるらしいです。

 

 

マストドン オフィシャルマーク

名前の横のチェックマークですね。

Twitterと一緒。

 

これ簡単に付けれます。

 

プロフィール編集から名前の編集で末尾に「:white_check_mark:」をつけるだけ。

 

マストドンオフィシャルマーク

 

 

これであなたもオフィシャル。

ソーシャルのボタン

Facebook、Twitter、Google+、はてなブックマーク、LINEなど基本的なの

metaに記載も必須

 

JSを画面サイズによって切り替え

使い勝手が良いのでメモ

ムッチャ使う ナビゲーションなどfixed

よく使うからメモ

margin:0 auto;使えない時のセンタリング

これでなんとかなる