Foundation 6＆＃x27;のCLIツールを始めます

Foundation 6コマンドラインツールが開始ガイド

Foundation 6は、使用するさまざまな方法とツールを提供します。静的ファイルをダウンロードするか、yetiの起動を使用できます（Mac用のデスクトップアプリケーション、Windowsバージョンはまもなく登場します）。

この記事で説明するコマンドラインツールのセットもFoundation 6を提供することがわかっていません。 Foundation 6は、多くの明白なCSS機能とJavaScriptプラグインに加えて、強力な開発者ツールを備えた非常に柔軟なフロントエンドフレームワークです。

キーポイント

• Foundation 6は、SCSSコンパイル、接続、圧縮、画像最適化、テンプレートなど、開発者にビルドプロセスをより強く制御できるようにする一連のコマンドラインツールを提供します。
• Foundation 6のCLIツールを使用するには、開発者はnodejs、npm、git、gulp、およびbowerをインストールする必要があります。 npm install --global foundation-cliを使用してFoundation-CLIをインストールできます。
• 基礎Cliは、バックグラウンドでGulpとBowerを使用しています。 Gulpは自動開発ワークフローの時間のかかるタスクですが、Bowerは開発者がコマンドラインからフロントエンドライブラリをダウンロードしてインストールできるWebパッケージマネージャーです。
• Foundation CLIを使用して、開発者は3つの基礎フレームワーク（サイト、アプリ、電子メール）の空白のテンプレートをダウンロードしてインストールできます。これらのテンプレートは、GulpとBowerで動作するように事前に構成されています。
• Foundation CLIツールは、ブラウザテストとリアルタイムのリロードを同期するためにBROWSERSYNCで事前に構成されています。この機能により、開発者は複数のデバイスと解像度でリアルタイムの変更を表示できるため、フロントエンドの開発効率が向上します。

財団のCLIツールはいつ使用しますか？

静的JavaScriptとCSSファイルを使用できるので、CLIツールを使用するのはなぜですか？標準構造と使いやすいプロセスが必要になる場合があります。

このように目標を達成できると思いますが、多くの開発者がビルドプロセスをより制御したいことを理解しています。これには、SCSSコンパイル、接続、圧縮、画像の最適化、およびテンプレートが含まれます。これらの追加ツールを使用することを好みます。したがって、場合によっては、CLIツールがより良い選択かもしれません。

コマンドラインを頻繁に使用し、この点に関して6が提供するファンデーション6がわからない場合、またはコマンドラインを使用せず、何か新しいことを学びたい場合は、この記事はあなたのためです。

を使用します

最初に、nodejsおよびnpmツール（通常はnodejsでインストール）をインストールする必要があります。また、Git、Gulp、Bower、およびFoundation-Cliはこれらすべてのツールを使用します。次のコマンドを実行してインストールできます

$ npm install --global gulp bower

一部のシステムでは、特にNPMパッケージをグローバルにインストールする場合は、スーパーユーザーアクセスが必要になる場合があるため、この記事で説明するコマンドの前に

を使用する必要があります。 sudoFoundation-Cli

のインストール

コンピューターにFoundation 5 CLIが既にインストールされている場合は、1つのコマンドのみにアクセスできます（コマンドライン環境構成に応じて）。したがって、最初に古いツールを削除することをお勧めします。次のコマンドを使用してこれを行うことができます：

$ npm install --global gulp bower

および新しいCLIツールをインストールします：

$ gem uninstall foundation
$ npm uninstall --global foundation-cli

財団の文書でインストールの詳細を読むことができます。

システムにFoundation-CLIをインストールしたくない場合、過去にGulpとBowerをインストールしたくない場合は、基礎テンプレートを含むリポジトリをクローンし、Foundationコマンドの代わりにGulpおよびNPMコマンドを使用してください。 Foundation-CLIを使用する場合と同じでなければなりません。

Foundation CLIは何を提供していますか？

前述のように、

