Gulp+Pug+Sass+VCCW導入手順まとめ

お久しぶりです。
久々にWord Press管理画面を開いてAdvanced Gutenbergを見たら前からあったの?ブログ用のカスタムスタイルを簡単に登録して使えることが判明したのでグーテンベルク行けるやん!となっています。
ただし入力画面には反映されないのでここはまたなんか仕様変更があったっぽいですが…

やり方はクラシックの方のスタイル登録より簡単だと思う。

  1. プラグイン「Advanced Gutenberg」を入れる
  2. 「<>カスタムスタイル」の項目を開く
  3. 下にある「+新規クラスを追加」をクリック
  4. 追加したいスタイルのclass名を上のボックスに入力
  5. 実際のスタイルを下の{ }の中に入力
  6. 左下の追加された項目の横の「✎」マークを押して選択リストでの表示名を入力
  7. 投稿画面で右のバーの「custom style」というプルダウンから登録した名前を選ぶ

これだけ!ただ7番はパッと見たところ「段落」ブロックでしか出てこないですね…

あと疑似要素を使っているものは Advanced Gutenberg には登録できないのですが…
前みたいに「テーマエディター」に入れてるスタイルシートに記入した後、Advanced~に空っぽのクラス名を登録すれば使えます。

さてでは本題に

行ってみましょう

ただしこの記事は

ほとんど参考にした記事のリンク貼って終了です。あとgulpfile.jsのファイル貼っておこうかな。

あーアカン、↑のスタイル、タイトルと本文がくっ付かなくなった。。これは難儀しますね、特にプログラマじゃなくアフィとかで仕事してる人
直す方法なんとなく分かっても各所でダルい…


Gulp導入の動機

PugでHTMLコーディングを効率化・メリットと使い方を知る

8ページくらいサイトを作ったらもうヘッダーとフッターを管理するのに限界を感じた今日この頃
ワードプレスのPHPみたいに分割して管理する方法を探しまくり辿り着いたのがpugちゃん

CSSの常識が変わる!「Compass」の基礎から応用まで!

(なおcompassは使わん模様、だけどこの記事分かりやすい)

そしてpugを使うのに必要なgulpはなんとなく取り入れられずにきたsassも使えるというではありませんか!
これを機にモダン(ではない)な開発環境、とやらになってみますか…とやり始めたら1週間くらいかかりました。。

こんな素人を雇ってくれた会社に感謝

インストールする系

絶対つまずかないGulp 4入門(2019年版)インストールとSassを使うまでの手順

ドゥン!これがかなり親切でアップデートしてくれてるので、これみたらスムージングに行きました。
gulp導入終わり

https://code.visualstudio.com/

そしてGulpを導入して少し弄ってたら、Bracketsだとエラー通知が機能しないことが判明。
その上プロジェクトファイルを開くと徐々に重くなってきて使いにくくなっていたのもあり、
これを機にVScodeに乗り換えました。サクサクは最高ですね。

ただし、Bracketsのライブビュー機能はやはり最強で、
あの使い心地に慣れるとリアルタイムでハイライトされないでコードを書くのが難しいなと思ったのですが、Gulpの自動ブラウザ更新とブラウザの開発モードのハイライトを併用してまぁ何とかなるかなって感じ。
あれがVScodeでできれば最強なのだが…
あとHTMLをコピーしてCSSファイルにコピーするとクラス名でセレクタを自動生成してくれるプラグインも探したけどVScodeにはなさげで、これを使いたい時だけBrackets起動してるという。

プラグインはまだsass用のbeautify的なのを入れたくらいかな…あんまりまだ入れてないけどそのうち調べてまとめよう

WordPressのテーマ作成( vccw + Gulp + Pug + Sass + browerSync )

そして目指す到達地点がこれ↑
それにむけてvccwとやら (WordPress開発仮想環境) も必要です

