コーディング作業ってスピード勝負な所ありますよね。。。
コーディングすればするほどパーツ的なものも増えるし、使い回せたらめっちゃ爆速でコーディングできるんじゃないか！？
ということで、重い腰を上げて環境構築の調整を。。。
js得意な人はejsがいいかもしれないけど、yukipanはpugが好き。インデント間違わなきゃ閉じ忘れとかないもん。パーツ化もできるし。
ググると親切丁寧なサイトに出会いました。
Gulp v4.0 でHTML5(Pug) + CSS3(Sass)の爆速コーディング環境構築
コピペすればいけるやーん！ステキすぎ！
ほぼコピペで使わせていただきます。ありがたや〜
目次
少しだけカスタマイズ
ほとんど変更しなくても使えるんだけど、ちょっとだけカスタマイズしたのでメモ。
gulpfile.js/index.jsを微調整
gulpfile.jsがindex.jsとmodules.jsで分けてあるのってステキ。
gulpfile.jsフォルダ内のindex.jsを変更。
使い回すときにportの番号を変えたかったからport追加。
//ビフォー
function bs() {
$.browserSync.init({
server: {
baseDir: path.dist,
},
notify: true,
xip: false,
});
}
//アフター
function bs() {
$.browserSync.init({
port: 5050,
server: {
baseDir: path.dist,
index: 'index.html'
},
open: 'external',// IPで開く
});
}あとはサイトにアップするときはcss・js・imgを一つのフォルダにまとめたいので出力先のdistの階層がdist/assetsになるよう調節。
//ビフォー
const path = {
src: './src',
dist: './dist',
};
.pipe(dest(`${path.dist}/css`))
//アフター
const path = {
src: './src',
dist: './dist',
distAssets: './dist/assets',
};
.pipe(dest(`${path.distAssets}/css`)) //出力先のパスを変更あとなんとなくimgはimagesにしたくて書き換えた。
//ビフォー
function img() {
return src(`${path.src}/img/**/**`)
.pipe($.changed(`${path.dist}/img/`))
.pipe(
$.imagemin({
optimizationLevel: 3,
})
)
.pipe(dest(`${path.dist}/img/`));
}
exports.img = img;
watch(`${path.src}/img/**`, img);
//アフター
function images() {
return src(`${path.src}/images/**/**`)
.pipe($.changed(`${path.distAssets}/images/`))
.pipe(
$.imagemin({
optimizationLevel: 3,
})
)
.pipe(dest(`${path.distAssets}/images/`));
}
exports.images = images;
watch(`${path.src}/images/**`, images);src/pugフォルダ内：_layout.pugの変更
//ビフォー
doctype html
html
head
meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover")
link(rel="stylesheet" href="css/main.min.css")
block title
title title
body
block content
script(src="./js/main.min.js")
//アフター
html
head
meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover")
link(rel="stylesheet" href="css/main.min.css")
block title
body
include inc/_header.pug
block content
include inc/_footer.puginc/_heaer.pugと_footer追加。metaの部分もパーツ化しようかな〜
includeっていうフォルダ名長いからincに変更した。
src/scss・jsフォルダ内：パーツ化
scssフォルダの中が、_rest.scssとmain.cssで、main.cssにrest.cssをimportする記述が書いてあった。
scssはパーツ化したいので、compo（componentの略）フォルダを作ってさらに細分化のフォルダを設置。それぞれのパーツを作って、main.scssにすべて集約する記述に書き換えた。
//ビフォー
@import 'reset';
.wrapper {
font-family: 'Courier New', Courier, monospace;
display: flex;
justify-content: center;
align-items: center;
height: 70vh;
h1 {
font-weight: 400;
}
}
//アフター
@charset "UTF-8";
@import
"compo/base/reset",
"compo/base/base",
// parts
"compo/parts/common",
"compo/parts/header",
"compo/parts/footer",
// page
"compo/page/page";これでbtn・card・animationとかのパーツを増やしたり、いらないscssは読み込まないようにしたり、好きにできる。
jsは、フォルダ内にmain.jsのみ入っていたので、上に戻るボタンやグロナビメニューなど、パーツ化したjsデータを置いた。
念のためdistのjsフォルダを見てみると、ちゃんと「main.min.js」にまとまって、圧縮された状態で入っていた。ステキ！
まとめ：Gulp4は快適爆速コーディングができる！
イチからの設定は大変だったりするけど、ググったら親切な人がそのまま使えるタスクランナーを公開してくれていたりするので、使ったことない人も難しそうとか思わず、まずコピペして使ってみたらどうだろうか。
マジでコーディング速度が変わる。感動する。
使ってみてから自分の使いやすい環境を構築していったらいいのかなーと思う。
めちゃめちゃ快適だしパーツ化して使い回せるし。パーツが増えるといちいち作る手間なく微調整でいい安心感があるし、そもそも自分のストックが増えていくのが楽しい。
