プログラミング

プログラミング

【ローカル開発環境の構築】タスクを自動化するビルドシステムGulp(ガルプ)の使い方 インストールに必要なコマンドラインも

MEREHEAD

DIGITAL WEB DEVELOPMENT AGENCY. We achieve higher results through cutting-edge technologies, dazzling design, and teamwork.

本記事は、How to Use Gulp
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

361 views

読了時間 : 約4分36秒

デベロッパーは、ウェブ開発業、特にHTMLコーダーにおける毎日の作業や単調のタスクに追われています。しかし、それらのいくつかのタスクを自動化することができればどうなるでしょうか。このケースでは、タスクマネージャーが役に立ちます。最も人気なものの一つがGulpです。

 

 

最もシンプルな定義で言えば、GulpはJavaScriptプログラミング言語の中で開発された、タスクマネージャー、もしくはストリームコレクターです。様々なタスクを自動化し、時間の大幅な節約を叶えます。

 

 

Gulpの使い方

 

 

プロジェクトの中でGulpをどのように使うことができ、どういったものが自動化されるべきなのでしょうか?この記事の中で確認し、考えることにしましょう。ドキュメンテーションのシンプルな説明に従えば、まず始めに、GulpはNode.jsを使って使用することができます。したがって、Node.jsをコンピューターの中にインストールする必要があります。次のステップは、PCを使ってどこでもGulpを使用できるようにしてくれるモジュールのインストールです。

 

そのために、コマンドラインに以下のコードを使用します。

 

 

 

その後、インストールしてあなたのプロジェクトに加え、ディレクトリを変えた後に、必要とされるものに加えて次のコマンドを使います。

 

 

 

 

インストール方法をご紹介しましたが、もしもわからないことがあれば、より明確な説明のある公式のドキュメンテーションを確認してください。

 

さて、次にセットアップに進みましょう。

 

例えば、2つのディレクトリを使います。merehead/first-catalogmerehead/secondary-catalogです。

 

 

merehead/first-catalogではディレクトリはソースファイルとなり、merehead/secondary-catalogではGulpにより実行されたファイルになります。

 

 

 

 

しかし、いくつかのものにはGulp-pluginを使用しなくてはなりません。

 

以前の記事の中の一つに、CSS preprocessorsについて説明しました。

 

SASSCSSに変換しなくてはなりません。

 

始めに、この問題を解決するプラグインをインストールします。次のコードを使用しましょう。

 

 

 

 

次に、タスクマネージャーのための構成ファイルを作成します。

 

これはgulpfile.jsと呼ばれます。以下を追加しましょう。

 

 

 

 

そして、プラグインSASS、autoprefixer、css-min и renameを含む最初のタスクを作成します。

 

 

 

 

これで、Gulpはファイルを実行し、以下を行いました。

 

1) 拡張子.scssで全てのスタイルのファイルを確認

2) SassからCSSへの変換

3) CSS内の必要となる全てのベンダープレフィックスの配置

4) CSSの最小化

5) ファイルの名前変更と接尾辞”min”の追加

6) 実行されたファイルをsecondary-catalog/app-cssフォルダ内に配置

 

 

これにより、6つのことが実行され、そのうち少なくとも1つは手動で行われました。

 

記録は、一つの小さなタスクの例にすぎません。

 

この短い構文とGulpの柔軟性は、それをよりパワフルなツールにします。

 

そのため、全てのデベロッパーはたくさんの時間を節約することができます。

 

 

少しずつ、どのタスクがGulpの自動化に役立つのかを見てきました。

 

上にある例は、CSSの最小化、プリプロセッサの使用、プレフィックス変換のプロセスを紹介したものです。

 

それに加え、タスクマネージャーのスキルは以下にリストアップしています。

 

・イメージの最適化

・JadeなどのHTMLテンプレートの使用

・コードのテストと確認

・最小化とJavaScriptの結合

 

 

Gulpで得られるもの

 

 

他にもたくさんの役立つプラグインが存在します。

 

例えば、gulp-connectはlovereloadを使いローカルサーバーを作成します。

 

このプラグインを使えば、sass、HTML、JSファイルをアップデートした後に、“アップデート”ボタンをクリックする必要なく、ブラウザの中の変化を確認することができます。

 

 

Gulpは、様々なタスクを作成することで開発作業を自動化することに加えて、これらと同じタスクのプロセスを手動化することができるということです!

 

結局は、今までのタスクの例を確認した上で、次のコマンドを使用するべきです。

 

gulp sass

 

 

ファイルの中に変化がないかどうか、何度も何度もファイルのステータスをモニターしたり、特定のタスクを実行したりするWatchタスクは有効的であるといえます。

 

次の文の中に使われている、この方法を使用したコード例をイメージしてみてください。

 

 

 

 

今、もしプロジェクトの中でGulpを実行するならば、実行の段階で、あなたのファイルをモニターしたり、アップデートしたりするWatchタスクを使いましょう。

 

 

この記事の始めに、Gulpはプロジェクトコレクターでもあると説明しました。しかし、アセンブラのルールの中では、小さなプロジェクトにおいてのみ利便性を発揮するとされています。あなたのプロジェクトがReactやRedux、その他のものを使用するならば、Webpackを使用するのが良いです。私たちの会社では、モックアップをコーディングする段階や小さなプロジェクトを実行するときにGulpを使い、本格的なウェブアプリケーションには、会社の中の他のデベロッパーはWebpackを使用しているようです。

 

 

まとめ

 

最後に、私の目的のためにはGulpはまさに理想的な問題解決策であると言いたいです。そして、あなたにも理想的なものであると言えます。このタスクマネージャーを使うのをお勧めします。毎日の手動のタスクを手助けし、時間と労力を節約してくれます。そして、それがあなたのパフォーマンスを効率的に、そして素早くしてくれることでしょう。Gulpをインストールして、たくさんの役に立つプラグインに精通し、あなたのニーズに合わせて個人的なタスクを作成してみてください。

 

<このページはMereheadの記事を翻訳して掲載しております。翻訳元の記事はこちらから確認することができます。>

 

【セレキュトのおすすめpickup】
 
■クリエイターの実績、知識はあるけどいい仕事が見つからない方におすすめ!
 【レバテックフリーランス】
 ・案件数業界最大級、エージェントの理解が深い、発注額高、圧倒的低マージン、単価アップ交渉◎
 ・エンジニア勉強会の開催有り、就業後もサポート有り
 ・年収が上がったクリエイター多数
 ・案件)【Deep Learning】AIプロダクト開発の求人・案件/~900,000円/月 など
 ⇒レバテックフリーランスを見てみる
 
■今のクリエイター技術をもっと向上したい方におすすめ!
 【デジタルハリウッドSTUDIO by LIG】
 ・あのWeb制作のプロ集団「LIG」が運営の上野・池袋のWebクリエイター育成スクール
 ・6ヶ月で未経験からwebクリエイターへ、転職サポート◎
 ・映像教材はいつでもどこからでも受講可能
 ・LIG監修のオリジナル映像講座や特別LIVE授業など特典盛りだくさん!
 ・無料相談会受付中!
 ⇒デジタルハリウッドSTUDIO by LIGを見てみる

おすすめ新着記事

おすすめタグ