財団は、バックグラウンドでgulpとbowerを使用しています。ガルプとバウアーとは何ですか？ Gulpは、開発ワークフローで退屈または時間のかかるタスクを自動化するのに役立つツールキットです。ここでは、SCSSコンパイル、圧縮、接続を検討し、画像圧縮またはその他の便利なタスクを実行することもできます。 Bowerは、コマンドラインからフロントエンドライブラリをダウンロードおよびインストールできるWebパッケージマネージャーです。たとえば、jQueryのインストールには、コマンドの1行のみが必要です。

。 bower install jquery

Foundation CLIは、3つのファンデーションフレームワーク（サイト、アプリ、電子メール）の空白のテンプレートをダウンロードしてインストールします。これらのテンプレートはすべて、GulpとBowerで動作する準備ができており、GulpタスクとBowerの設置ソースが事前に構成されています。これはヨーマンのようなツールに似ています。

ファンデーションCli

を使用しています

Foundation-CLIをインストールした後、次のコマンドを実行して使用を開始できます。

ご覧のとおり、

$ npm install --global foundation-cli

の代わりに

を使用しています。さらに、サイトのファンデーション用のZurbプレミアムテンプレートのみを調べます。正しいフレームを選択するにはfoundationロゴを使用する必要があります。また、正しいテンプレートを選択するには、foundation-cliロゴを使用する必要があります。基本的なテンプレートを選択することもできますが、詳細を確認したい場合は、高度なテンプレートの方がはるかに優れていると思います。 --framework --templateインストール後、プロジェクトフォルダーが必要です（インストールプロセス中に名前は提供されます）。また、すべての依存関係をそこにインストールする必要があります。今やる必要があるのは、新しく作成されたプロジェクトに移動してフォルダーに移動して実行することだけです。

これは魔法です！これにより、Gulpビルドとサーバーのタスク、および監視コマンドが実行されます。これは、コードで確認できるすべての構成されたGULPタスクをトリガーすることを意味します。したがって、このコマンドを実行すると、コンソールにいくつかの情報が表示されます。現在最も重要な情報は次のとおりです

$ foundation new --framework sites --template zurb

実行中のサーバーに関する情報を次に示します。最初のものは実際のアプリケーションであり、BrowserSyncテスト用のUIサーバーもあります（後で説明します）。アプリケーションファイルがDISTディレクトリから提供されていることがわかります。ブラウザで

にアクセスして、標準の基礎6の起動テンプレートを表示できます。

内部コンテンツを表示

これは最もエキサイティングな部分だと思いますが、この点に到達する前に、すべてのインストールプロセスを完了する必要があります。

フォルダー構造、gulpfile.js、javascript/cssリソース

新しく作成されたプロジェクトのフォルダー構造を見てみましょう。最も重要なフォルダーは、srcおよびdistです。開発作業は主にsrcフォルダーで行われ、すべての生産ファイルはdistフォルダーで準備されます。実行中のサーバーは、そのフォルダーからファイルも提供します。これは、必要に応じてワークスペースを準備できることを意味しますが、最終的には、生産対応ファイルはdistフォルダーになります。これは最終製品として提供したいものです。

では、これはどのように実装されていますか？ここで最も重要なドキュメントを見てみましょう - gulpfile.js。 Gulpに慣れていない場合は、この入門チュートリアルをチェックしてください。 Gulpは最初は怖くはありませんが、すべての魔法が起こる場所だからです。

Gulpは、単純なNPMパッケージを介して追加機能を追加する多くのGulpプラグインに基づいています。この新しい財団プロジェクトでは、package.jsonで定義されています。また、実行中は自動的にダウンロードおよびインストールされます（上記のように）実行中にインストールされるため、心配する必要はありません。 foundation new

Gulpファイルを開くと、各タスク（Clean、Cop​​y、Sass、JavaScriptなど）が、この特定の作業部分を担当する特別なGulpプラグインを使用して同様の方法で定義されていることがわかります。さらに、ファイルの下部にあるように、他のタスクを集約する「ビルド」や「デフォルト」などの主要なタスクがあります。基礎ボイラープレートは構成されているため、基本的に何もする必要はありません。もちろん、必要に応じて調整できます。

