log > Webサイト作るときに最初に使うやつ作ってた

Webサイト作るときに最初に使うやつ作ってた

近々、Webサイトを作る予定なのだが、gulp含めいろいろな使い方をすっかり忘れているので、試しにWebサイトを作る前にスターターキットというか、ボイラープレートを準備することになった。

とりあえず、(Node.js+npm)+gulp+EJS+Stylus+Browserify+browser-syncにした。

Jade vs EJS

emmetがいつまでたってもアップデートでJadeに展開しないのと、Jadeの文法がミニマルすぎて覚えづらいので、HTMLを書けるEJSにしました。ECTはgulpfile書いてから気づいた。

Stylus vs Sass(SCSS)

npmだけで完結したい。というか、ruby+Sassが入ってなくてもいいので、Stylusにした。今からならPostCSSを選んでもいいと思った。だけど、StylusからPostCSSへの変換も当然のように出る気がしたので、焦って手を出さなくてもいいと思い、Stylusにした。

jQuery vs other

jQueryにある諸々の機能を全部備えたライブラリが、Zepto.jsくらいしかないので、jQueryの替わりはない。その替わり、必要な機能だけほかから使うことはできる。……のだが、fetchやPromise、document.querySelector、Velocity.js、とかで足りるとしても、ホームページ作るのに使って保守する人が使えるのか考えるとjQueryでとりあえず作る。どうしてもDOMをいじるならVueやmithril、Reactなど使えばいい。

とかいろいろ悩んだ結果、jQueryのCDNへindex.ejsからリンクした。

jQueryをbrowserify+licensify+uglifyするとsizzleのライセンスが消える

上記のようなことがあったのでDownload jQuery | jQueryからcompressedを見たところ、ライセンス消えてるので問題ないと思う。

画像圧縮

gulp-imageminを使った。前にimageminを使ったときに謎のバグで画像を出力できなかったのだが、問題なく使えた。

size

という感じで、やっていった結果、node_modules以下が90MBになった。

$ du -k -s node_modules
89976	node_modules

そして、ES2015対応やったら100M超えるのでは、と思って今やったら超えた。(browserifyを使わないverも記述してあるため、babelifyだけではだめ。)

参考用リンク

参考にしたgulpfile