男は私たちのためにほとんどの反復的なタスクを実行するコンピューターを発明しました。 これにより、多くの時間を節約し、最大限の利益を得ることができます。 また、この記事はフロントエンド開発に関するものであるため、この領域には、cssおよびjsプリプロセッサのコンパイル、スプライトアセンブリ、画像の最適化、ファイルの縮小など、多くのタスクがあります。
prepros 、
codekit 、
grunt 、
gulpなどのツールがこれらのタスクの自動化に役立ちます。
リストされている4つのそれぞれの経験がありましたが、次の理由で一息つきました。
- Gulpは、GUIプログラムよりもシステムリソースに対する要求が少なくなります。
- 彼はとても速いです。 一口に比べて、うなり声は遅いです。 とても遅いので、エディターからブラウザーに切り替えてページを更新しましたが、新しいスタイルはまだコンパイルされていませんでした。 Gulpの方がはるかに優れています。
- gulpでタスクを記述する方法は、私にとっては簡単に思えました。
新しいプロジェクトの開始時には、同じ仕事をしなければなりませんでした。gulpと必要なモジュールをインストールし、タスクを書き、プロジェクトのファイル構造を整理し、必要な初期ファイルを作成します。 各プロジェクトで、以前使用したソリューションを適用しました。 したがって、ほとんどの日常的なタスクを自動化し、開発に専念できるまともなセットを集めました。
ある時点で、開発のデータベースを作成し、それに基づいて新しいプロジェクトに作業を迅速に展開することにしました。 そして、
このテンプレートをあなたと
共有したいと思います。
このテンプレートは万能薬ではありません。 それぞれに独自のニーズがあり、おそらく最大のメリットを得るには、自分で構成する必要があります。
フードの下には何がありますか？
自動化されたタスク
ファイル構造
プロジェクトの最初のレベルは、
builder 、
srcおよび
builtフォルダーです。
builder -
gulpfileタスクと一緒にあるフォルダー。
nodeモジュールが置かれ、コンソールのすべてのコマンドを開始する場所。
srcフォルダーにはすべてのプロジェクトソースファイルが含まれ、gulpコマンドが実行されると、
builtフォルダーが自動的に作成および変更されます。
srcフォルダーの内容
assets
styles -プロジェクトのスタイルimages
design -ウェブサイトのデザイン用にデザインされた画像content -ページコンテンツで使用される画像
scripts
- local-このプロジェクトの一部として書かれたスクリプト
vendor -サードパーティライブラリ
templates
pages -ページテンプレートblocks -ページが収集されるブロック
どのように機能しますか？
gulpfile.coffeeは、特定のジョブを実行するタスクを記述します。 タスクは、個別にまたはグループで呼び出すことができます。 グループ呼び出しは、最も一般的なユーザーケースです。
すべてのgulpプラグインは、
gulp-load-pluginsプラグインを使用して
package.jsonから自動的にロードされます。 これにより、
gulpfile.coffeeのボリュームが
gulpfile.coffeeます。
ファイルとフォルダーへのすべてのパスは変数に配置され、
config.ymlファイルに記述されます。
タスク
sprite - config.paths.src.sprites.images.allフォルダーにある画像に基づくsprite生成。
.offee localフォルダーから.offeeをコンパイルします。
vendor - vendorフォルダーからbuiltスクリプトを転送します。
stylus -編集.styl ;
images - builtフォルダに写真を転送します。jade - .jadeテンプレートのコンパイル。autoprefixerベンダープレフィックスを追加します（デフォルト設定）。scripts:min min-スクリプトの縮小。styles:min min-スタイルの縮小。images:min画像の最適化;watchファイルの変更を追跡し、必要なタスクを起動します。
タスクグループ
default -テンプレート、スクリプト、スタイルをコンパイルし、スプライトを収集します。dev defaultおよびwatchタスクが含まれdefault 。minifyファイルを圧縮し、 default作業後に作成されたイメージを最適化しdefault 。prodサーバー上で、またはサーバーにアップロードする前に実行されるタスク。 defaultグループを実行してから、 minify実行しdefault 。
システム要件
- node.js;
- gulp;
- coffee-script-gulpfile.coffeeを実行します。 必要に応じて、
.coffeeを.js変換できます。
設置
- node.jsがインストールされていない場合は、 ダウンロードしてインストールします。 node.jsとともに、
npmパッケージマネージャーをインストールします。 - 次に、コンソールにコマンドを入力して
coffee-scriptとgulpインストールします（管理者権限が必要です） npm i -g coffee-script gulp
これらの手順の後、プロジェクト自体の初期化を開始できます。
- テンプレートを使用してアーカイブをダウンロードして解凍します。
- コンソールで、
builderフォルダーを開き、 npm iと入力します。 package.jsonリストされているすべてのモジュールをダウンロードしてインストールするプロセスpackage.json進みます。
インストールが完了すると、コンソールに
gulpと安全に入力でき、
defaultタスクグループが機能します。
問題
gulp起動時に
gulpシステムが
coffee-script/registerモジュールが見つからなかったというエラーを表示した場合、NODE_PATH変数を設定する必要があります。これにより、グローバルモジュールがあるシステムに対して明確になります。
ソリューションへのリンク：
おわりに
テンプレートは常に更新されます。 近い将来、次の機能を追加する予定です。
- スタイラス用のミックスインキット。
- JSHint;
- jsの連結。
- バウアー。
同様の機能を備えた単調なバージョンを準備する計画もあります。
クイックリンク