WordPressテーマを構築する際のワークフローをスピードアップ

公開: 2020-12-17

スピードはほとんどすべてのプロジェクトにとって最も重要です。 多くの場合、締め切りは非常に厳しく、チームでの適切なワークフローは、時間どおりにそれを達成し、プロセス全体で全員が燃え尽きるのを防ぐ唯一の方法です。

そのようなワークフローはどのように見えますか？ また、配信を高速化するために、日常業務のベストプラクティスをどのように実装できますか？ さて、私たちがそれを調べることができるいくつかの方法があります。 最初のものは：

技術的なワークフローの改善

このパートでは、開発者が作業をスピードアップするために使用するツールについて説明します。 何が最も効果的かを理解する最も簡単な方法は、最も遅いプロセス、つまり最も時間がかかるプロセスを指摘することです。 次は–何をするのに最も精神的なエネルギーが必要か。 プロセスが非常に速い場合もありますが、実際にそれを行うたびに、雑用のように感じます。後で押し戻すことをお勧めします。

提案1–スターターテーマを準備する

DevriXでのワークフローの大きな改善点の1つは、各プロジェクトを開始する前に行うすべての標準的なことを実行し、それらをリポジトリでホストして、新しいビルドが来るたびにクローンを作成することでした。

スターターテーマを準備する

それはどのように役立ちますか？

  1. 毎回Gulpのセットアップを行う必要はありません。 すべてのパッケージは箱から出してすぐに使用でき、実行され、構成は複数のマシンでテストされています。
  2. 短いドキュメントが付属しています。 新しいチームメンバーがいる場合、そのほとんどはすでに説明されているため、基本的なセットアップタスクについて質問する必要はありません。
  3. フロントエンドのファイル構造を毎回決める必要はありません。 ほとんどの場合、フロントエンドチームは1日目から新しいテーマに取り組んでいるため、毎回Sassファイルのフォルダー/ファイル構造を考え出す必要がある場合、プロジェクトごとに時間を無駄にします。
  4. 私たちはすべての一貫性を保ちます–これはもう1つの大きな後押しです。 通常、同時に複数のプロジェクトがアクティブになっているため、プロジェクトを開いたときに最初に探しているものがどこにあるかを知ることで、時間を大幅に節約できます。 すべてのテーマ、スタイル、JSファイル、PHPファイルで同じ構造で、すべて同じ場所にあります。

ビルドのセットアップを改善したり、リンターやフックを導入したり、あちこちにアクションを追加したり、よく使用されるヘルパー関数を追加したりする可能性のある問題へのより良いアプローチを見つけるたびに、スターターテーマを更新します。 ビルドセットアップへの変更が大きい場合は、既存のプロジェクトのコードベースも更新してそれに準拠します。

提案2–同じコーディングスタイルとアプローチを維持する

これにより、すべての開発者は、彼らの前の人々が何をしたかを理解するでしょう。 ただし、それだけではありません。レイアウトを実装するための同じアプローチを適用すると、コードベースの一貫性が高まります。 スタイルの汚染は重大な回帰の問題であるため、これはフロントエンド開発者にとって特に必要です。

たとえば、GoogleのHTML / CSSコーディングスタイルガイドをご覧ください。

GoogleのHTMLCSSコーディングスタイルガイド

ソース

「エントリ」や「コメント」に名前を付ける一般的な方法、または.list-<name>などの「リスト」を管理する方法は、レイアウトを作成するときに採用する標準的なアプローチの一部です。

提案3–ローカルの作業設定を改善する

プロジェクト間をすばやく移動する方法は、それ自体で大幅な時間の節約になります。 ディレクトリ間で$cd'ingだけで、1日30分かかることがあります。 これはすべて無駄な時間です。 代わりに、マシンにTMUXをセットアップし、プロジェクトごとに個別のウィンドウをセットアップし、「Running Gulp」のように、タスク/目的ごとに個別のパネルをセットアップできます–パネル1。 「テーマでのコマンドの実行」–パネル2; 「プラグインでのコマンドの実行」–パネル3。

さらに、ターミナルから直接コードエディタを開くことができることを確認してください。 アイコンから開いてから「プロジェクトを開く」などに移動するよりも、コーディングを行う方が早い方法です。 VS Codeは、これを非常に簡単にセットアップできます。

