gulpのテンプレート、使い方&ポートフォリオの簡易テンプレート

このnoteは以下のnoteを小売りにしたものです。

https://note.com/hoshilog/n/n4629dc1c23a3

内容は同じものになりますのでご了承ください。

--------------------------------------

gulpのテンプレート、使い方

※gulpのバージョンが現在のものより古くなっています。ご利用の際は十分ご注意ください。

コーディングする上で今や必須のタスクランナーgulp。そのgulpの設定ファイルとディレクトリ構成、使い方をこのnoteで解説します。

このgulp設定ファイルでは以下のことができます。

・scss（cssを楽に書く記法）
・autoprefixer（ベンダープレフィックスの自動付与）
・sprite（複数の画像をなるべく一枚の画像にまとめ、CSSで表示範囲を指定することによって表示させる）
・csscomb（プロパティ順序の整列）
・imagemin（圧縮）

コーディングをする上でgulpはもはや手放せない存在です。

3.ポートフォリオの簡易テンプレート

モジュールの概念に基づいたポートフォリオの簡易テンプレートを追加します。

先述の通りgulpのテンプレートと使い方、ポートフォリオの簡易テンプレートはこちらのnoteにのみ追加いたします。

ポートフォリオの簡易テンプレートは、ある程度のモジュールとフレームだけ用意するのでカスタム化してオリジナルに変えていただくことが可能です。

gulpの使い方

以下よりダウンロードしてください。

ttps://hoshi-log.com/gulp-template1.1.zip

_devディレクトリにgulp関係のファイルが入ってます。

以下、概要の説明です。後程説明するので一旦飛ばして大丈夫です。

├─_dev
│ ├─.csscomb.json　cssプロパティの並び順の指定
│ ├─_gulp.bat　起動のバッチファイル
│ ├─_imagemin.bat　画像圧縮のバッチファイル
│ ├─_install.bat　nodemoduleインストールのバッチファイル
│ ├─_sprite.bat　スプライトのバッチファイル
│ ├─gulpfile.js　gulpの処理の記述
│ ├─package.json　インストールするプラグインの指定
│ ├─package-lock.json　インストールされたプラグイン
│├─scss
│ │ ├─base
│ │ │ ├─_base.scss　デフォルトcss
│ │ │ ├─_mixin.scss　mixin　
│ │ │ └─_var.scss　変数
│ │ ├─common　共通
│ │ │ ├─_footer.scss　フッター
│ │ │ ├─_header.scss　ヘッダー
│ │ │ ├─_main.scss　メインコンテンツ
│ │ │ ├─_sprite.scss　スプライト（自動生成）
│ │ │ └─_sprite-mixin.scss　スプライト処理
│ │ ├─master.scss　各scssファイルの読み込み
│ │ ├─module
│ │ │ ├─_box.scss　ボックスモジュール
│ │ │ ├─_btn.scss　ボタンモジュール
│ │ │ ├─_hdg.scss　見出しモジュール
│ │ │ ├─_image.scss　画像モジュール
│ │ │ ├─_js.scss　JSで使用するクラス
│ │ │ ├─_lay.scss　レイアウトモジュール
│ │ │ ├─_link.scss　リンクモジュール
│ │ │ ├─_list.scss　リストモジュール
│ │ │ ├─_tbl.scss　テーブルモジュール
│ │ │ └─_text.scss　テキストモジュール
│ │ └─other
│ │ ├─_other.scss　その他、調整クラス
│ │ └─_top.scss　トップ
│ ├─sprite-materials　スプライト対象の画像置き場
│ │ ├─icon_arrow_01.png
│ │ ├─icon_twitter_01.png
│ └─spritesheet-templates
│ └─scss.template.mustache
├─css
│ └─master.css　コンパイルされたcssファイル
└─images
│ └─sprite
│ └─sprite.png　スプライトされた画像
└─index.html

■Node.jsをインストール

Node.jsをインストールしていない方は、次のサイトからインストーラ（推奨版）をダウンロードし、実行してください。

https://nodejs.org/ja/

インストールするとnodeコマンドとnpmコマンドが利用できるようになります。

■バッチファイル

よく、バッチファイルを叩くとか言いますが、このファイルをダブルクリックすることです。

そうすると、コマンドが実行されます。

各バッチファイルの用途は以下です。
npm install：nodemoduleのインストール
imagemin：画像を圧縮する
sprite：複数の画像を1枚にする

■imagemin

画像を圧縮したいとき（サーバーにアップするとき）にバッチファイルを叩く
imageディレクトリに入ってる画像ファイルが圧縮されます。

■sprite

spriteしたいとき（スライスしたときやCSS書いてる時）にバッチファイルを叩く

sprite-materialディレクトリに入ってる画像ファイルが一枚の画像になり
CSSに以下のように書くことで画像が表示できます。

spriteする画像はアイコンや装飾などの小さい画像です。
目的としてはリクエスト回数（画像ファイルの読み込み回数）を減らすことで読み込みのパフォーマンスを上げることです。

・ PC

@include sprite($icon_twitter_01);

※icon_twitter_01は画像ファイル名です。

・ スマホ（1/2サイズ）

スマホだと通常サイズではボケるので2倍のサイズでスライスして50％のサイズで表示します。（今回のポートフォリオではPCサイズにしてます）

    @include sprite-half($icon_twitter_01);

ポートフォリオ

以下よりダウンロードしてください。
https://hoshi-log.com/portfolio-template1.1.zip

portfolioの簡易テンプレートです。

モジュールの概念を用いてコーディングしているため、そちらも参考にしつつ、オリジナルのportfolioを完成させてみてください。

具体的には、以下変更・追加することでオリジナルのポートフォリオができるかと思います。

■ボタンのマウスオーバーアニメーション

下記などを参考にしてみてください。

https://codepen.io/funclur/pen/LxXXwa

https://codepen.io/funclur/pen/GvXBJy

■カラー

下記などを参考にしてみてください。

http://photoshopvip.net/72189

■その他コンテンツ

スキルセットなどのコンテンツを増やしてもいいと思います。

gulpのテンプレートファイルを使用して、ポートフォリオを模写するのも学習として身につくので時間に余裕がある方は是非やってみてください。

ポートフォリオを作る上での参考になる記事を下記に貼りますので良ければ参照してみてください。

エンジニアがポートフォリオを作る上で必要なこと・やってはいけないこと

不明点があればTwitterにDMください。

https://twitter.com/funclur_01/