Gulpを使ってHTMLコーディングを自動化しよう！

 

 

Web開発に携わる人なら誰でも、ウェブ開発業界、特にHTMLのコーディングの際に、繰り返しの単調な作業を強いられることになります。

では、こういった退屈な作業を自動化できるとしたらどうでしょう？ この場合にはタスクマネージャが役に立つはずで、その中でもGulpは最も人気のあるものの1つです。

 

 

出来る限り簡単に定義すると、Gulpはプロジェクトの、タスクマネージャ兼ストリームコレクタであり、これはJavaScriptで開発されています。大幅に時間を節約しながら、様々なタスクを自動化するのに役立ちます。

 

 

 

 

 

Gulpの使い方

 

 

プロジェクトでGulpをどのように使えば良いのでしょうか。そして、具体的には何を自動化するのでしょうか。この記事で見ていきましょう。

ドキュメントに書かれている簡単な説明によれば、まず、GulpがNode.jsで動作することがわかります。 なので、Node.jsをコンピュータにインストールする必要があります。 次のステップはモジュールのインストールで、これはGulpをPCのあらゆる部分で使用するのに役立ちます。

モジュールをインストールするためには、コマンドラインで次のコードを実行してください。

 

npm i gulp -g

 

その後、プロジェクトにモジュールをインストールして追加します。ディレクトリを変更して次のコマンドを入力してください。

 

npm i gulp –save-dev

 

 

 

 

 

 

インストール方法を見てきました。それでも何か分からないことがあるなら、公式ドキュメントの詳細な説明を参照してください。ではセットアップに移りましょう。たとえば、merehead/first-catalogとmerehead/secondary-catalogの2つのディレクトリを使用してみます。

 

 

merehead/first-catalogディレクトリにはソースファイルがあり、merehead/secondary-catalogディレクトリにはGulpによる処理された後のファイルがあります。どのタスクの基本構文も、次のコードで表わされます。

 

gulp.task(‘example’, function() {

});

 

しかし、実際には、Gulpプラグインを使用する必要があることもあります。CSSプリプロセッサの利点については以前の投稿した記事で説明しましたね。Gulpを使ってSASSをCSSに変換することができます。

まず、この問題を解決するためのプラグインをインストールする必要があり、次のコードでインストールできます。

 

npm install プラグイン名 –save-dev

 

 

 

 

 

 

次に、タスクマネージャの設定ファイルを作成します。このファイルをgulpfile.jsという名前で呼ぶことにし、次のコマンドを入力してください。

 

var プラグイン名= require(‘プラグイン名’); //Connection of a plugin.

 

 

 

 

 

 

そして、プラグインSASS、オートプリフィクサー、css-minおよびrenameを含む最初のタスクを作成します。

 

gulp.task(‘プラグイン名’, 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を最小限に抑えました

5) ファイルの名前を変更し、接尾辞 “min”を追加する

6）処理されたファイルをフォルダsecondary-catalog/app-cssに格納する

 

したがって、これらの6つの項目うちの少なくとも1つを手作業で行ったことがあると思います。これはちょっとしたタスクの一例です。ここで見た、短い構文と柔軟性がGulpが強力なツールである理由です。ことために、すべての開発者は大幅に時間を節約することができるのです

 

 

 

 

 

少しずつGulpの自動化に役立つタスクが分かってきました。上記の例では、CSSを最小限に抑え、プリプロセッサを使用してプレフィックスを使用するプロセスについて説明しました。付け加えると、このタスクマネージャには次に示すこともできます。

– 画像の最適化

– Jadeのような、HTMLテンプレートを使用する

– コードの検証と有効化

– JavaScriptを最小化して組み合わせる

 

 

 

 

 

 

Gulpを使うメリット

 

 

他にも便利なプラグインが沢山あります。 たとえば、gulp-connectを使用すると、livereloadのサポートを受けながらローカルサーバーを作成して実行できます。このプラグインを使用すると、「更新」ボタンを何度もクリックしなくてもに、Sass、HTML、またはJSファイルを更新した後の、ブラウザ上での変化を確認できるようになります。

 

 

 

Gulpのもう一つの特徴は、さまざまなタスクを作成して開発プロセスを自動化することに加えて、そういったタスクを処理するプロセスを自動化できることです。

結局、上記のタスクの例を試してみたのなら、毎回次のコマンドを実行するのが良いでしょう。

 

gulp sass

 

 

 

 

ここで、Watchメソッドは、ファイルの状態を監視し、ファイルに変更があった時に、その都度特定のタスクを何度も繰り返し実行するのに役立ちます。

このメソッドが使用されるコード例を考えてみます。

 

gulp.task(‘myWatcher’, [‘タスク名’], function() {

gulp.watch (‘./merehead/first-catalog/app-style/*.scss’, [‘タスク名’]);

});

 

プロジェクトでGulpコマンドを実行すると、Watchタスクが実行され、セッションが実行されている間、ファイルを監視し、更新し続けます。

 

 

 

 

 

この記事の冒頭で、Gulpはプロジェクトコレクターでもあると書きました。しかし、アセンブラの役割では、小さなプロジェクトでのみ使うのが便利です。あなたのプロジェクトがReact、Redux、およびそのほかの色々なライブラリを使用している場合には、Webpackを使う方がはるかに便利です。

私たちの会社では、モックアップや小規模プロジェクトのコーディングの段階でGulpを使用し、本格的なWebアプリケーションのために、Webpackが使用されています。

 

 

 

 

 

結論

 

結論として、私にとってはGulpが理想的なソリューションであると述べたいと思います。そしてこれは、読者の皆さまにとっても理想的だと思います。このタスクマネージャを使ってみてください。日常の作業を自動化し、時間と労力を節約できますし、これにより、作業をより効率的かつ迅速に終わらせられるのです。ですから、Gulpをインストールし、必要に応じて様々な便利なプラグインを駆使して、自分の仕事に役立ててみてください。

 

 

 

※この記事はHow to Use Gulpを翻訳・再構成したものです。

 

 

 

▼こちらの記事もおすすめです！