この構成を使用すると、

フォルダーにSCSを記述し、JavaScriptファイルを

フォルダーに記述できます。また、画像をフォルダーに配置することもできます。実行すると、これらのファイルはすべてsrc/assets/scssフォルダーにコピーされます。オプションに応じて、それらを圧縮するか、画像を最適化できます。これらはすべてsrc/assets/jsで構成されています。 src/assets/img foundation watchgulp構成とそのプラグインは、別の記事のトピックです。それでは、.htmlファイルを見て、Paniniを使用して高度なレイアウトと関係を作成しましょう。 foundation build distパニーニとハンドルバーのテンプレートgulpfile.js

パニーニは、財団チームによって構築された素晴らしいシンプルなツールです。 Paniniを使用すると、一貫したレイアウトと再利用可能なセクションを備えたページを作成できます。

フォルダーには、すぐに使用できる静的HTMLファイルがあります。もちろん、ファイルが1つしかない場合、すべてが簡単です。いくつかの同一のパーツを持つ多くのHTMLファイルを作成する場合、問題が発生する場合があります。フッター、サイドバー、ヘッダー、または「パーツ」と呼ばれる他の多くの要素にすることができます。

Paniniなしでは、すべての複製コードを各HTMLファイルにコピーする必要があります。変更する必要がある場合は、各ファイルで手動で変更を加えるか、テキストエディターを見つけて置き換える必要があります。 Paniniを使用すると、編集中にこのすべてを1か所で実行でき、すべてのファイルが編集され、distフォルダーにコピーされます。

同様に重要なことは、Paniniはハンドルバーテンプレートライブラリに基づいています。また、HTMLファイルにマークダウンをコンパイルすることもできます。パニーニの詳細については、財団の文書を参照してください。

プロジェクトのパニーニテンプレートのフォルダー構造を見てみましょう。フォルダーを開く必要があります。ここには、データ、レイアウト、ページ、および部分があります。ご想像のとおり、レイアウトフォルダーでメインのレイアウトの足場を書くことができます。ここでは、すべてのページで繰り返されるヘッダーとフッターを定義できます。 src

1つのレイアウトのみを使用する場合は、ファイルに名前を付けてください

。このようなデモファイルは私たちのプロジェクトにあります。複数のレイアウトを使用する場合は、特別なボディタグdefault.html（{{> body}}例を参照）を使用してより多くのファイルを作成できます。また、ページ内の特別なタグを使用して、ページを使用するレイアウトをコンパイラに伝える必要があります。これは、以下に示すように、フロントマターと呼ばれます：default.html

$ npm install --global gulp bower

これらのマークは、ページファイルのコンテンツの上部に配置する必要があります。これは、このレイアウトを使用するページにのみ適用され、他のすべてのページはデフォルトのレイアウトを使用します。

ページフォルダーを見てみましょう。このフォルダーには、コンテンツデモページである

ファイルがあります。ご覧のとおり、HTMLやボディタグはありません。これは、前に説明したindex.htmlレイアウトに注入されるためです。もちろん、同様のページを追加できますが、一部のページでは異なるレイアウトを使用する場合があります。 default.html

小さな再利用可能なHTML要素が必要な場合は、Partialsフォルダーで作成できます。デモプロジェクトにはファイルはありませんが、非常に簡単です。 HTMLスニペットを使用してファイルを作成し、ファイルに名前を付けます。次に、レイアウトファイルまたはページファイルで、このセクションを

のようなものを使用してインポートできます（ファイル拡張子はないことに注意してください）。それでおしまい。すべてのコンテンツが接続され、コンパイルされ、コピーされます{{> my-partial-file}}フォルダーになります。 dist

データと呼ばれるフォルダーもあります。ここでは、.jsonまたは.ymlファイルの形式のデータを提供できます。たとえば、データフォルダーに

ファイルがあるとします。これには、次のコンテンツがあります。 myList.json

