【デザイナーだってできるもん】コーディング環境をととのえる必携gulp入門!【前編】

コーディングの生産速度をあげるため、Sass(SCSS)などを使いたいwebデザイナーやコーダーは増えてきたのではないでしょうか。そこで、チームでひとつのプロジェクトを完結させるために必要な「開発環境の構築」の手段として、Gulp(ガルプ)とよばれるシステムを提案します!

「ちょっと聞きなれない」「なんだか難しそう…」と思う方も大丈夫です!
・最低限のシンプルな基礎知識
・インストール手順
・Gulpを実際に動かすまでの方法
の3つの項目にわけ、わかりやすくまとめてみました。「あなたがやってみたい!」と思える第一歩を、この記事でサポートしたいと思います!

0-1

目次

    1.  1. gulp.js(ガルプ)ってなに?-概要-
    2.      gulp.jsは自動化システムのこと
    3.      gulp.jsはNode.jsのライブラリのひとつ
    4.      Node.jsによる様々なパッケージ管理のシステムの誕生
    5.      gulpは『package.json』と連動させると動く
    6.      Node.jsをインストールするところからスタート!
    7.  2. gulpをインストールするために必要な手順forMac
    8.      Node.jsをサイトからインストールする
    9.      Node.jsがインストールされているかコマンドラインで確認する
    10.      gulpをコマンドラインでインストールする
    11.      gulpを実行させたいディレクトリにpackage.jsonをインストール
    12.  3. gulpをインストールするために必要な手順forWindows
    13.      Node.jsをサイトからインストールする
    14.      Node.jsがインストールされているかコマンドラインで確認する
    15.      gulpをコマンドラインでインストールする
    16.      gulpを実行させたいディレクトリにpackage.jsonをインストール
    17.      gulpのプラグインをインストール
    18.  4. おわりに

 

gulp.js(ガルプ)ってなに?

20160913_1

■gulp.jsは自動化システムのこと

– Gulpはさまざまな作業を自動化してくれる、「タスクランナー」と呼ばれるシステムのひとつです

20160913_2.1

たとえば、

・CSSのコーディングスピードをあげるためにSass(Scss)で書きたい→CSSへ変換(コンパイル)を自動的にする
・コンパイルしたファイルを特定のディレクトリに移動したい→CSSディレクトリに自動的に出力する
・CSSのコーディングスピードをあげるためにSass(SCSS)で書きたい→CSSへ変換(コンパイル)を自動的にする

など、開発をする上で何度もおこなうことを登録し、自動化(タスク化)します。するとファイルを保存をする1ステップだけで、登録した内容を一瞬で処理をしてくれるようになるのです。とっても便利な機能ですね。

※タスクランナーは他にも、Gruntなどがあります。

■gulp.jsはNode.jsのライブラリのひとつ

– Node.jsはサーバーサイドでうごくJavaScript

JavaScriptは「ブラウザで実行されるもの」というイメージが強い言語ですが、実は「サーバー側でも実行できる」とても柔軟な言語です。「Node.js」は、サーバー側で実行できる仕組みを利用して開発されました。このシステムの便利さがみるみる伝わり、Node.jsを活用してさまざまなシステム(ライブラリ)が展開されたのです。つまり、タスクランナーシステムであるgulp.js(ガルプ)は、「Node.jsによってつくられた、ライブラリのひとつ」と考えるとよいでしょう。

■Node.jsによる様々なパッケージ管理のシステムの誕生

– Node Packaged Modules(npm)

20160913_3.1

Node Packaged ModulesはNode.jsで作られたパッケージを管理するシステム。例えると、コンビニエンスストアをフランチャイズで運営するにあたって、各エリアにマネージャーがいるようなイメージです。その中にgulpという店舗があり、gulp−sassというコーヒーサービスができた。という概念で捉えると、わかりやすいと思います。

■Gulpは『package.json』と連動させると動く

– package.jsonは作業環境が違う人もコマンドひとつでgulpfile.js設定環境を整えられる共有ファイル

20160913_7

package.jsonがないと、せっかくgulpfile.jsにタスクの設定をしても他の人がいちから書きなおすことになります。package.jsonにgulpfile.jsの設定を保存しておけば、このファイルからいつでも設定を読み込むことができます。※ただし、必ずしも設定しないとGulpが実行できないわけではありません。あくまで、設定を保存するためのファイルとなります。

■Node.jsをインストールするところからスタート!

以上の概要からインストールするためのイメージがわいたところで、詳しく導入手順を説明します。それぞれインストールで必要な物を準備できたら、Gulpを走らせるためにタスクを記述し登録していきます。その前に、開発用のディレクトリを用意しておきましょう。サンプルファイルはこちらです

unnamed

ディレクトリ構成はこのようになっています。
– 開発用ディレクトリ…develop
– コマンドで生成するもの
・package.json
・node_module
・style.css

20160914_28

※通常はindex.htmlを作成する要領で手動で新規作成をします。

Node.jsの更新頻度は非常に頻繁です。※2016年9月時点では5年間サポートの安定版(LTS)と最新版(Current)があるようです。

次のページ:macへのGulp導入方法

 

この記事を書いた人:nomal

nomal

大手印刷会社で求人広告(エディトリアルデザインやコピーライティング)を担当し、2年半働いたあとWebデザイナーに転身。 猫とお寿司には目がありません。イラストを描いてリフレッシュしながら楽しく過ごしてます。 Twitter:@nomal_f

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。