【初心者でもわかる】VirtualBoxインストール方法を詳しく!

正直結構前に入れたのでどうやったか何を見たか忘れたけど、そんなに詰まらずに出来た気がする(ただしmacで)
からのvccw導入は簡単!って言われてるのに結構詰まって、でもアンストしてゼロからこの記事でやったら簡単でした…

【VCCW】WordPressのローカル開発環境を作ってみた!【Windows10】

てかvirtualboxを使うと聞いて、勝手にその中の画面で動かすんだと思ってた(この言い方で伝わるか謎)んですが、実際にはvccxを起動後に規定のアドレスに手持ちのブラウザでアクセスすれば繋がるという超絶便利なツールでした。思い込みで詰った感ある。

使い方・記述方法

Gulpの記述方法

前提として大事なのは、今インストールしたGulpはver.4です。
そして検索で引っかかってくる大半の例はver.3…なのでただコピペしても動かない可能性が高須クリニック。
この辺を読んでver.4用の記述方法を覚えて書き換えが必要になってきます。

gulp 4.0 が正式リリース、v3 からの移行に伴う gulpfile.js ファイルの修正点
Gulp 4 gulp.seriesとgulp.parallel

まとめるとこれです。return必須と並列処理のparallel・直列処理のseriesの指定が必須になったというところを修正すればver.3で書かれたものも多分動く

後はこの辺を見て役立つプラグインを導入してきます。

gulpの基本的な使い方(gulp.jsの基礎をしっかり理解する)
必ず使うタスクランナーGulpとGruntの基本コード9選
【デザイナー向け】gulpでかんたん画像圧縮
gulpで階層構造を維持して出力する

ちな本家 つ https://gulpjs.com/

今ダウンロードしてるのはこんな感じ。

    "browser-sync": "^2.26.5",
    "del": "^4.1.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-cached": "^1.1.1",
    "gulp-changed": "^3.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^5.0.3",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-pug": "^4.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-svgmin": "^2.2.0",
    "imagemin-jpeg-recompress": "^6.0.0",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-pngquant": "^7.0.0",
    "vinyl-paths": "^2.1.0"

https://gist.github.com/tama441/c21650727066796251ab96b19b729661
長いのでリンクにするけど、使ってるgulpfile.jsはこんな感じです

Pugの記述方法

PugでHTMLコーディングを効率化・メリットと使い方を知る
Pugと仲良くする方法

色々使い方あるみたいだけど今のところはページによる分岐を変数とif文で処理するのと、@includeが使えるだけで当初の目的は達成でした。
あとソースの見やすさが快適すぎ

sass/cssの記述方法

CSSの常識が変わる!「Compass」の基礎から応用まで!
CSSとSassのコーディングスタイルガイドを作ってみた
Sassで@mixinを作る時に知っておきたい基礎知識
Sassの変数とmixinで変更に強いメディアクエリをつくる

mixinを使うことでメディアクエリの記述が見やすく扱いやすくなったため、2番目のガイドラインに従って各クラスごとにレスポンシブ対応のコードを書いたらメンテしやすいことしやすいこと(今まで携帯用とPC用でファイル分けてた)

今後やりたいこと

予定通りワードプレス開発!
まだ情報収集中…vccwは本番環境にも同期できるって聞いてるから期待してる

とりあえず資料を貼って終わりにしておく

PugでPHPタグを出力したい
WordPress のテーマ開発に絶対必須な gulp プラグイン9選!
VCCWを導入してWordPress開発環境を構築しよう -本番環境との同期手順

2番目のに載ってる「pug-php-filter」って便利そうなのに他に使ってる人がいないのが気になるけど、とりあえず導入予定
あとぶっちゃけワードプレス自体1回しか作ったこと無いので勉強することがたくさん…(@_@)
記事書きたいことも色々あるんだけど
全体的に無理せずガンバリマスー

コメントを残す

メールアドレスが公開されることはありません。