レイアウトページまたはHTMLファイルの一部で、次のようなものを使用できます。

$ gem uninstall foundation
$ npm uninstall --global foundation-cli

これにより、JSONデータを反復し、HTMLを生成できます。配列に名前が付いたアイテムのリストを取得する必要があります。

ご覧のとおり、Paniniは、複雑なHTML構造を作成したい場合、自分自身を繰り返したくない場合に非常に便利なツールです。

BROWSERSYNC：ブラウザテストとリアルタイムのリロード

を同期します

私が議論した基礎CLIツールの最後の事前に構成された機能は、browsersyncです。ご存知のように、多くのデバイスと多くの解像度でウェブサイトをテストする必要があるため、フロントエンドの作業は難しいです。ここで、多くの異なるデバイスがあなたのウェブサイトに接続する大きなテーブルを持っていると想像してください。何かをクリックしたり、ページをスクロールしたりすると、すべてのデバイスが同じことを行います。これは素晴らしいことです。なぜなら、修正する必要があるものとうまく機能しないものをリアルタイムで見ることができるからです。

作成したプロジェクトは、外部IPアドレスを自動的に提供します（上記参照）。すべての異なるデバイスのブラウザに貼り付けて、同じbrowsersyncエンジンに接続してテストを開始できます。

browsersyncはリアルタイムの変更も提供するため、何かを保存すると、ページを手動で更新せずにブラウザウィンドウに表示されます。また、すべての接続されたデバイスに表示され、Foundation-CLIおよびZurbテンプレートを使用することなく、これらすべての機能を無料で入手できます。これはどれほど素晴らしいですか？

結論

私は、Zurb Foundationチームが開発者に強力なツールと足場を提供するという素晴らしい仕事をしたと個人的に考えています。これも重要です。すぐに使用できるプラグインやCSSスタイルだけではありません。サイト6に基礎を使用することは素晴らしい経験でした。 Foundation CLIツールを使用して達成できるバックエンドプログラミング作業の量を想像してください。静的なWebサイトやブログを作成することもできます。また、非常に高度にすることもできます。言うまでもなく、多くの場合、静的なブログやウェブサイトはさらに速く、より良いものです。

パニーニをよく見ることを強くお勧めします。また、NPMパッケージREADMEにドキュメントを見つけることもできます。マークダウンコンピレーションやカスタムアシスタントなど、ここでは説明しない多くの強力な機能を実行できます。また、Gulpについて読んで、Foundation-CLIツールによって生成されたZurbテンプレート/プロジェクトで使用されるすべてのGulpタスクを慎重に表示することもできます。

もう1つ - 圧縮されたCSSとJavaScriptファイルについては言及しませんでした。 foundation watchコマンドを使用している場合、フォルダーにCSSおよびJavaScriptファイルがありますが、圧縮されません。そのフォルダーに生産対応ファイルが必要な場合は、distを実行するだけです。 Foundationコマンドの詳細について詳しく知りたい場合は、foundation buildコマンドを実行してください。プロジェクトの依存関係を更新する必要がある場合は、実行できます。 foundation help foundation update全体として、ここで何かを学んだことを願っています。ご不明な点がございましたら、コメントでお知らせいただくか、さまざまな方法で私のプロフィールをチェックしてください。

基礎6 CLIツールFAQ（FAQ）

Foundation 6のCLIツールを使用するための前提条件は何ですか？

Foundation 6のCLIツールを使用するには、システムにnode.js（0.12以降）をインストールし、gitをインストールする必要があります。 node.jsは、コマンドラインインターフェイスの実行に必要なJavaScriptランタイムです。 GITは、ソフトウェア開発中にソースコードの変更を追跡するバージョン制御システムです。これらがインストールされていない場合は、公式Webサイトからnode.jsをダウンロードし、公式WebサイトからGitをダウンロードできます。インストールが完了したら、Foundation 6のCLIツールの使用を開始できます。

Foundation 6のCLIツールをインストールする方法は？

