CLOVER🍀

That was when it all began.

Foundationのテンプレートページを、GulpとBowerを使って表示するまで

少し、フロントエンドの勉強をしていこうと思いまして。

ド素人ですが、今回はCSSフレームワークのさわりを試してみました。

CSSフレームワークといえばTwitter Bootstrapかと思いますが、今回はFoundationにしてみました。

Zurb Foundation
http://foundation.zurb.com/

なんとなく、Twitter Bootstrap以外で試してみたかっただけで、Bootstrapに対する何か深い意図があるわけではありません。

新規プロジェクト?の作成

まずは環境の準備からですが、正直なところ今のフロントエンドの事情はよくわかっていません…。これからキャッチアップですね。

今回は、GulpとBowerでやることにします。

Getting Started With Foundation CSS
http://foundation.zurb.com/docs/css.html

まずはnpmでGulpとBowerをインストール。

$ npm install -g gulp bower

「npm init」から、いろいろインストール。

$ npm init
$ npm install gulp gulp-filter gulp-webserver main-bower-files del --save-dev

bower init。

$ bower init

Foundationをインストール。

$ bower install foundation --save

gulpfile.jsを、こんな感じで作成。
gulpfile.js

var gulp = require("gulp");
var webserver = require("gulp-webserver");
var gulpFilter = require("gulp-filter");
var mainBowerFiles = require("main-bower-files");
var del = require("del");

gulp.task("webserver", function() {
    gulp
        .src("public")
        .pipe(webserver({
            port: 8000,
            livereload: true
        }));
});

gulp.task("clear-libs", function() {
    del.sync("public/js/vendor");
    del.sync("public/css/vendor");
});

gulp.task("bower", ["clear-libs"], function() {
    var jsFilter = gulpFilter("**/*.js");
    var cssFilter = gulpFilter("**/*.css");

    return gulp
        .src(mainBowerFiles())
        .pipe(jsFilter)
        .pipe(gulp.dest("public/js/vendor"))
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(gulp.dest("public/css/vendor"))
        .pipe(cssFilter.restore());
});

gulp.task("default", ["webserver", "bower"]);

これが今に合っているのか、よくわかりませんが…。

bower.jsonもちょっと変更。
bower.json

{
  "name": "foundation-getting-started",
  "version": "0.0.1",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "foundation": "~5.5.2"
  },
  "overrides": {
    "foundation": {
      "main": [
        "css/*",
        "js/foundation.min.js",
        "js/vendor/*"
      ]
    }
  }
}

とりあえず、これでいってみます。

ページを作ってみる

とりあえず、Getting Startedに載っていた内容を元に、ベースのページを作ってみます。
public/getting-started.html

<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >

  <head>
  <meta charset="utf-8">
  <!-- If you delete this meta tag World War Z will become a reality -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundation 5</title>

  <!-- If you are using the CSS version, only link these 2 files, you may add app.css to use for your overrides if you like -->
  <link rel="stylesheet" href="css/vendor/normalize.min.css">
  <link rel="stylesheet" href="css/vendor/foundation.min.css">

  <!-- If you are using the gem version, you need this only -->
  <link rel="stylesheet" href="css/app.css">

  <script src="js/vendor/modernizr.js"></script>

</head>
<body>

  <!-- body content here -->

  <script src="js/vendor/jquery.js"></script>
  <script src="js/vendor/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

Gulpでの設定に合わせて、スクリプトなどのパスはちょっと変えています。

で、Gulpを起動。

$ gulp

ポート8000で、サーバーが起動します。

ここで
http://localhost:8000/
にアクセスしても、まだ真っ白です。

テンプレートのレイアウトを当てはめてみる

続いて、Foundationのテンプレートのページから、適当なテンプレートを当てはめてみます。

HTML Templates
http://foundation.zurb.com/templates.html

今回は、Blogのテンプレートにしてみました。

「HTML」と書かれた部分をクリックすると、HTMLが表示されるので

これを、ペタッと先ほど作成したHTMLファイルの

<body>

  <!-- body content here -->

に続けて貼ってみます。もうひとつdivくらい入れた方がいい気もしますが…。

で、結果。

それっぽいの出ました!

参考)
webpackでbower使って外部ライブラリの依存解決する
http://qiita.com/mizchi/items/674c76104e1a0f8a68f4
GruntとgulpでBower環境を作る
http://create-something.hatenadiary.jp/entry/2014/07/27/204633