えっ!?まだスマホで見にくいんですか?スマホ最適化リノバスなら標準仕様です。ウェブ制作会社にお困りなら今すぐチェック

日常業務の効率アップを目指して「gulp」を導入するまで

日常業務の効率アップを目指して「gulp」を導入するまでアイキャッチ画像

リノバス制作部の松本です。

以前より興味はあったものの、なかなか導入できずにいた「gulp」を導入するべく学習を始めました。自身の備忘録も兼ねてこちらで紹介させていただきたいと思います。

そもそも「gulp」とは?

「gulp」とは、Node.jsのStreamAPIを利用したビルドシステムです。

とだけ聞いてもピンとこない私ですが、、、制作作業で発生する作業の自動化と理解しております。そして色々なプラグインを組み合わせたタスクを作成することができます。

たくさんのプラグインが存在しますが、今回はSaaaコンパイルのタスクを導入してみたいと思います。

Saaaコンパイルくらいであればコンパイラを使用すれば事足りるのでは?と思っていましたが、チーム制作において成果物の質を一定にするといったメリットもありこれからの作業に積極的に取り入れていければと思います。

「gulp」導入

1.Node.jsのインストール

「gulp」はNode.jsによって動かすことができます。まずはNode.jsをインストールします。公式サイトよりインストーラーをダウンロードしNode.jsをインストールします。

[コマンドライン]

を実行し、Node.jsのバージョンが表示されればインストール成功したことが確認できます!

2.package.jsonファイルの作成

プロジェクトフォルダー(myprojectとします)を任意の場所に作成し、package.jsonファイルというプロジェクトの設定情報を記述するファイルを作成します。

[コマンドライン]

package.jsonファイルを作成できます。

3.Gulpのインストール

Gulp本体をインストールします。

[コマンドライン]

4.プラグインのインストール

今回の目的であるSaaaコンパイルのプラグインをインストールします

[コマンドライン]

4.gulpfile.jsファイルの作成

まず冒頭でインストールしたプラグインを宣言します。

5.gulp実行

[コマンドライン]

6.gulpの実行結果

style.scss

style.css

コンパイルできましたー!

なかなかハードルが高く感じていて導入を躊躇していましたが、ここまでは以外にも簡単に導入することができたので、これからたくさん活用し自分なりに使いこなせるように勉強を進めたいと思います。今回は簡単に導入の流れを勉強しましたが、これからまた便利なプラグインを導入しここで紹介できればと思っております。

えっ!?まだスマホで見にくいんですか?スマホ最適化リノバスなら標準仕様です。ウェブ制作会社にお困りなら今すぐチェック