このレポジトリは移行しました。
こっちのhttps://github.com/bom-shibuya/env_devの方を使うぞ。
TOKYO SHIBUYA DEVはホームページ手作り用キットです。
完全に個人目線で開発をしていますが、ありきたりな構成ではあるので、cloneしてくればだれでもすぐに開発が始められるでしょう。
-
= 7.0.0
他でも動くと思うけど、動作してるのは7.5.0
- yarn
入っていればyarnで、なければhomebrewなりでyarnを落としてくるか、npm iでも叩きましょう。おそらくそれでも入ってくると思います。
-
gulp
- pug -- htmlをどうこうするのに
- gulp-file-include -- pug使わないときのために一応置いてる。
- sass(scssでない)
- pleeease -- cssをいい感じに
- webpack3 -- jsをどうこうするのに
- imagemin -- 画像圧縮
- browser-sync -- ローカルホスト立ち上げ用
-
babel
- env
- babel-plugin-transform-object-rest-spread
- babel-polyfill
大まかには以上で、詳しいことはpackage.jsonで
css
- TOKYO SHIBUYA RESET -- 僕が作った全消しリセット
js
- jquery -- どこでも使えるようにしてある
- modernizr -- touch eventだけ
- gsap
- imagesloaded
- webfontloader
開発タスク -- watch
$ yarn start
開発タスク -- 吐き出しだけ
$ yarn run build
eslint
$ yarn run lint
リリースタスク
$ yarn run release
リリースされたものの確認
$ yarn run server
ディレクトリは以下
app -- _release リリースフォルダ
| ├ dest ステージング
| ├ src 開発
| ├ assets
| ├ js
| ├ img
| ├ sass
| ├ lib
| ├ modules...
|
package.json ...
ディレクトリはpackage.jsonとどう階層においてあるDirectoryManager.jsをgulpfileとwebpack configで使っています。
それぞれ、pathの書き方が違うので、そこを柔軟にするために関数化して、必要なら引数を食わせることにしました。
ディレクトリ構成を変更する場合はそこも確認してみてください。
webpack configについて
現在主流なのはwebpack configをcommmon/dev/prodの3枚とかに分けることだとおもうのですが、今回は対して違いがないので、全て1枚のファイルにまとめています。そしてオブジェクトにぶら下げてわたすことで、gulpで読み込むときにどの設定を読み込むかを分けています。 現状2パターンあります。(dev/prod)
webpack3とbabel
babelで jsのトランスパイルを行っていますが、webpack3の絡みのせいでややこしいことになっています。
なぜなら、webpack3ではes6 modules(import/export)をfalseにしないとtree shakingがおこなわれないけれど、設定ファイルである、gulpfile.babel.jsとwebpack.config.babel.jsではimportとか、いろいろ使いたいみたいな気持ちがあったからです。
つまり、.babelrcに設定ファイル用をかいているが、実際のjsをコンパイルするとき用のbabelの設定はwebpack.config内で別途記述しているということです。
もしかしたらなんとかするかもしれません。
eslint
FREE CODE CAMPのものをパクってきて使ってます。
inagaki氏のsassファイルからmixins, variablesのutils, colorファイルの構成を使用させてもらってます。
thunk you inagakiiii!!