フロントエンドの開発効率を劇的に上げる、現場で使われているオリジナルスターターキット・テンプレート

スポンサーリンク

どうも、イソップです。

Web制作の現場で実際に使われているものを、ぼくの知っている限りまとめてみます。

kayac-html5-starter

面白法人カヤックさんで使われているWebスターターキット。
構成は必要最小限という感じ。

HTMLテンプレート: pug
CSSメタ言語: Sass(scss)
Javascript: ES2015(ECMAScript 6)

  • gulp.js
  • Babel
  • browserify
  • pleeease
  • browser-sync
  • jQuery
  • Reset CSS

リポジトリ

frontplate

LIGのCTO林さんが作られているフロントエンドテンプレート。
ユニットテストが行えたり、CLIで操作出来たりと盛りだくさんな作りになっています。

構成は以下。

HTMLモジュール(ejs)
SASS(node-sass)
ES2015(babel)

  • SASSLint(sass-lint)
  • スタイルガイド生成(frontnote)
  • JSモジュールバンドラー(webpack)
  • スプライト画像の作成とSassファイルの出力(spritesmith)
  • CSS/JSの圧縮と最適化(postcss-csso google-closure-compiler)
  • CSSのベンダープレフィックス付与自動化(autoprefixer)
  • ユニットテスト(karma jasmine)
  • LiveReload(browser-sync)
  • ESLint(eslint)
  • HTMLHint(htmlhint)

リポジトリ

現在情報募集中です

まだ2つしか無い。。他にも絶賛募集中です!載せて欲しいものなどありましたら、お気軽にご連絡ください。
※現在公開されているものに限ります。


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。