clover.blue

サイトを作り始める時の初期準備 2015

Data
2015/10/18
Tag

サイトを作り始めると時にいつも「どうしようかなぁ・・。」と迷って
とりあえずその時の最善だと思うものを用意してやってはいたのですが、

そろそろ「ちゃんと考えなおそう！」と思いたち
作りはじめる前にする準備とそれに伴うデフォルトのファイルを作ってみました。

GitHub: https://github.com/kamem/webSiteCreatePack

主な内容

  1. sass,compassはBundlerを使ってプロジェクトごとに管理。
  2. jsのパッケージ管理はnpmで主に管理して、npmで管理しきれないものに関してはbowerを使う。（好みで＾＾；）
  3. jsはjsxの場合はwebpack,babelを使い。jsの場合は生のjsを使う。
  4. 作業フォルダと公開フォルダを分けて公開フォルダはバージョン管理しないことで二重管理をさける。

必須

  1. Node (最新版推奨)

  2. Gulp

    npm install -g gulp

  3. bower

  4. Ruby

  5. Bundler

フォルダ構成

├ root (公開用)
└ src (作業用)
    ├ css
    ├ js
    └ img

src（作業用）フォルダで作業した内容をgulpでwatchしてroot（公開用）

rootはバージョン管理をしないように.gitignore内で省いています。
src側で作業しroot側で作業しないようにします。

フォルダ構成の名前を変えたい場合

gulpfile_settings.jsの内容を書き換えてください。

準備

jsの準備

jQueryなど必要なjsがあればpackage.jsonに記述するか。
もしくはbower.jsonに記述してください。

個人的にはnpmで管理できる範囲であればpackage.jsonに書き、
npmにないものであればbower側に記述するように使い方を分けています。
フロント側で必要なファイルはbowerで一括管理も良いかなと思っています。

package.json

"dependencies": {
    "jquery": "",
    "react": "",
    "react-router": ""
}

bower.json

"dependencies": {
    "google-code-prettify": "",
}

それぞれプロジェクトを始める際にバージョン指定をしてください。
空の状態だと最新がダウンロードされますが、
時間がたち最新バージョンが変わった場合には正常に動作しなくなってしまう可能性があるためです。

バージョンをひとつひとつ設定するのがめんどくさい場合。

下記を使ってnode_modulesをインストールするとpackage.jsonに現在の最新のバージョンが自動で指定できます。

scssの準備

自分で使っているscssファイルをsrc/css内に入れてください。
自分の場合bowerでinstallしてcpで移動しています。

bower install https://github.com/kamem/compass.default.git
cp bower_components/compass.default/sass/* src/css

postcssを使いたい場合はgulpfile_settings.jsを修正してscssではなくcssをwatchするようにします。

settings.watch.css.files = settings.watch.css.dir + '**/*.css';

Gemfileを確認しておきましょう。（sass,compassのバージョンを指定）

source "https://rubygems.org"

gem 'sass', '3.4.0.rc.3'
gem 'compass', '1.0.3'

ファイルを生成

  1. package.jsonのnode_modulesをinstall

    sudo npm install

  2. Gemfileに従い、sass,compassをinstall

    bundle install

  3. bower.jsonを使ってjsをダウンロードしたい場合

    bower install

作業

開始

gulp

スプライトファイルの制作

// "src/img/sprite/**/*.png"内のファイルをスプライト化
gulp sprites

src/img/sprite/内にsprite-**.pngというファイルがフォルダの数分生成されます。
src/css内にsrc/img/sprite/以下のフォルダの数分のscssの設定ファイルが生成されます。

ex) numフォルダの場合

sprite-num.png
_num.scss

svgからfontの制作

// "src/font/**/*.svg"内のファイルをfont化
gulp svgfonts

src/font/内にfontがフォルダの数分生成されます。
src/css内にsrc/font/以下のフォルダの数分のscssの設定ファイルが生成されます。
fontの内容を確認したい場合はsrc/css/font/sns_fontlist.htmlを見るとfont一覧を確認できます。

fontの使い方

@import "font/_name";

.test {
    font-family: $name-test; //変数で文字コードを取ってくることができます。
    //(フォルダ名 - ファイル名)
}

吐き出すscssの内容を変えたい場合はsrc/css/font/templates/css.scssを編集してください。

実作業

html

useminを使っています。

<!-- build:js js/common.js -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../bower_components/google-code-prettify/src/prettify.js"></script>
<!-- endbuild -->

root/js/common.jsとしてjquery.js prettify.jsをまとめたファイルが生成されます。
htmlはroot/に下記ように変換され出力されます。

<script src="js/common.js"></script>

js

jsxと拡張子をつけることによって、webpackとbabelを使えるようにしています。
webpackとbabelを使わない場合は拡張子をjsにしてください。

確認方法

localhost:8888 で確認できます。

公開

  • CSS,JSの圧縮

    gulp build --minify true

公開前に上記を実行することでroot内に圧縮されたファイルが出来上がります。

こんな感じで今後サイトを作り始める際はやっていこうかと思いました！
最近いろいろと移り変わりが激しいのでまた設定など変わっていくかと思いますがその都度更新などしていこうかと思います。

最近ではpostcssなど流行っているので試してみようかと思ったのですが
いま現状postcssを使おうと思うとエディタ側が対応しきれていない状況なのでちょっと使いづらいかなぁと思いました。
シンプルだし早いッて噂なので試してみたいなぁとは思っているのですが今後に期待です！