ツールをより有効に活用する

  • VSコード、Sublime text、およびその他の多くのツールには、エディターが実行できるほとんどすべてのことを入力できる「コマンド」ポップアップがあります。 開いているすべてのドキュメントを保存しますか？ ほんの数ボタン。 それらを閉じますか？ すべて同じです。
  • コマンドパレットをナビゲートします–サイドバーでファイルを参照するのにも時間がかかりすぎます。 先に進んで、必要なファイル名を書いてください。 ファイルの名前変更、移動、複製、削除などの一般的な操作を高速化するために、いくつかの拡張機能を追加します。
  • リンターをセットアップします。 あなたのためにそれを行うことができるツールがあるとき、ファイルフォーマットで時間を無駄にすることは不必要です。 コードをインデントするたびに、角かっこなどの間にスペースを追加することで、問題の解決に費やすことができます。
  • ショートカットとスニペットを利用する–フロントエンド開発者にとってEmmetは命の恩人です。 nav>.site-nav>ul.list-items>li.list-item*5>a{title}ような単純なワンライナーは、15行以上のHTMlコードに展開され、すべてフォーマットされ、スタイルを設定する準備ができています。 その行を入力するには数秒かかります。
VSCodeの例

VSCodeコマンドパレットの例。 あなたは彼らの概要ページでもっとたくさん読むことができます。

ワークフローを改善するための意思決定

これは少し注意が必要な場合があり、クライアントのビジネスニーズについての経験と理解が必要になる場合があります。 これは、責任の重いアプローチの1つでもありますが、プロジェクトが期限を逃さないようにすることができる場合もあります。

最も重要で最速の実装から始めます。 1日目にページが起動しない可能性がわずかにある場合は、最初から始める必要はありません。 見積もりで何か準備ができていない可能性がある場合は、必ずクライアントと話し合ってください。 何をしたか、何が遅れるか、どこで問題が発生するかを明確に述べるほど、潜在的な問題を克服できる可能性が高くなります。

委任は早い段階で作業を行いますが、関係する人の総数は低く抑えます。 これは、ある段階で誰もが気付くものです。 おそらく最も早いのは学校で、10人の子供がプロジェクトに取り組むようになりますが、ほとんどの作業を行うのは2、3人だけです。

これは、より多くのフロントエンド作業から始まるプロジェクトで特に顕著です。 最初に設定する必要があるのはプロジェクトのアーキテクチャであるため、最初から複数の開発者が作業することはめったにありません。 設計チームの基本的な決定はビルドである必要があります。 コンポーネントとは何か、それらをどのように拡張するか、ファイルの分離、メディアクエリの構造とルール、命名規則。 このすべて。

タスクの完了

そして、そのような基本的な段階で複数の開発者がいる場合、両方がサイトの残りの部分をスタイリングするために必要なコードの基本的な部分を実装し始める可能性があります。 彼らがそのコードをプッシュすると、競合が発生し、開発者の1人がほとんどの作業をやり直す必要があるかもしれません。

フロントエンド開発者を追加する良い機会は、より多くの基本的な作業が完了し、作業を「コンテンツカード」、「ランディングページX」、「404ページ」などの個別のコンポーネントに委任できる場合です。 それまでに、フォントが適用され、一般的なタイポグラフィ設定が設定され、ほとんどのファイルが作成され、少なくとも1〜2ページが作成されます。

そして、1つのプロジェクトに集中する人の総数を最小限に抑えることが理想的です。 時間管理とタスクへの集中の観点から、チームで作業する開発者が検討したいヒントは、特定のプロジェクトのワークロードを切り替えることです。

新しいサイトで2週間フルタイムで作業しているフロントエンド開発者のジョンがいるとしましょう。 その時までに、彼はそれを1日80時間以上見ています。 彼はおそらくサイトで問題を見つけるのをやめました！ 今は彼の友人のケイトが介入して彼の仕事のほとんどを引き継ぐのに良い時期でしょう。 ケイトは小さな問題の修正を開始し、デザインに従っていることを再確認し、あちこちでパフォーマンスを向上させ、ジョンがそれを行う精神的なエネルギーがないという理由だけで延期していたいくつかのページとコンポーネントを終了します。

ほとんどの開発者がこれを経験している可能性は十分にあります。新しいプロジェクトや古いWebサイトでのメンテナンス作業で少し頭を悩ませている間、チームメイトが介入してさらに1〜2週間作業を進めることができるのはとても気持ちがいいです。 。

要約すれば：

サイトの開発速度を向上させるための明白な技術的方法はいくつかあります。 これは、チームワークの組み合わせです。チームで共通のガイドラインを定義する方法と、自由に使用できるすべてのツールを利用しながら、作業環境をセットアップする方法/作業を自動化する方法です。 初日と同じ高い生産性を維持するために、どのように心を新鮮で鋭く保つか。

これらすべてを管理するには、強力なチームには、アーキテクチャを構築する優れた上級開発者、ガイドラインに従って質の高い作業を作成する責任ある開発メンバー、および全員の精神状態を探す優れたプロジェクトマネージャーが必要です。