gulp + Flexbox

奥山幸彦 / @FiNGAHOLiC

gulpって何❓

Automate and enhance your workflow

http://gulpjs.com/

具体的に何が出来るの？

  • AltCSSをCSSにコンパイル

  • AltJSをJavaScriptにコンパイル

  • 🐶 Pug（旧Jade）/Haml/SlimをHTMLにコンパイル

  • CSSスプライト画像の生成

  • CSS/JavaScript/HTML/画像等の圧縮

  • ローカルサーバーの起動

などなど…

Frontendの煩わしいタスクを

自動・効率化してくれるツール

ちなにみ似たような

Gruntはどうなの？

Google Trendsによる比較

https://goo.gl/ckjXx3​

gulpを使いましょう！

というわけで早速試してみよう！

https://goo.gl/0ZKWMk

# グローバルにgulp-cliをインストール
$ npm install --global gulp-cli

# 適当な作業ディレクトリに移動
$ cd /Users/fingaholic/Desktop/

# gulp用のディレクトリを作成
$ mkdir my-first-gulp && cd my-first-gulp

# package.jsonを作成する
$ npm init

# 生成されたpackage.jsonから不要な項目を削除しておく
{
  "name": "my-first-gulp",
  "version": "1.0.0",
  "description": ""
}

# gulpfile.jsを作成
$ touch gulpfile.js
# gulpをインストール
$ npm i -D gulp

# gulpを実行
$ gulp

# defaultタスクを追加
$ vim gulpfile.js
var gulp = require('gulp');

gulp.task('default', function() {
});

# 再度gulpを実行してdefaultタスクが実行されるかを確認
$ gulp
[21:54:20] Using gulpfile ~/Desktop/my-first-gulp/gulpfile.js
[21:54:20] Starting 'default'...
[21:54:20] Finished 'default' after 77 μs

CoffeeScript化☕️

# coffee-scriptをインストール
$ npm i -D coffee-script

# 拡張子を.coffeeに変更
$ mv gulpfile.js gulpfile.coffee

# coffee scriptの記法に修正
$ vim gulpfile.coffee
gulp = require　'gulp'

gulp.task 'default', ->

gulpの準備が出来たので

AltCSSの変更を監視、

コンパイルしてみよう

今回はSassというAltCSSを使用

http://sass-lang.com/

というかSassって何❓

  • セレクタを入れ子にして記述出来る

  • 変数が使える

  • 四則演算が使える

  • 重複する記述を簡略化できる（mixin and extend）

  • モジュールごとにファイルを分割して管理出来る
    ※もちろんコンパイル時には1つのCSSファイルにまとめることが可能

などなど…

SassをCSSに変換するタスクを作ってみよう🎉

その前に

ローカルサーバーを用意😓

# 開発ディレクトリを作成、適当なHTMLを用意しておく
$ mkdir app && touch app/index.html

# gulp-connectをインストール
$ npm i -D gulp-connect

# connectタスクを追加
$ vim gulpfile.coffee
gulp = require 'gulp'
connect = require 'gulp-connect'

gulp.task 'connect', ->
  connect.server
    root: 'app'
    livereload: true

# ローカルサーバーを起動してみる
$ gulp connect
# gulp-sassをインストール
$ npm i -D gulp-sass

# Sass用の開発ディレクトリを作成してmain.scssを用意
$ mkdir -p app/assets/css/_src　&& touch app/assets/css/_src/main.scss

# sassタスクを追加
$ vim gulpfile.coffee
gulp = require 'gulp'
sass = require 'gulp-sass'
connect = require 'gulp-connect'

gulp.task 'connect', ->
  connect.server
    root: 'app'
    livereload: true

gulp.task 'sass', ->
  gulp.src './app/assets/css/_src/main.scss'
  .pipe sass()
  .pipe gulp.dest './app/assets/css'


# scssを編集
$ vim app/assets/css/_src/main.scss
body {
  background: #000;
}

# ローカルサーバーを起動して変更が反映されているかを確認
$ gulp connect && gulp sass

# defaultタスク起動時にローカルサーバーを起動しておき、
# scssの変更を監視して変更があればコンパイルするようにする
$ vim gulpfile.coffee
gulp = require 'gulp'
sass = require 'gulp-sass'
connect = require 'gulp-connect'

gulp.task 'connect', ->
  connect.server
    root: 'app'
    livereload: true

gulp.task 'sass', ->
  gulp.src './app/assets/css/_src/main.scss'
  .pipe sass()
  .pipe gulp.dest './app/assets/css'

gulp.task 'default', ['connect', 'sass'], ->
  gulp.watch './app/assets/css/_src/main.scss', ['sass']

ここからFlexbox❤️

ちなみにFlexboxって何❓

CSS3 Flexible Box (可変ボックス)、または flexbox は、ページレイアウトを様々なスクリーンサイズやディスプレイデバイスに適応しなければならない場合に、ページ上の要素が指定した通りに配置されるレイアウトモードです。多くのアプリケーションにおいて、flexible box モデルは、float を使わず、そして flex container のマージンがそのコンテンツのマージンを相殺することも無く、block モデルを超えるための手段を提供します。

https://goo.gl/qvxkQ5​

レイアウト実装の半分近くは

このプロパティを使用することで実装可能かも

その前にちょっとした準備😭

  • ブラウザでは全HTML要素に対して

    デフォルトのCSSが設定されているので、

    ある程度は設定を統一しておく必要がある

    ※しかもブラウザ毎に設定が異なる要素もある

  • ブラウザによっては特定のCSSプロパティに対して、

    ベンダープレフィックスを付与しなければ、

    設定が有効にならない場合がある

いちいち覚えていられない😡

PostCSSに任せましょう🎉

PostCSSって何❓

PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

https://github.com/postcss/postcss​

# gulp-postcssをインストール
$ npm i -D gulp-postcss

# PostCSSのプラグインをインストール
$ npm i -D postcss-normalize
$ npm i -D autoprefixer

# sassタスクにnormalizeとautoprefixerを組み込む
$ vim gulpfile.coffee
gulp = require 'gulp'
sass = require 'gulp-sass'
postcss = require 'gulp-postcss'
connect = require 'gulp-connect'

normalize = require 'postcss-normalize'
autoprefixer = require 'autoprefixer'

gulp.task 'connect', ->
  connect.server
    root: 'app'
    livereload: true

gulp.task 'sass', ->
  processors = [
    normalize
    autoprefixer(
      # https://github.com/ai/browserslist
      # http://yokotakenji.me/log/unknown/5378/
      browsers: 'last 2 version'
    )
  ];
  gulp.src './app/assets/css/_src/main.scss'
  .pipe sass()
  .pipe postcss processors
  .pipe gulp.dest './app/assets/css'

gulp.task 'default', ['connect', 'sass'], ->
  gulp.watch './app/assets/css/_src/main.scss', ['sass']

やっと準備が出来たので、

早速Flexboxを使って

UIを実装してみよう👯

コイツ

※とは言え画像まで設定してると

本題から外れるので、エリアのみ実装

こんな感じで

RealTime-Coding🐰

おつかれちゃん🐰

Thanks!

gulp + Flexbox

By Okuyama Yukihiko

Made with Slides.com

gulp + Flexbox

  • 264

More from Okuyama Yukihiko