Foundation 6のCLIツールをインストールするのは簡単です。端末またはコマンドプロンプトを開き、次のコマンドを入力します。このコマンドは、NPM（ノードパッケージマネージャー）に、コンピューターの任意のディレクトリで使用できるように、基礎CLIをグローバルにダウンロードしてインストールするように指示します。インストールが完了したら、端子に

と入力することで確認できます。これには、システムにインストールされているFoundation CLIのバージョンが表示されるはずです。 npm install foundation-cli --global foundation -v Foundation 6のCLIツールを使用して新しいプロジェクトを作成する方法は？

Foundation 6のCLIツールを使用して新しいプロジェクトを作成するには、端末を開き、プロジェクトを作成するディレクトリに移動します。次に、次のコマンドを入力します。これにより、プロジェクトのテンプレートを選択するように求められます。基本的なテンプレート、高度なテンプレート、またはカスタムテンプレートから選択できます。テンプレートを選択した後、CLIはプロジェクトのテキストを使用します

新しいディレクトリを作成し、必要なすべての依存関係をインストールします。

foundation new Foundation 6のCLIツールで利用可能なさまざまなコマンドは何ですか？

Foundation 6のCLIツールは、プロジェクトの管理に役立つコマンドを提供します。最も一般的に使用されるコマンドには、

（新しいプロジェクトの作成）、

（サーバーの変更とモニターファイルの変更）、

（プロダクションに使用できるプロジェクトにファイルをコンパイル）、 and

（プロジェクトを置き換えて、依存関係を最新バージョンに更新します）。 foundation new foundation watch Foundation 6のCLIツールを更新する方法は？ foundation build foundation update Foundation 6のCLIツールを更新するには、

コマンドを使用できます。端末を開き、次のコマンドを入力します。このコマンドは、NPMに、Foundation-CLIグローバルパッケージの更新を確認し、利用可能な場合にインストールするように指示します。

Foundation 6のCLIツールをアンインストールする方法は？

npm update Foundation 6のCLIツールをアンインストールする必要がある場合は、npm update -g foundation-cliコマンドを使用できます。端末を開き、次のコマンドを入力します。このコマンドは、NPMに、システムからFoundation-CLIグローバルパッケージを削除するように指示します。

複数のプロジェクトでFoundation 6のCLIツールを使用できますか？

はい、複数のプロジェクトでFoundation 6のCLIツールを使用できます。 CLIはシステムにグローバルにインストールされています。つまり、任意のディレクトリで使用できます。新しいプロジェクトを作成するには、目的のディレクトリに移動してfoundation newコマンドを使用します。

基本テンプレートとFoundation 6のCLIツールの高度なテンプレートの違いは何ですか？

ファンデーション6のCLIツールの基本テンプレートは、プロジェクトの簡単な出発点を提供し、最小限の設定のみを必要とします。一方、高度なテンプレートには、より複雑なプロジェクトのための追加のツールと構成が含まれています。これらには、SASSコンパイラ、自動プレフィックス、JavaScriptコネクタ、ソースマップジェネレーターが含まれます。

Foundation 6のCLIツールを使用して私の生産プロジェクトをコンパイルする方法は？

生産プロジェクトをコンパイルするには、foundation buildコマンドを使用します。このコマンドは、SASSおよびJavaScriptファイルをコンパイルし、CSSとJavaScriptを圧縮し、画像を圧縮し、HTMLファイルをDISTフォルダーにコピーします。このフォルダーには、プロジェクトの生産に利用できるすべてのファイルが含まれています。

Foundation 6のCLIツールの問題をトラブルシューティングする方法は？

Foundation 6のCLIツールの使用に問題がある場合、トラブルシューティングに実行できる手順がいくつかあります。まず、node.jsとgitの最新バージョンがシステムにインストールされていることを確認してください。問題が続いている場合は、npm updateコマンドでCLIを更新してみてください。まだ問題が発生している場合は、公式フォーラムまたはGitHubページで財団コミュニティから助けを求めることができます。

以上がFoundation 6＆＃x27;のCLIツールを始めますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。