デベロッパーは、ウェブ開発業、特にHTMLコーダーにおける毎日の作業や単調のタスクに追われています。しかし、それらのいくつかのタスクを自動化することができればどうなるでしょうか。このケースでは、タスクマネージャーが役に立ちます。最も人気なものの一つがGulpです。
最もシンプルな定義で言えば、GulpはJavaScriptプログラミング言語の中で開発された、タスクマネージャー、もしくはストリームコレクターです。様々なタスクを自動化し、時間の大幅な節約を叶えます。
Gulpの使い方
プロジェクトの中でGulpをどのように使うことができ、どういったものが自動化されるべきなのでしょうか？この記事の中で確認し、考えることにしましょう。ドキュメンテーションのシンプルな説明に従えば、まず始めに、GulpはNode.jsを使って使用することができます。したがって、Node.jsをコンピューターの中にインストールする必要があります。次のステップは、PCを使ってどこでもGulpを使用できるようにしてくれるモジュールのインストールです。
そのために、コマンドラインに以下のコードを使用します。
npm i gulp –g
その後、インストールしてあなたのプロジェクトに加え、ディレクトリを変えた後に、必要とされるものに加えて次のコマンドを使います。
npm i gulp --save-dev
インストール方法をご紹介しましたが、もしもわからないことがあれば、より明確な説明のある公式のドキュメンテーションを確認してください。
さて、次にセットアップに進みましょう。
例えば、2つのディレクトリを使います。merehead/first-catalogとmerehead/secondary-catalogです。
merehead/first-catalogではディレクトリはソースファイルとなり、merehead/secondary-catalogではGulpにより実行されたファイルになります。
The basic syntax of any task can be represented in the following code:
gulp.task(‘example’, function() {
});
しかし、いくつかのものにはGulp-pluginを使用しなくてはなりません。
以前の記事の中の一つに、CSS preprocessorsについて説明しました。
SASSをCSSに変換しなくてはなりません。
始めに、この問題を解決するプラグインをインストールします。次のコードを使用しましょう。
npm install yourPlaginNameHere --save-dev
次に、タスクマネージャーのための構成ファイルを作成します。
これはgulpfile.jsと呼ばれます。以下を追加しましょう。
var yourPlaginNameHere= require('yourPlaginNameHere'); //Connection of a plugin.
そして、プラグインSASS、autoprefixer、css-min и renameを含む最初のタスクを作成します。
gulp.task('yourPlaginNameHere', function () {
gulp.src('./merehead/first-catalog/app-style/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./mereheadt/secondary-catalog/app-style')); });
これで、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.task('myWatcher', ['yourTaskNameHere'], function() {
gulp.watch ('./merehead/first-catalog/app-style/*.scss', ['yourTaskNameHere']); });
gulp.task('default', ['myWatcher']);
今、もしプロジェクトの中でGulpを実行するならば、実行の段階で、あなたのファイルをモニターしたり、アップデートしたりするWatchタスクを使いましょう。
この記事の始めに、Gulpはプロジェクトコレクターでもあると説明しました。しかし、アセンブラのルールの中では、小さなプロジェクトにおいてのみ利便性を発揮するとされています。あなたのプロジェクトがReactやRedux、その他のものを使用するならば、Webpackを使用するのが良いです。私たちの会社では、モックアップをコーディングする段階や小さなプロジェクトを実行するときにGulpを使い、本格的なウェブアプリケーションには、会社の中の他のデベロッパーはWebpackを使用しているようです。
まとめ
最後に、私の目的のためにはGulpはまさに理想的な問題解決策であると言いたいです。そして、あなたにも理想的なものであると言えます。このタスクマネージャーを使うのをお勧めします。毎日の手動のタスクを手助けし、時間と労力を節約してくれます。そして、それがあなたのパフォーマンスを効率的に、そして素早くしてくれることでしょう。Gulpをインストールして、たくさんの役に立つプラグインに精通し、あなたのニーズに合わせて個人的なタスクを作成してみてください。
＜このページはMereheadの記事を翻訳して掲載しております。翻訳元の記事はこちらから確認することができます。＞
おすすめ新着記事
おすすめタグ