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をインストールしていない方は、次のサイトからインストーラ（推奨版）をダウンロードし、実行してください。
インストールすると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
■カラー
下記などを参考にしてみてください。
■その他コンテンツ
スキルセットなどのコンテンツを増やしてもいいと思います。
gulpのテンプレートファイルを使用して、ポートフォリオを模写するのも学習として身につくので時間に余裕がある方は是非やってみてください。
ポートフォリオを作る上での参考になる記事を下記に貼りますので良ければ参照してみてください。
エンジニアがポートフォリオを作る上で必要なこと・やってはいけないこと
不明点があればTwitterにDMください。