Web制作を秒ではじめたいのではじめてシェルスクリプト書いた
さくっとWeb制作用ディレクトリ作成
やりたいこと
WebページやWebアプリを作り始めるときにディレクトリをポチポチ右クリックで作っていくのが面倒臭い。 秒でコード書き始めたい。
できること
- src/内に scss、js、imagesディレクトリ生成
- src/scssフォルダ内にFLOCSS用のsassファイル生成。モジュールを統括するapp.scssも。
- dist/内にcss、jsディレクトリ生成
- index.html生成
.
├── ./dist
│ ├── ./dist/css
│ └── ./dist/js
├── ./index.html
└── ./src
├── ./src/images
├── ./src/js
└── ./src/scss
├── ./src/scss/app.scss
├── ./src/scss/foundation
│ ├── ./src/scss/foundation/_base.scss
│ └── ./src/scss/foundation/_reset.scss
├── ./src/scss/layout
│ ├── ./src/scss/layout/_footer.scss
│ ├── ./src/scss/layout/_header.scss
│ ├── ./src/scss/layout/_main.scss
│ └── ./src/scss/layout/_sidebar.scss
└── ./src/scss/object
├── ./src/scss/object/component
│ ├── ./src/scss/object/component/_button.scss
│ ├── ./src/scss/object/component/_dialog.scss
│ ├── ./src/scss/object/component/_grid.scss
│ └── ./src/scss/object/component/_media.scss
├── ./src/scss/object/project
│ ├── ./src/scss/object/project/_articles.scss
│ ├── ./src/scss/object/project/_comments.scss
│ ├── ./src/scss/object/project/_gallery.scss
│ └── ./src/scss/object/project/_profile.scss
└── ./src/scss/object/utility
├── ./src/scss/object/utility/_align.scss
├── ./src/scss/object/utility/_clearfix.scss
├── ./src/scss/object/utility/_margin.scss
├── ./src/scss/object/utility/_position.scss
├── ./src/scss/object/utility/_size.scss
└── ./src/scss/object/utility/_text.scss
こうなる
暫定使い方
#!/bin/sh echo "Webサイト作成の初期フォルダを生成します" #htmlファイルを作る touch index.html #ディレクトリをつくる mkdir -p src/images src/js src/scss #FLOCCS用ディレクトリをつくる 不要ならコメントアウトしてください cd src/scss mkdir -p foundation layout object/component object/project object/utility #FLOCSS用sassファイルを作成する cd foundation touch _base.scss _reset.scss cd ../layout touch _header.scss _footer.scss _main.scss _sidebar.scss cd ../object/component touch _button.scss _dialog.scss _grid.scss _media.scss cd ../project touch _articles.scss _comments.scss _gallery.scss _profile.scss cd ../utility touch _align.scss _clearfix.scss _margin.scss _position.scss _size.scss _text.scss cd ../../ # 統括ファイルを作成 touch app.scss cat <<EOS > app.scss // ========================================================================== // Foundation // ========================================================================== @import "foundation/_reset"; @import "foundation/_base"; // ========================================================================== // Layout // ========================================================================== @import "layout/_footer"; @import "layout/_header"; @import "layout/_main"; @import "layout/_sidebar"; // ========================================================================== // Object // ========================================================================== // ----------------------------------------------------------------- // Component // ----------------------------------------------------------------- @import "object/component/_button"; @import "object/component/_dialog"; @import "object/component/_grid"; @import "object/component/_media"; // ----------------------------------------------------------------- // Project // ----------------------------------------------------------------- @import "object/project/_articles"; @import "object/project/_comments"; @import "object/project/_gallery"; @import "object/project/_profile"; // ----------------------------------------------------------------- // Utility // ----------------------------------------------------------------- @import "object/utility/_align"; @import "object/utility/_clearfix"; @import "object/utility/_margin"; @import "object/utility/_position"; @import "object/utility/_size"; @import "object/utility/_text"; EOS cd ../.. #distフォルダを作成 mkdir -p dist/js dist/css
完全に相対パスで書いてるし、保守性よくないのでもうちょっと勉強してブラッシュアップしていきます。 とりあえずFLOCSSやり始めるのがめんどくせえ、という気持ちが薄れるのでよかったら使ってください。
いい拡張機能や、つよいエンジニアの方がつくったよいソースがあったら教えてください！開発始める時に、いつも同じフォルダ構成（srcとかdistとか）をぽちぽち作ってるんですけど、これを自動化するVSCode拡張機能なんてありますかね…？ググったけどみつからなかった。
— うかつ (@ukaprog) 2019年8月10日
いえ、シェルスクリプト作ればいいだけの話ですけども…
