SlideShare a Scribd company logo
1 of 102
Download to read offline
gulp + sass で目指せ倍速コーディング
東区フロントエンド勉強会 2015年 第1回
本編
1
フロントエンド エンジニア
末包 俊道(すえかね)
http://excode.jp
エクスコード株式会社
東区フロントエンド勉強会 2015年 第1回
第1章 Sass
2
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
第1章 Sass
1. 概要
2. 公式サイト
3. 導入のメリット・デメリット
4. Sass の記法 (SCSS / SASS)
5. 主な機能
第2章 gulp
1. 概要
2. 公式サイト
3. ハンズオン
第3章 応用
1. いろんなプラグインを使ってみよう
2. gulpfile.js を分割して管理しやすくしよう
3
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
4
CSS を効率的に書くためのメタ言語と、その言語で記述
したファイルをCSSファイルへ変換するソフトウェア。
CSSにはない変数や配列を扱うことができ、セレクタの
ネスト(入れ子)により見通しの良いコーディングが可
能になります。
1. 概要
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
2. 公式サイト
5
http://sass-lang.com
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3. 導入のメリット・デメリット
6
メリット
• コードの見通しが良くなる
• 変数を使える
• 簡易な関数を使える
• よく使うコードを定義し再利用できる
• header, body, side, footer など個別ファイルに分割して管理できる
デメリット
• Sass の流儀に合わせてマークアップする必要がある
• コンパイルする環境を整えておく必要がある
• Windows 環境においては標準で Ruby がインストールされていないため
導入のハードルがやや高い
• Mac OSX のバージョンによっては旧バージョンの Ruby がインストール
されており、Ruby のバージョンアップに躊躇する
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
4. Sass の記法 (SCSS記法)
7
@mixin opacity($string) {

$opacityIE: $string * 100;
opacity: $string;

filter: alpha(opacity=$opacityIE);
}
.block {
a {
display: block;
background-color: rgba(black, .1);
color: blue;
text-decoration: none;
&:hover {
color: red;
text-decoration: underline;
img {
@include opacity(.8);
}
}
}
}
SCSS 記法 (.scss)
• ネットでよく見かける記法
• CSS を入れ子にした構造
• CSS を混在しても大丈夫
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
4. Sass の記法 (SASS記法)
8
=opacity($string)

$opacityIE: $string * 100
opacity: $string

filter: alpha(opacity=$opacityIE)
.block
a
display: block
background-color: rgba(black, .1)
color: blue
text-decoration: none
&:hover
color: red
text-decoration: underline
img
+opacity(0.8)
SASS 記法 (.sass)
• Sass本来の記法
• セミコロン不要
• { } 波カッコ不要
• @mixin は =
• @include は +
• インデントで親子関係を示す
• コロン「:」の後に必ず半角スペースが必要
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
4. Sass の記法 (SCSS/SASSの比較)
9
@mixin opacity($string) {

$opacityIE: $string * 100;
opacity: $string;

filter: alpha(opacity=$opacityIE);
}
.block {
a {
display: block;
background-color: rgba(black, .1);
color: blue;
text-decoration: none;
&:hover {
color: red;
text-decoration: underline;
img {
@include opacity(.8);
}
}
}
}
=opacity($string)

$opacityIE: $string * 100
opacity: $string

filter: alpha(opacity=$opacityIE)
.block
a
display: block
background-color: rgba(black, .1)
color: blue
text-decoration: none
&:hover
color: red
text-decoration: underline
img
+opacity(0.8)
SCSS 記法 (.scss) SASS 記法 (.sass)
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
本勉強会では SASS 記法で進めます
10
@mixin opacity($string) {

$opacityIE: $string * 100;
opacity: $string;

filter: alpha(opacity=$opacityIE);
}
.block {
a {
display: block;
background-color: rgba(black, .1);
color: blue;
text-decoration: none;
&:hover {
color: red;
text-decoration: underline;
img {
@include opacity(.8);
}
}
}
}
=opacity($string)

$opacityIE: $string * 100
opacity: $string

filter: alpha(opacity=$opacityIE)
.block
a
display: block
background-color: rgba(black, .1)
color: blue
text-decoration: none
&:hover
color: red
text-decoration: underline
img
+opacity(0.8)
SCSS 記法 (.scss) SASS 記法 (.sass)
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5. 主な機能
11
1. コメントアウト
2. 変数と計算式
3. ネスト(入れ子)
4. & 親セレクタ参照
5. @mixin (=) と @include (+)
6. #{…} 変数に入った値を文字列をして出力
7. @extend 定義されたスタイルの読込
8. @import 外部ファイル読込
9. @if @else 条件分岐
10.@for ループ
11.@each ループ
12.組み込み関数(一部紹介)
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-1. コメントアウト
12
/* text */ ← CSSにも反映されるコメント
// text ←この行はCSSに反映されない
// ←この行以降のネストはCSSに反映されない
text
h1
/* コメント */
font-size: 24px
a
//color: red
color: blue
h2
font-size: 21px
//
a
color: blue
h1 {
/* コメント */
font-size: 24px;
}
h1 a {
color: blue;
}
h2 {
font-size: 21px;
}
SASS (.sass) CSS (.css)
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-2. 変数と計算式
13
$size: 13px
$base-color: white
h1
font-size: $size * 2
color: $base-color
p
font-size: $size
small
font-size: $size / 2
color: $base-color * 0.3
small.floor
font-size: floor($size / 2)
h2 {
font-size: 26px;
color: white;
}
p {
font-size: 13px;
}
small {
font-size: 6.5px;
color: #4d4d4d;
}
small.floor {
font-size: 6px;
}
SASS (.sass) CSS (.css)
• 加算, 減算 … x + n, x - n
• 積算, 除算 … x * n, x / n
• 切り上げ … ceil()
• 切り捨て … floor()
• 四捨五入 … round()
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-3. ネスト(入れ子)
14
.header
position: relative
max-width: 360px
height: 44px
margin: 0 auto
.logo
display: inline
a
position: absolute
top: 0
left: 0
display: block
width: 60px
height: 44px
.header {
position: relative;
max-width: 360px;
height: 44px;
margin: 0 auto;
}
.header .logo {
display: inline;
}
.header .logo a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 60px;
height: 44px;
text-decoration: none;
}
SASS (.sass) CSS (.css)
1階層目
3階層目
2階層目
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-4. 親セレクタ参照
15
a
&:hover
…
&:before
…
section
&>div
…
&~div
…
&+div
…
p
div &
&.class
…
a:hover {
…
}
a:before {
…
}
section > div {
…
}
section ~ div {
…
}
section + div {
…
}
div section p.class {
…
}
SASS (.sass) CSS (.css)
子セレクタ
隣接セレクタ
間接セレクタ
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-5. @mixin (=) と @include (+)
16
$baseFontSize: 10px
=font-size($string)
font-size: $baseFontSize * $string
a
+font-size(1.2)
a {
font-size: 12px;
}
SASS (.sass) CSS (.css)
@mixin
@include
【参考】SCSS の場合は以下の様に記述します
$baseFontSize: 10px;
@mixin font-size($string) {
font-size: $baseFontSize * $string;
}
a {
@include font-size(1.2);
}
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-6. #{…} 変数に入った値を文字列をして出力
17
=opacity($string)
$opacityIE: $string * 100
opacity: #{$string}

filter: alpha(opacity=#{$opacityIE})
a
&:hover
+opacity(0.8)
a:hover {
opacity: 0.8;
filter: alpha(opacity=80);
}
SASS (.sass) CSS (.css)
@mixin
@include
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-7. @extend 定義されたスタイルの読込
18
.buttonClass
display: block
color: white


%buttonPlaceholder
display: block
color: red
a
&.searchButton
@extend .buttonClass
width: 50%
a

&.cartButton
@extend %buttonPlaceholder
width: 80%
.buttonClass {
display: block;
color: white;
}
a.searchButton {
display: block;
color: white;
width: 50%;
}
a.cartButton {
display: block;
color: red;
width: 80%;
}
SASS (.sass) CSS (.css)
プレースホルダー プレースホルダーはCSSに書き出されません
クラス
プレースホルダーを読み込む
クラスを読み込む
読み込まれたクラス
読み込まれたプレースホルダー
クラス
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-8. @import 外部ファイル読込
19
@import header
.body
p
margin: 1em auto
a
color: blue
.header p.logo {
float: left;
width: 160px;
}
.header p.logo a img {
width: 100%;
}
.body p {
margin: 1em auto;
}
.body p a {
color: blue;
}
SASS (style.sass) CSS (style.css)
.header
p
&.logo
width: 160px
float: left
a
img
width: 100%
SASS (_header.sass) ヘッダー
外部ファイル化したヘッダーを読み込む
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-9. @if @else 条件分岐
20
$type: sample
p
@if $type == sample
color: red
@else if $type == test
color: blue
@else
color: black
p {
color: red;
}
SASS (.sass) CSS (.css)
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-10. @for ループ
21
li
position: absolute
@for $i from 1 through 3
&:nth-child(#{$i})
left: 40px * $i
li {
position: absolute;
}
li:nth-child(1) {
left: 40px;
}
li:nth-child(2) {
left: 80px;
}
li:nth-child(3) {
left: 120px;
}
SASS (.sass) CSS (.css)
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-11. @each ループ
22
$images: apple banana orange
p
@each $img in $images
&.#{$img}
backgeound-image: url(/img/#{$img}.png)
p.apple {
backgeound-image: url(/img/apple.png);
}
p.banana {
backgeound-image: url(/img/banana.png);
}
p.orange {
backgeound-image: url(/img/orange.png);
}
SASS (.sass) CSS (.css)
配列を定義(スペースまたはカンマ区切り)
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
5-12. 組み込み関数
23
$color: #3366FF
p
color: $color
// 明度 lighten, darken
&.lighten
color: lighten($color, 20%)
// 彩度 saturate, desaturate
&.saturate
color: saturate($color, 20%)
// RGB+アルファ
&.rgba
color: rgba($color, 0.8)
$colors: red green blue
p
&.color2
color: #{nth($colors,2)}
p {
color: #36f;   ⬛
}
p.lighten {
color: #99b3ff; ⬛
}
p.saturate {
color: #1f5cff; ⬛
}
p.rgba {
color: rgba(51, 102, 255, .8);
}
p.color2 {
color: green;
}
SASS (.sass) CSS (.css)
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
おまけ① BEM (Block, Element, Modifier) 記法を使いたい
24
.hoge
&__element1
width: 100px
&_modifier
color: red
&__element2
width: 50%
&_modifier
color: blue
.hoge__element1 {
width: 100px;
}
.hoge__element1_modifier {
color: red;
}
.hoge__element2 {
width: 50%;
}
.hoge__element2_modifier {
color: blue;
}
SASS (.sass) CSS (.css)
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
おまけ② タイプ数を少なくしたい
25
=w($s: auto)
width: unit($s)
@function unit($s)
…
@return $rs
.container
+relative
+pl(2em)
+left
&:after
+absolute
+t(0)
+l(0)
content: ''
+block
+w(20)
+h(80%)
.container {
position: relative
padding-left: 2em;
text-align: left;
}
.container:after {
position: absolute;
top: 0;
left: 0;
content: ''

display: block;
width: 20px;
height: 80%;
}
SASS (.sass) CSS (.css)
unit() という @function(独自関数)を作り
値に em や % が付いている場合はその単位、
値が数値の場合は px を返すものを用意。
unit() 関数は少し長いので、ここでは省略して
説明しています。
第1章 Sass
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
第2章 gulp
26
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
27
Node.js も用いたタスクの自動化ツール。
本勉強会では、ファイルを監視し、予め設定ファイル
で定義したタスクを自動的に実行させます。
1. 概要
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
2. 公式サイト
28
http://gulpjs.com/
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3. ハンズオン
29
<下準備>
1. 今回のディレクトリ構成
2. ディレクトリを準備
3. package.json を生成
<gulp設定>
4. 必要なプラグインを追加
5. gulpfile.js を作成
<gulp実行>
6. gulp sass:watch でファイルの変更を監視
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-1. 今回のディレクトリ構成
30
lesson
│ <開発用ディレクトリ>
├ develop
│ │ <.sass ディレクトリ>
│ └ sass
│ └ style.sass
│
│ <納品ファイル用ディレクトリ>
├ html
│ │ <.css ディレクトリ(自動生成)>
│ ├ css
│ │ └ style.css
│ │
│ └ index.html
│
└ 上記以外でgulpが必要とするファイル
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-2. ディレクトリを準備 (1/2)
31
> cd Desktop

または
> cd C:Usersユーザー名Desktop
デスクトップに移動
Windows の方
$ cd ~/Desktop
デスクトップに移動
Mac の方
$ mkdir lesson
新しくディレクトリ(フォルダ)を作成
$ cd lesson
作成したディレクトリに移動
> mkdir lesson
新しくディレクトリ(フォルダ)を作成
> cd lesson
作成したディレクトリに移動
今回は説明の都合上、デスクトップにハンズオン用のディレクトリを作成していただきます。
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-2. ディレクトリを準備 (2/2)
32
Windows の方 Mac の方
$ mkdir develop
$ mkdir develop/sass
$ mkdir html
ディレクトリを作成、css用ディレクトリは自動生成です
> mkdir developsass
> mkdir html
ディレクトリを作成、css用ディレクトリは自動生成です
$ touch develop/sass/style.sass
$ touch html/index.html
index.html と style.sass も作っておきましょう
> type nul developsassstyle.sass
> type nul htmlindex.html
index.html と style.sass も作っておきましょう
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-3. package.json を生成 (1/2)
33
> npm init
package.json を生成
Windows の方
$ npm init
package.json を生成
Mac の方
name (lesson)
…
{
…
}
対話形式で設定(enterを押すと省略して事項へ進む)
Is this ok? (yes)
これで良いか確認されるので enter
name (lesson)
…
{
…
}
対話形式で設定(enterを押すと省略して事項へ進む)
Is this ok? (yes)
これで良いか確認されるので enter
$ ls
develop html package.json
package.jsonが生成されていることを確認
> dir
<DIR> .
<DIR> ..
<DIR> develop
<DIR> html
256 package.json
package.jsonが生成されていることを確認
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-3. package.json を生成 (2/2)
34
package.json の中身を見てみよう
{
"name": "lesson",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
}
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
現在のディレクトリ構成
35
lesson
│ <開発用ディレクトリ>
├ develop
│ │ <.sass ディレクトリ>
│ └ sass
│ └ style.sass
│
│ <納品ファイル用ディレクトリ>
├ html
│ │
│ └ index.html
│
└ package.json
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
36
これで下準備は完了です
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-4. 必要なプラグインを追加
37
http://gulpjs.com/plugins/
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-4. 必要なプラグインを追加
38
後ほどこのコマンドを実行します
第2章 gulp
https://www.npmjs.com/package/gulp-sass/
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-4. 必要なプラグインを追加
39
> npm install gulp-sass --save-dev
gulp-sass を追加(先ほどのページ)
Windows の方
$ npm install gulp-sass --save-dev
gulp-sass を追加(先ほどのページ)
Mac の方
$ ls
develop html node_modules
package.json
node_module ディレクトリが生成されていることを確認
> dir
<DIR> .
<DIR> ..
<DIR> develop
<DIR> html
<DIR> node_modules
256 package.json
node_module ディレクトリが生成されていることを確認
> npm install gulp --save-dev
gulp を追加
$ npm install gulp --save-dev
gulp を追加
追加された gulp プラグインは、node_module ディレクトリに格納され、package.json に追記されます
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-4. 必要なプラグインを追加
40
package.json の中に gulp-sass が追記されています
{
"name": "lesson",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp-sass": "^2.0.4"
}
}
この行が追加されました
※ gulp は ̶save-dev オプションを付けていないので、package.jsonには追記されません
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-5. gulpfile.js を作成
41
package.json と同じ階層に gulpfile.js を作成します
> type nul > gulpfile.js
gulpfile.js を作成
Windows の方
$ touch gulpfile.js
gulpfile.js を作成
Mac の方
$ ls
develop gulpfile.js html
node_modules package.json
gulpfile.js が生成されていることを確認
> dir
<DIR> .
<DIR> ..
<DIR> develop
0 gulpfile.js
<DIR> html
<DIR> node_modules
256 package.json
gulpfile.js が生成されていることを確認
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-5. gulpfile.js を作成
42
先ほどの gulp-sass のページを見て gulp-sass の動作に必要な記述を書いていきます
この部分を参考に
書いていきます
第2章 gulp
https://www.npmjs.com/package/gulp-sass/
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-5. gulpfile.js を作成
43
先ほどのページの内容を gulpfile.js にそのままコピペします
gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-5. gulpfile.js を作成
44
今回のディレクトリ構成に合わせて編集します
gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
• Sass の拡張子は .sass
• Sass のディレクトリは、gulpfile.js からの相対パス ./develop/sass
• CSS のディレクトリは、gulpfile.js からの相対パス ./html/css
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-5. gulpfile.js を作成
45
編集後はこの様になります
gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./develop/sass/**/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./html/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./develop/sass/**/*.sass', ['sass']);
});
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
現在のディレクトリ構成
46
lesson
│ <開発用ディレクトリ>
├ develop
│ │ <.sass ディレクトリ>
│ └ sass
│ └ style.sass
│
├ gulpfile.js
│
│ <納品ファイル用ディレクトリ>
├ html
│ │
│ └ index.html
│
├ node_modules
└ package.json
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
47
gulpfile.jsの設定も完了しました
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-6. gulp sass:watch を実行してファイルを監視
48
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
gulp sass:watch タスクを実行してみます
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
gulp sass:watch タスクを実行してみます
watch モードに入りました
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-6. gulp sass:watch を実行してファイルを監視
49
style.sass
develop/sass/style.sass を編集・保存してみよう
h1
margin: 0 auto
a
color: red
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
以下のように、sassが実行されていれば成功です
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
3-6. gulp sass:watch を実行してファイルを監視
50
style.css
html/css/style.css を確認してみよう
h1 {
margin: 0 auto; }
h1 a {
color: red; }
第2章 gulp
書式が気になります
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
現在のディレクトリ構成
51
lesson
│ <開発用ディレクトリ>
├ develop
│ │ <.sass ディレクトリ>
│ └ sass
│ └ style.sass
│
├ gulpfile.js
│
│ <納品ファイル用ディレクトリ>
├ html
│ │ <.css ディレクトリ(自動生成)>
│ ├ css
│ │ └ style.css
│ │
│ └ index.html
│
├ node_modules
└ package.json
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
52
ひとまず gulp + Sass の環境は整いました
第2章 gulp
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
53
第3章 応用
第3章 応用
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
54
1. プラグインを追加してみよう
1. gulp-csscomb で出力したCSSを整形
2. gulp-autoprefixer でベンダー・プレフィクスを追加
3. gulp-plumber でエラー時に処理が中断されないように
2. Sass コーディングに役立つプラグイン
第3章 応用
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
1-1. gulp-csscomb で出力したCSSを整形
55
style.css
html/css/style.css の書式が気になります
h1 {
margin: 0 auto; }
h1 a {
color: red; }
style.css
h1 {
margin: 0 auto;
}
h1 a {
color: red;
}
求める形はこっち
↓
第3章 応用
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
56
Windows の方 Mac の方
一旦、watch から抜けてプラグインと設定を追加をします
[13:09:14] Starting 'sass'...
[13:09:14] Finished 'sass' after 980 μs
^C
$
ctrl + c を押し、一旦タスクを終了します
[13:09:14] Starting 'sass'...
[13:09:14] Finished 'sass' after 980 μs
^C
>
ctrl + c を押し、一旦タスクを終了します
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
57
出力する CSS を好みの書式に整形します
gulp-csscombhttps://www.npmjs.com/package/gulp-csscomb
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
58
プラグインページの内容を参考に追加しましょ
う。
1. インストール
npm install gulp-csscomb --save-dev
2. タスクを追記
var csscomb = require('gulp-csscomb');
3. タスクを .pipe() で繋げる
.pipe(csscomb())
https://www.npmjs.com/package/gulp-csscomb
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
59
Windows の方 Mac の方
> npm install gulp-csscomb --save-dev
gulp-csscomb を追加
$ npm install gulp-csscomb --save-dev
gulp-csscomb を追加
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
60
gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
gulp.task('sass', function () {
gulp.src('./develop/sass/**/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(gulp.dest('./html/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./develop/sass/**/*.sass', ['sass']);
});
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
61
gulp-csscomb ジェネレーターでお好みの設定を作成します
http://csscomb.com/config
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
62
出来上がった設定を .csscomb.json というファイル名で
gulpfile.js と同じ階層に保存します
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
63
lesson
├ .csscomb.json ※MacのFinder上では不可視ファイルになります
│
│ <開発用ディレクトリ>
├ develop
│ │ <.sass ディレクトリ>
│ └ sass
│ └ style.sass
│
├ gulpfile.js
│
│ <納品ファイル用ディレクトリ>
├ html
│ │ <.css ディレクトリ(自動生成)>
│ ├ css
│ │ └ style.css
│ │
│ └ index.html
│
├ node_modules
└ package.json
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
64
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
あたらめて gulp sass:watch タスクを実行
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
あたらめて gulp sass:watch タスクを実行
watch モードに入りました
gulp sass: watch でファイルを監視します
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
65
style.sass
先ほどと同じように develop/sass/style.sass を保存してみてください
h1
margin: 0 auto
a
color: red
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
66
style.css
html/css/style.css を確認してみよう
h1 {
margin: 0 auto;
}
h1 a {
color: red;
}
設定した通りの書式になっていれば完成です
第3章 応用
1-1. gulp-csscomb で出力したCSSを整形
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
67
美しい CSS は保証されました
第3章 応用
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
68
style.sass
h1.span
transform: rotate(-45deg)
background-size: 20px 20px
style.css
h1.span {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}
求める形はこっち
↓
第3章 応用
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
69
Windows の方 Mac の方
一旦、watch から抜けてプラグインと設定を追加をします
[13:09:14] Starting 'sass'...
[13:09:14] Finished 'sass' after 980 μs
^C
$
ctrl + c を押し、一旦タスクを終了します
[13:09:14] Starting 'sass'...
[13:09:14] Finished 'sass' after 980 μs
^C
>
ctrl + c を押し、一旦タスクを終了します
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
70
出力する CSS に要件に沿ったベンダー・プレフィクスを追加します
gulp-autoprefixerhttps://www.npmjs.com/package/gulp-autoprefixer
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
71
プラグインページの内容を参考に追加しましょ
う。
1. インストール
npm install gulp-autoprefixer --save-dev
2. タスクを追記
var autoprefixer = require('gulp-autoprefixer');
3. タスクを .pipe() で繋げる
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
https://www.npmjs.com/package/gulp-autoprefixer
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
72
Windows の方 Mac の方
> npm install gulp-autoprefixer --save-dev
gulp-csscomb を追加
$ npm install gulp-autoprefixer --save-dev
gulp-csscomb を追加
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
73
gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function () {
gulp.src('./develop/sass/**/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./html/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./develop/sass/**/*.sass', ['sass']);
});
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
74
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
あたらめて gulp sass:watch タスクを実行
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
あたらめて gulp sass:watch タスクを実行
watch モードに入りました
gulp sass: watch でファイルを監視します
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
75
style.sass
先ほどと同じように develop/sass/style.sass を保存してみてください
h1.span
transform: rotate(-45deg)
background-size: 20px 20px
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
76
style.css
html/css/style.css を確認してみよう
h1.span {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-size: 20px 20px;
}
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
77
style.css
html/css/style.css を確認してみよう
h1.span {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
求めているものと少し違います!
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
78
GitHub ai/browserslist に設定方法が記載され
ています。
これを参考に、設定を変更します。
※プロジェクトに合わせ適宜調整してください
今回のプロジェクトは以下の設定を使用します。
browsers:['safari 5', 'ie 8', 'ie 9', 'ie 10', 'ie
11', 'opera 12.1', 'firefox 14', 'ios 6',
'android 2.1'],
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
https://github.com/ai/browserslist
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
79
gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function () {
gulp.src('./develop/sass/**/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers:['safari 5', 'ie 8', 'ie 9', 'ie 10', 'ie 11', 'opera 12.1', 'firefox 14', 'ios 6', 'android 2.1'],
cascade: false
}))
.pipe(gulp.dest('./html/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./develop/sass/**/*.sass', ['sass']);
});
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
80
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
あたらめて gulp sass:watch タスクを実行
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
あたらめて gulp sass:watch タスクを実行
watch モードに入りました
再度 gulp sass: watch でファイルを監視します
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
設定を読み直すため一旦、watch から抜けて、
[13:09:14] Starting 'sass'...
[13:09:14] Finished 'sass' after 980 μs
^C
$
ctrl + c を押し、一旦タスクを終了します
[13:09:14] Starting 'sass'...
[13:09:14] Finished 'sass' after 980 μs
^C
>
ctrl + c を押し、一旦タスクを終了します
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
81
style.sass
先ほどと同じように develop/sass/style.sass を保存してみてください
h1.span
transform: rotate(-45deg)
background-size: 20px 20px
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
[15:38:40] Starting 'sass'...
[15:38:40] Finished 'sass' after 9.06 ms
gulp sass:watch タスク
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
82
style.css
html/css/style.css を確認してみよう
h1.span {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
}
第3章 応用
1-2. gulp-autoprefixer でベンダー・プレフィクスを追加
求めている仕上がりになりました
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
83
自動でベンダー・プレフィクスが追加されます
第3章 応用
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
1-3. gulp-plumber でエラー時に処理が中断されないように
84
style.sass
h1
&.span
transform:
[09:58:54] Starting 'sass'...
[09:58:54] Finished 'sass' after 12 ms
events.js:85
throw er; // Unhandled 'error' event
^
Error: develop/sass/demo.sass
2:21 error reading values after -
at options.error (/Users/…/index.js:276:32)
$
この状態で保存すると処理が停止
↓
第3章 応用
文法違反などエラー発生時、gulp は処理を中断し停止してしまします。
←値がない
←処理が停止
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
85
Windows の方 Mac の方
一旦、watch から抜けてプラグインと設定を追加をします
[13:09:14] Starting 'sass'...
[13:09:14] Finished 'sass' after 980 μs
^C
$
ctrl + c を押し、一旦タスクを終了します
[13:09:14] Starting 'sass'...
[13:09:14] Finished 'sass' after 980 μs
^C
>
ctrl + c を押し、一旦タスクを終了します
第3章 応用
1-3. gulp-plumber でエラー時に処理が中断されないように
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
86
エラー発生時に処理を中断しないようにします
gulp-plumberhttps://www.npmjs.com/package/gulp-plumber
第3章 応用
1-3. gulp-plumber でエラー時に処理が中断されないように
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
87
プラグインページの内容を参考に追加しましょ
う。
1. インストール
npm install gulp-plumber --save-dev
2. タスクを追記
var plumber = require('gulp-plumber');
3. タスクを .pipe() で繋げる
.pipe(plumber())
第3章 応用
https://www.npmjs.com/package/gulp-plumber
1-3. gulp-plumber でエラー時に処理が中断されないように
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
88
Windows の方 Mac の方
> npm install gulp-plumber --save-dev
gulp-csscomb を追加
$ npm install gulp-plumber --save-dev
gulp-csscomb を追加
第3章 応用
1-3. gulp-plumber でエラー時に処理が中断されないように
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
89
gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var csscomb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
gulp.task('sass', function () {
gulp.src('./develop/sass/**/*.sass')
.pipe(plumber())
.pipe(sass().on('error', sass.logError))
.pipe(csscomb())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./html/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./develop/sass/**/*.sass', ['sass']);
});
第3章 応用
1-3. gulp-plumber でエラー時に処理が中断されないように
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
90
Windows の方 Mac の方
$ gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
あたらめて gulp sass:watch タスクを実行
> gulp sass:watch
[15:38:32] Starting 'sass:watch'...
[15:38:32] Finished 'sass:watch' after 10 ms
あたらめて gulp sass:watch タスクを実行
watch モードに入りました
gulp sass: watch でファイルを監視します
第3章 応用
1-3. gulp-plumber でエラー時に処理が中断されないように
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
91
style.sass
h1
&.span
transform:
[10:31:18] Starting 'sass'...
[10:31:18] Finished 'sass' after 16 ms
[10:31:18] Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
develop/sass/demo.sass
2:21 error reading values after -
Details:
column: 21
line: 2
file: stdin
status: 1
messageFormatted: develop/sass/demo.sass
2:21 error reading values after -
先ほどと同じように保存
↓
第3章 応用
←値がない
←処理が継続されています
1-3. gulp-plumber でエラー時に処理が中断されないように
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
92
処理が継続されるので作業に集中できます
第3章 応用
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
93
ファイルやディレクトリを削除
delhttps://www.npmjs.com/package/del
第3章 応用
2. Sass コーディングに役立つプラグイン
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
94
メディアクエリ @media をまとめてくれます
gulp-combine-media-querieshttps://www.npmjs.com/package/gulp-combine-media-queries
第3章 応用
2. Sass コーディングに役立つプラグイン
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
95
正規表現で文字列を置き換えできます
gulp-replacehttps://www.npmjs.com/package/gulp-replace
第3章 応用
2. Sass コーディングに役立つプラグイン
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
96
複数のファイルを結合
gulp-concathttps://www.npmjs.com/package/gulp-concat
第3章 応用
2. Sass コーディングに役立つプラグイン
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
97
ファイル名を変更
gulp-renamehttps://www.npmjs.com/package/gulp-rename
第3章 応用
2. Sass コーディングに役立つプラグイン
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
98
CSS をミニファイ化します
gulp-minify-csshttps://www.npmjs.com/package/gulp-minify-css
第3章 応用
2. Sass コーディングに役立つプラグイン
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
99
CSS を gzip 圧縮します
gulp-gziphttps://www.npmjs.com/package/gulp-gzip
第3章 応用
2. Sass コーディングに役立つプラグイン
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
100
ファイルの更新を検知して自動的にブラウザを更新します
gulp-webserverhttps://www.npmjs.com/package/gulp-webserver
第3章 応用
2. Sass コーディングに役立つプラグイン
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
101
ファイルを sftp で転送(gulp-ftp もあります)
gulp-sftphttps://www.npmjs.com/package/gulp-sftp
第3章 応用
2. Sass コーディングに役立つプラグイン
http://excode.jp
東区フロントエンド勉強会 2015年 第1回
102
などなど、いろいろありますので試してみましょう
第3章 応用
http://excode.jp

More Related Content

What's hot

スマートフォンWebアプリ最適化”3つの極意”
スマートフォンWebアプリ最適化”3つの極意”スマートフォンWebアプリ最適化”3つの極意”
スマートフォンWebアプリ最適化”3つの極意”Koji Ishimoto
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作Maboroshi.inc
 
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会Yuji Nojima
 
【10人限定】1日でマスター!word pressのための「php:mysql講座」
【10人限定】1日でマスター!word pressのための「php:mysql講座」【10人限定】1日でマスター!word pressのための「php:mysql講座」
【10人限定】1日でマスター!word pressのための「php:mysql講座」光利 吉田
 
WebブラウザでC#実行 WebAssemblyの技術
WebブラウザでC#実行 WebAssemblyの技術WebブラウザでC#実行 WebAssemblyの技術
WebブラウザでC#実行 WebAssemblyの技術Sho Okada
 
Wordpress buddypress3
Wordpress buddypress3Wordpress buddypress3
Wordpress buddypress3Shoichi Otomo
 
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニングKiyokazu Kaba
 
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編ksimoji
 
Zabbixを2分でインストール
Zabbixを2分でインストールZabbixを2分でインストール
Zabbixを2分でインストール真乙 九龍
 
Capistrano in practice - WebCareer
Capistrano in practice - WebCareerCapistrano in practice - WebCareer
Capistrano in practice - WebCareerKyosuke MOROHASHI
 
ASP.NETからASP.NET Coreに移行した話
ASP.NETからASP.NET Coreに移行した話ASP.NETからASP.NET Coreに移行した話
ASP.NETからASP.NET Coreに移行した話Taiga Takahari
 
【PHPカンファレンス福岡】PHP 5.3 + CakePHP 1.3 → PHP 7 + CakePHP 3 移行を決めた話
【PHPカンファレンス福岡】PHP 5.3 + CakePHP 1.3 → PHP 7 + CakePHP 3 移行を決めた話【PHPカンファレンス福岡】PHP 5.3 + CakePHP 1.3 → PHP 7 + CakePHP 3 移行を決めた話
【PHPカンファレンス福岡】PHP 5.3 + CakePHP 1.3 → PHP 7 + CakePHP 3 移行を決めた話Yuki Kanazawa
 
Performance and Scalability of Web Service
Performance and Scalability of Web ServicePerformance and Scalability of Web Service
Performance and Scalability of Web ServiceShinji Tanaka
 
ノンプログラマのためのウェブサーバ入門
ノンプログラマのためのウェブサーバ入門	ノンプログラマのためのウェブサーバ入門
ノンプログラマのためのウェブサーバ入門 Atsu Yamaga
 
Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成krdlab
 
やさしいSassり方
やさしいSassり方やさしいSassり方
やさしいSassり方祐磨 堀
 
WebAssemblyのWeb以外のことぜんぶ話す
WebAssemblyのWeb以外のことぜんぶ話すWebAssemblyのWeb以外のことぜんぶ話す
WebAssemblyのWeb以外のことぜんぶ話すTakaya Saeki
 
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>Horiguchi Seito
 

What's hot (20)

スマートフォンWebアプリ最適化”3つの極意”
スマートフォンWebアプリ最適化”3つの極意”スマートフォンWebアプリ最適化”3つの極意”
スマートフォンWebアプリ最適化”3つの極意”
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
 
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
 
【10人限定】1日でマスター!word pressのための「php:mysql講座」
【10人限定】1日でマスター!word pressのための「php:mysql講座」【10人限定】1日でマスター!word pressのための「php:mysql講座」
【10人限定】1日でマスター!word pressのための「php:mysql講座」
 
ZabbixとAWS
ZabbixとAWSZabbixとAWS
ZabbixとAWS
 
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話 Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
 
WebブラウザでC#実行 WebAssemblyの技術
WebブラウザでC#実行 WebAssemblyの技術WebブラウザでC#実行 WebAssemblyの技術
WebブラウザでC#実行 WebAssemblyの技術
 
Wordpress buddypress3
Wordpress buddypress3Wordpress buddypress3
Wordpress buddypress3
 
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング
 
第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編第9回rest勉強会 ダウンロード・アップロード編
第9回rest勉強会 ダウンロード・アップロード編
 
Zabbixを2分でインストール
Zabbixを2分でインストールZabbixを2分でインストール
Zabbixを2分でインストール
 
Capistrano in practice - WebCareer
Capistrano in practice - WebCareerCapistrano in practice - WebCareer
Capistrano in practice - WebCareer
 
ASP.NETからASP.NET Coreに移行した話
ASP.NETからASP.NET Coreに移行した話ASP.NETからASP.NET Coreに移行した話
ASP.NETからASP.NET Coreに移行した話
 
【PHPカンファレンス福岡】PHP 5.3 + CakePHP 1.3 → PHP 7 + CakePHP 3 移行を決めた話
【PHPカンファレンス福岡】PHP 5.3 + CakePHP 1.3 → PHP 7 + CakePHP 3 移行を決めた話【PHPカンファレンス福岡】PHP 5.3 + CakePHP 1.3 → PHP 7 + CakePHP 3 移行を決めた話
【PHPカンファレンス福岡】PHP 5.3 + CakePHP 1.3 → PHP 7 + CakePHP 3 移行を決めた話
 
Performance and Scalability of Web Service
Performance and Scalability of Web ServicePerformance and Scalability of Web Service
Performance and Scalability of Web Service
 
ノンプログラマのためのウェブサーバ入門
ノンプログラマのためのウェブサーバ入門	ノンプログラマのためのウェブサーバ入門
ノンプログラマのためのウェブサーバ入門
 
Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成Scotty を利用した "ゆるふわ" Web サービス作成
Scotty を利用した "ゆるふわ" Web サービス作成
 
やさしいSassり方
やさしいSassり方やさしいSassり方
やさしいSassり方
 
WebAssemblyのWeb以外のことぜんぶ話す
WebAssemblyのWeb以外のことぜんぶ話すWebAssemblyのWeb以外のことぜんぶ話す
WebAssemblyのWeb以外のことぜんぶ話す
 
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
 

Viewers also liked

GitHubでプロジェクトを共有してみよう
GitHubでプロジェクトを共有してみようGitHubでプロジェクトを共有してみよう
GitHubでプロジェクトを共有してみようToshimichi Suekane
 
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くするGulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くするHayashi Yuichi
 
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編Toshimichi Suekane
 
Kaizenとコーディングで、2年間生き抜いた
Kaizenとコーディングで、2年間生き抜いたKaizenとコーディングで、2年間生き抜いた
Kaizenとコーディングで、2年間生き抜いたToshimichi Suekane
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたHayashi Yuichi
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!Yuji Nojima
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座Mariko Yamaguchi
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版MOCKS | Yuta Morishige
 

Viewers also liked (9)

GitHubでプロジェクトを共有してみよう
GitHubでプロジェクトを共有してみようGitHubでプロジェクトを共有してみよう
GitHubでプロジェクトを共有してみよう
 
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くするGulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
 
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
 
CSS Living StyleGuide
CSS Living StyleGuideCSS Living StyleGuide
CSS Living StyleGuide
 
Kaizenとコーディングで、2年間生き抜いた
Kaizenとコーディングで、2年間生き抜いたKaizenとコーディングで、2年間生き抜いた
Kaizenとコーディングで、2年間生き抜いた
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
 
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
 

Similar to gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編

CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and ProgrammingTaku AMANO
 
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司schoowebcampus
 
Sass/Compass講習会
Sass/Compass講習会Sass/Compass講習会
Sass/Compass講習会Beeworks
 
Sassをはじめよう!
Sassをはじめよう!Sassをはじめよう!
Sassをはじめよう!Yoshiya OKI
 
compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用するKazuya Hiruma
 
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会Yoshinori Kobayashi
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかたHiroshi Urabe
 
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTechCSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTechlyca chigyo
 
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」Shunsuke Watanabe
 
LESS楽しいれす(^q^)
LESS楽しいれす(^q^) LESS楽しいれす(^q^)
LESS楽しいれす(^q^) taiju higashi
 
Css拡張言語のコトハジメ
Css拡張言語のコトハジメCss拡張言語のコトハジメ
Css拡張言語のコトハジメregret raym
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんHayato Mizuno
 
Css preprocessorの始めかた
Css preprocessorの始めかたCss preprocessorの始めかた
Css preprocessorの始めかたHiroki Shibata
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ知己 久保
 
Sassを使ってみよう
Sassを使ってみようSassを使ってみよう
Sassを使ってみようGIG inc.
 

Similar to gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編 (20)

CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
 
Sass/Compass講習会
Sass/Compass講習会Sass/Compass講習会
Sass/Compass講習会
 
壊れやすいCSS
壊れやすいCSS壊れやすいCSS
壊れやすいCSS
 
Sassをはじめよう!
Sassをはじめよう!Sassをはじめよう!
Sassをはじめよう!
 
compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
 
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
 
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTechCSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
 
Less - first step
Less - first stepLess - first step
Less - first step
 
First sass
First sassFirst sass
First sass
 
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
 
実践Sass 前編
実践Sass 前編実践Sass 前編
実践Sass 前編
 
LESS楽しいれす(^q^)
LESS楽しいれす(^q^) LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
 
Css拡張言語のコトハジメ
Css拡張言語のコトハジメCss拡張言語のコトハジメ
Css拡張言語のコトハジメ
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
 
Css preprocessorの始めかた
Css preprocessorの始めかたCss preprocessorの始めかた
Css preprocessorの始めかた
 
Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
 
Sassを使ってみよう
Sassを使ってみようSassを使ってみよう
Sassを使ってみよう
 

Recently uploaded

ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 

Recently uploaded (12)

ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 

gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編

  • 1. gulp + sass で目指せ倍速コーディング 東区フロントエンド勉強会 2015年 第1回 本編 1 フロントエンド エンジニア 末包 俊道(すえかね) http://excode.jp エクスコード株式会社
  • 3. 東区フロントエンド勉強会 2015年 第1回 第1章 Sass 1. 概要 2. 公式サイト 3. 導入のメリット・デメリット 4. Sass の記法 (SCSS / SASS) 5. 主な機能 第2章 gulp 1. 概要 2. 公式サイト 3. ハンズオン 第3章 応用 1. いろんなプラグインを使ってみよう 2. gulpfile.js を分割して管理しやすくしよう 3 第1章 Sass http://excode.jp
  • 4. 東区フロントエンド勉強会 2015年 第1回 4 CSS を効率的に書くためのメタ言語と、その言語で記述 したファイルをCSSファイルへ変換するソフトウェア。 CSSにはない変数や配列を扱うことができ、セレクタの ネスト(入れ子)により見通しの良いコーディングが可 能になります。 1. 概要 第1章 Sass http://excode.jp
  • 5. 東区フロントエンド勉強会 2015年 第1回 2. 公式サイト 5 http://sass-lang.com 第1章 Sass http://excode.jp
  • 6. 東区フロントエンド勉強会 2015年 第1回 3. 導入のメリット・デメリット 6 メリット • コードの見通しが良くなる • 変数を使える • 簡易な関数を使える • よく使うコードを定義し再利用できる • header, body, side, footer など個別ファイルに分割して管理できる デメリット • Sass の流儀に合わせてマークアップする必要がある • コンパイルする環境を整えておく必要がある • Windows 環境においては標準で Ruby がインストールされていないため 導入のハードルがやや高い • Mac OSX のバージョンによっては旧バージョンの Ruby がインストール されており、Ruby のバージョンアップに躊躇する 第1章 Sass http://excode.jp
  • 7. 東区フロントエンド勉強会 2015年 第1回 4. Sass の記法 (SCSS記法) 7 @mixin opacity($string) {
 $opacityIE: $string * 100; opacity: $string;
 filter: alpha(opacity=$opacityIE); } .block { a { display: block; background-color: rgba(black, .1); color: blue; text-decoration: none; &:hover { color: red; text-decoration: underline; img { @include opacity(.8); } } } } SCSS 記法 (.scss) • ネットでよく見かける記法 • CSS を入れ子にした構造 • CSS を混在しても大丈夫 第1章 Sass http://excode.jp
  • 8. 東区フロントエンド勉強会 2015年 第1回 4. Sass の記法 (SASS記法) 8 =opacity($string)
 $opacityIE: $string * 100 opacity: $string
 filter: alpha(opacity=$opacityIE) .block a display: block background-color: rgba(black, .1) color: blue text-decoration: none &:hover color: red text-decoration: underline img +opacity(0.8) SASS 記法 (.sass) • Sass本来の記法 • セミコロン不要 • { } 波カッコ不要 • @mixin は = • @include は + • インデントで親子関係を示す • コロン「:」の後に必ず半角スペースが必要 第1章 Sass http://excode.jp
  • 9. 東区フロントエンド勉強会 2015年 第1回 4. Sass の記法 (SCSS/SASSの比較) 9 @mixin opacity($string) {
 $opacityIE: $string * 100; opacity: $string;
 filter: alpha(opacity=$opacityIE); } .block { a { display: block; background-color: rgba(black, .1); color: blue; text-decoration: none; &:hover { color: red; text-decoration: underline; img { @include opacity(.8); } } } } =opacity($string)
 $opacityIE: $string * 100 opacity: $string
 filter: alpha(opacity=$opacityIE) .block a display: block background-color: rgba(black, .1) color: blue text-decoration: none &:hover color: red text-decoration: underline img +opacity(0.8) SCSS 記法 (.scss) SASS 記法 (.sass) 第1章 Sass http://excode.jp
  • 10. 東区フロントエンド勉強会 2015年 第1回 本勉強会では SASS 記法で進めます 10 @mixin opacity($string) {
 $opacityIE: $string * 100; opacity: $string;
 filter: alpha(opacity=$opacityIE); } .block { a { display: block; background-color: rgba(black, .1); color: blue; text-decoration: none; &:hover { color: red; text-decoration: underline; img { @include opacity(.8); } } } } =opacity($string)
 $opacityIE: $string * 100 opacity: $string
 filter: alpha(opacity=$opacityIE) .block a display: block background-color: rgba(black, .1) color: blue text-decoration: none &:hover color: red text-decoration: underline img +opacity(0.8) SCSS 記法 (.scss) SASS 記法 (.sass) 第1章 Sass http://excode.jp
  • 11. 東区フロントエンド勉強会 2015年 第1回 5. 主な機能 11 1. コメントアウト 2. 変数と計算式 3. ネスト(入れ子) 4. & 親セレクタ参照 5. @mixin (=) と @include (+) 6. #{…} 変数に入った値を文字列をして出力 7. @extend 定義されたスタイルの読込 8. @import 外部ファイル読込 9. @if @else 条件分岐 10.@for ループ 11.@each ループ 12.組み込み関数(一部紹介) 第1章 Sass http://excode.jp
  • 12. 東区フロントエンド勉強会 2015年 第1回 5-1. コメントアウト 12 /* text */ ← CSSにも反映されるコメント // text ←この行はCSSに反映されない // ←この行以降のネストはCSSに反映されない text h1 /* コメント */ font-size: 24px a //color: red color: blue h2 font-size: 21px // a color: blue h1 { /* コメント */ font-size: 24px; } h1 a { color: blue; } h2 { font-size: 21px; } SASS (.sass) CSS (.css) 第1章 Sass http://excode.jp
  • 13. 東区フロントエンド勉強会 2015年 第1回 5-2. 変数と計算式 13 $size: 13px $base-color: white h1 font-size: $size * 2 color: $base-color p font-size: $size small font-size: $size / 2 color: $base-color * 0.3 small.floor font-size: floor($size / 2) h2 { font-size: 26px; color: white; } p { font-size: 13px; } small { font-size: 6.5px; color: #4d4d4d; } small.floor { font-size: 6px; } SASS (.sass) CSS (.css) • 加算, 減算 … x + n, x - n • 積算, 除算 … x * n, x / n • 切り上げ … ceil() • 切り捨て … floor() • 四捨五入 … round() 第1章 Sass http://excode.jp
  • 14. 東区フロントエンド勉強会 2015年 第1回 5-3. ネスト(入れ子) 14 .header position: relative max-width: 360px height: 44px margin: 0 auto .logo display: inline a position: absolute top: 0 left: 0 display: block width: 60px height: 44px .header { position: relative; max-width: 360px; height: 44px; margin: 0 auto; } .header .logo { display: inline; } .header .logo a { position: absolute; top: 0; left: 0; display: block; width: 60px; height: 44px; text-decoration: none; } SASS (.sass) CSS (.css) 1階層目 3階層目 2階層目 第1章 Sass http://excode.jp
  • 15. 東区フロントエンド勉強会 2015年 第1回 5-4. 親セレクタ参照 15 a &:hover … &:before … section &>div … &~div … &+div … p div & &.class … a:hover { … } a:before { … } section > div { … } section ~ div { … } section + div { … } div section p.class { … } SASS (.sass) CSS (.css) 子セレクタ 隣接セレクタ 間接セレクタ 第1章 Sass http://excode.jp
  • 16. 東区フロントエンド勉強会 2015年 第1回 5-5. @mixin (=) と @include (+) 16 $baseFontSize: 10px =font-size($string) font-size: $baseFontSize * $string a +font-size(1.2) a { font-size: 12px; } SASS (.sass) CSS (.css) @mixin @include 【参考】SCSS の場合は以下の様に記述します $baseFontSize: 10px; @mixin font-size($string) { font-size: $baseFontSize * $string; } a { @include font-size(1.2); } 第1章 Sass http://excode.jp
  • 17. 東区フロントエンド勉強会 2015年 第1回 5-6. #{…} 変数に入った値を文字列をして出力 17 =opacity($string) $opacityIE: $string * 100 opacity: #{$string}
 filter: alpha(opacity=#{$opacityIE}) a &:hover +opacity(0.8) a:hover { opacity: 0.8; filter: alpha(opacity=80); } SASS (.sass) CSS (.css) @mixin @include 第1章 Sass http://excode.jp
  • 18. 東区フロントエンド勉強会 2015年 第1回 5-7. @extend 定義されたスタイルの読込 18 .buttonClass display: block color: white 
 %buttonPlaceholder display: block color: red a &.searchButton @extend .buttonClass width: 50% a
 &.cartButton @extend %buttonPlaceholder width: 80% .buttonClass { display: block; color: white; } a.searchButton { display: block; color: white; width: 50%; } a.cartButton { display: block; color: red; width: 80%; } SASS (.sass) CSS (.css) プレースホルダー プレースホルダーはCSSに書き出されません クラス プレースホルダーを読み込む クラスを読み込む 読み込まれたクラス 読み込まれたプレースホルダー クラス 第1章 Sass http://excode.jp
  • 19. 東区フロントエンド勉強会 2015年 第1回 5-8. @import 外部ファイル読込 19 @import header .body p margin: 1em auto a color: blue .header p.logo { float: left; width: 160px; } .header p.logo a img { width: 100%; } .body p { margin: 1em auto; } .body p a { color: blue; } SASS (style.sass) CSS (style.css) .header p &.logo width: 160px float: left a img width: 100% SASS (_header.sass) ヘッダー 外部ファイル化したヘッダーを読み込む 第1章 Sass http://excode.jp
  • 20. 東区フロントエンド勉強会 2015年 第1回 5-9. @if @else 条件分岐 20 $type: sample p @if $type == sample color: red @else if $type == test color: blue @else color: black p { color: red; } SASS (.sass) CSS (.css) 第1章 Sass http://excode.jp
  • 21. 東区フロントエンド勉強会 2015年 第1回 5-10. @for ループ 21 li position: absolute @for $i from 1 through 3 &:nth-child(#{$i}) left: 40px * $i li { position: absolute; } li:nth-child(1) { left: 40px; } li:nth-child(2) { left: 80px; } li:nth-child(3) { left: 120px; } SASS (.sass) CSS (.css) 第1章 Sass http://excode.jp
  • 22. 東区フロントエンド勉強会 2015年 第1回 5-11. @each ループ 22 $images: apple banana orange p @each $img in $images &.#{$img} backgeound-image: url(/img/#{$img}.png) p.apple { backgeound-image: url(/img/apple.png); } p.banana { backgeound-image: url(/img/banana.png); } p.orange { backgeound-image: url(/img/orange.png); } SASS (.sass) CSS (.css) 配列を定義(スペースまたはカンマ区切り) 第1章 Sass http://excode.jp
  • 23. 東区フロントエンド勉強会 2015年 第1回 5-12. 組み込み関数 23 $color: #3366FF p color: $color // 明度 lighten, darken &.lighten color: lighten($color, 20%) // 彩度 saturate, desaturate &.saturate color: saturate($color, 20%) // RGB+アルファ &.rgba color: rgba($color, 0.8) $colors: red green blue p &.color2 color: #{nth($colors,2)} p { color: #36f;   ⬛ } p.lighten { color: #99b3ff; ⬛ } p.saturate { color: #1f5cff; ⬛ } p.rgba { color: rgba(51, 102, 255, .8); } p.color2 { color: green; } SASS (.sass) CSS (.css) 第1章 Sass http://excode.jp
  • 24. 東区フロントエンド勉強会 2015年 第1回 おまけ① BEM (Block, Element, Modifier) 記法を使いたい 24 .hoge &__element1 width: 100px &_modifier color: red &__element2 width: 50% &_modifier color: blue .hoge__element1 { width: 100px; } .hoge__element1_modifier { color: red; } .hoge__element2 { width: 50%; } .hoge__element2_modifier { color: blue; } SASS (.sass) CSS (.css) 第1章 Sass http://excode.jp
  • 25. 東区フロントエンド勉強会 2015年 第1回 おまけ② タイプ数を少なくしたい 25 =w($s: auto) width: unit($s) @function unit($s) … @return $rs .container +relative +pl(2em) +left &:after +absolute +t(0) +l(0) content: '' +block +w(20) +h(80%) .container { position: relative padding-left: 2em; text-align: left; } .container:after { position: absolute; top: 0; left: 0; content: ''
 display: block; width: 20px; height: 80%; } SASS (.sass) CSS (.css) unit() という @function(独自関数)を作り 値に em や % が付いている場合はその単位、 値が数値の場合は px を返すものを用意。 unit() 関数は少し長いので、ここでは省略して 説明しています。 第1章 Sass http://excode.jp
  • 27. 東区フロントエンド勉強会 2015年 第1回 27 Node.js も用いたタスクの自動化ツール。 本勉強会では、ファイルを監視し、予め設定ファイル で定義したタスクを自動的に実行させます。 1. 概要 第2章 gulp http://excode.jp
  • 28. 東区フロントエンド勉強会 2015年 第1回 2. 公式サイト 28 http://gulpjs.com/ 第2章 gulp http://excode.jp
  • 29. 東区フロントエンド勉強会 2015年 第1回 3. ハンズオン 29 <下準備> 1. 今回のディレクトリ構成 2. ディレクトリを準備 3. package.json を生成 <gulp設定> 4. 必要なプラグインを追加 5. gulpfile.js を作成 <gulp実行> 6. gulp sass:watch でファイルの変更を監視 第2章 gulp http://excode.jp
  • 30. 東区フロントエンド勉強会 2015年 第1回 3-1. 今回のディレクトリ構成 30 lesson │ <開発用ディレクトリ> ├ develop │ │ <.sass ディレクトリ> │ └ sass │ └ style.sass │ │ <納品ファイル用ディレクトリ> ├ html │ │ <.css ディレクトリ(自動生成)> │ ├ css │ │ └ style.css │ │ │ └ index.html │ └ 上記以外でgulpが必要とするファイル 第2章 gulp http://excode.jp
  • 31. 東区フロントエンド勉強会 2015年 第1回 3-2. ディレクトリを準備 (1/2) 31 > cd Desktop
 または > cd C:Usersユーザー名Desktop デスクトップに移動 Windows の方 $ cd ~/Desktop デスクトップに移動 Mac の方 $ mkdir lesson 新しくディレクトリ(フォルダ)を作成 $ cd lesson 作成したディレクトリに移動 > mkdir lesson 新しくディレクトリ(フォルダ)を作成 > cd lesson 作成したディレクトリに移動 今回は説明の都合上、デスクトップにハンズオン用のディレクトリを作成していただきます。 第2章 gulp http://excode.jp
  • 32. 東区フロントエンド勉強会 2015年 第1回 3-2. ディレクトリを準備 (2/2) 32 Windows の方 Mac の方 $ mkdir develop $ mkdir develop/sass $ mkdir html ディレクトリを作成、css用ディレクトリは自動生成です > mkdir developsass > mkdir html ディレクトリを作成、css用ディレクトリは自動生成です $ touch develop/sass/style.sass $ touch html/index.html index.html と style.sass も作っておきましょう > type nul developsassstyle.sass > type nul htmlindex.html index.html と style.sass も作っておきましょう 第2章 gulp http://excode.jp
  • 33. 東区フロントエンド勉強会 2015年 第1回 3-3. package.json を生成 (1/2) 33 > npm init package.json を生成 Windows の方 $ npm init package.json を生成 Mac の方 name (lesson) … { … } 対話形式で設定(enterを押すと省略して事項へ進む) Is this ok? (yes) これで良いか確認されるので enter name (lesson) … { … } 対話形式で設定(enterを押すと省略して事項へ進む) Is this ok? (yes) これで良いか確認されるので enter $ ls develop html package.json package.jsonが生成されていることを確認 > dir <DIR> . <DIR> .. <DIR> develop <DIR> html 256 package.json package.jsonが生成されていることを確認 第2章 gulp http://excode.jp
  • 34. 東区フロントエンド勉強会 2015年 第1回 3-3. package.json を生成 (2/2) 34 package.json の中身を見てみよう { "name": "lesson", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", } 第2章 gulp http://excode.jp
  • 35. 東区フロントエンド勉強会 2015年 第1回 現在のディレクトリ構成 35 lesson │ <開発用ディレクトリ> ├ develop │ │ <.sass ディレクトリ> │ └ sass │ └ style.sass │ │ <納品ファイル用ディレクトリ> ├ html │ │ │ └ index.html │ └ package.json 第2章 gulp http://excode.jp
  • 37. 東区フロントエンド勉強会 2015年 第1回 3-4. 必要なプラグインを追加 37 http://gulpjs.com/plugins/ 第2章 gulp http://excode.jp
  • 38. 東区フロントエンド勉強会 2015年 第1回 3-4. 必要なプラグインを追加 38 後ほどこのコマンドを実行します 第2章 gulp https://www.npmjs.com/package/gulp-sass/ http://excode.jp
  • 39. 東区フロントエンド勉強会 2015年 第1回 3-4. 必要なプラグインを追加 39 > npm install gulp-sass --save-dev gulp-sass を追加(先ほどのページ) Windows の方 $ npm install gulp-sass --save-dev gulp-sass を追加(先ほどのページ) Mac の方 $ ls develop html node_modules package.json node_module ディレクトリが生成されていることを確認 > dir <DIR> . <DIR> .. <DIR> develop <DIR> html <DIR> node_modules 256 package.json node_module ディレクトリが生成されていることを確認 > npm install gulp --save-dev gulp を追加 $ npm install gulp --save-dev gulp を追加 追加された gulp プラグインは、node_module ディレクトリに格納され、package.json に追記されます 第2章 gulp http://excode.jp
  • 40. 東区フロントエンド勉強会 2015年 第1回 3-4. 必要なプラグインを追加 40 package.json の中に gulp-sass が追記されています { "name": "lesson", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "gulp-sass": "^2.0.4" } } この行が追加されました ※ gulp は ̶save-dev オプションを付けていないので、package.jsonには追記されません 第2章 gulp http://excode.jp
  • 41. 東区フロントエンド勉強会 2015年 第1回 3-5. gulpfile.js を作成 41 package.json と同じ階層に gulpfile.js を作成します > type nul > gulpfile.js gulpfile.js を作成 Windows の方 $ touch gulpfile.js gulpfile.js を作成 Mac の方 $ ls develop gulpfile.js html node_modules package.json gulpfile.js が生成されていることを確認 > dir <DIR> . <DIR> .. <DIR> develop 0 gulpfile.js <DIR> html <DIR> node_modules 256 package.json gulpfile.js が生成されていることを確認 第2章 gulp http://excode.jp
  • 42. 東区フロントエンド勉強会 2015年 第1回 3-5. gulpfile.js を作成 42 先ほどの gulp-sass のページを見て gulp-sass の動作に必要な記述を書いていきます この部分を参考に 書いていきます 第2章 gulp https://www.npmjs.com/package/gulp-sass/ http://excode.jp
  • 43. 東区フロントエンド勉強会 2015年 第1回 3-5. gulpfile.js を作成 43 先ほどのページの内容を gulpfile.js にそのままコピペします gulpfile.js 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('./sass/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css')); }); gulp.task('sass:watch', function () { gulp.watch('./sass/**/*.scss', ['sass']); }); 第2章 gulp http://excode.jp
  • 44. 東区フロントエンド勉強会 2015年 第1回 3-5. gulpfile.js を作成 44 今回のディレクトリ構成に合わせて編集します gulpfile.js 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('./sass/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./css')); }); gulp.task('sass:watch', function () { gulp.watch('./sass/**/*.scss', ['sass']); }); • Sass の拡張子は .sass • Sass のディレクトリは、gulpfile.js からの相対パス ./develop/sass • CSS のディレクトリは、gulpfile.js からの相対パス ./html/css 第2章 gulp http://excode.jp
  • 45. 東区フロントエンド勉強会 2015年 第1回 3-5. gulpfile.js を作成 45 編集後はこの様になります gulpfile.js 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('./develop/sass/**/*.sass') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('./html/css')); }); gulp.task('sass:watch', function () { gulp.watch('./develop/sass/**/*.sass', ['sass']); }); 第2章 gulp http://excode.jp
  • 46. 東区フロントエンド勉強会 2015年 第1回 現在のディレクトリ構成 46 lesson │ <開発用ディレクトリ> ├ develop │ │ <.sass ディレクトリ> │ └ sass │ └ style.sass │ ├ gulpfile.js │ │ <納品ファイル用ディレクトリ> ├ html │ │ │ └ index.html │ ├ node_modules └ package.json 第2章 gulp http://excode.jp
  • 48. 東区フロントエンド勉強会 2015年 第1回 3-6. gulp sass:watch を実行してファイルを監視 48 Windows の方 Mac の方 $ gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms gulp sass:watch タスクを実行してみます > gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms gulp sass:watch タスクを実行してみます watch モードに入りました 第2章 gulp http://excode.jp
  • 49. 東区フロントエンド勉強会 2015年 第1回 3-6. gulp sass:watch を実行してファイルを監視 49 style.sass develop/sass/style.sass を編集・保存してみよう h1 margin: 0 auto a color: red Windows の方 Mac の方 $ gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms [15:38:40] Starting 'sass'... [15:38:40] Finished 'sass' after 9.06 ms gulp sass:watch タスク > gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms [15:38:40] Starting 'sass'... [15:38:40] Finished 'sass' after 9.06 ms gulp sass:watch タスク 以下のように、sassが実行されていれば成功です 第2章 gulp http://excode.jp
  • 50. 東区フロントエンド勉強会 2015年 第1回 3-6. gulp sass:watch を実行してファイルを監視 50 style.css html/css/style.css を確認してみよう h1 { margin: 0 auto; } h1 a { color: red; } 第2章 gulp 書式が気になります http://excode.jp
  • 51. 東区フロントエンド勉強会 2015年 第1回 現在のディレクトリ構成 51 lesson │ <開発用ディレクトリ> ├ develop │ │ <.sass ディレクトリ> │ └ sass │ └ style.sass │ ├ gulpfile.js │ │ <納品ファイル用ディレクトリ> ├ html │ │ <.css ディレクトリ(自動生成)> │ ├ css │ │ └ style.css │ │ │ └ index.html │ ├ node_modules └ package.json 第2章 gulp http://excode.jp
  • 52. 東区フロントエンド勉強会 2015年 第1回 52 ひとまず gulp + Sass の環境は整いました 第2章 gulp http://excode.jp
  • 53. 東区フロントエンド勉強会 2015年 第1回 53 第3章 応用 第3章 応用 http://excode.jp
  • 54. 東区フロントエンド勉強会 2015年 第1回 54 1. プラグインを追加してみよう 1. gulp-csscomb で出力したCSSを整形 2. gulp-autoprefixer でベンダー・プレフィクスを追加 3. gulp-plumber でエラー時に処理が中断されないように 2. Sass コーディングに役立つプラグイン 第3章 応用 http://excode.jp
  • 55. 東区フロントエンド勉強会 2015年 第1回 1-1. gulp-csscomb で出力したCSSを整形 55 style.css html/css/style.css の書式が気になります h1 { margin: 0 auto; } h1 a { color: red; } style.css h1 { margin: 0 auto; } h1 a { color: red; } 求める形はこっち ↓ 第3章 応用 http://excode.jp
  • 56. 東区フロントエンド勉強会 2015年 第1回 56 Windows の方 Mac の方 一旦、watch から抜けてプラグインと設定を追加をします [13:09:14] Starting 'sass'... [13:09:14] Finished 'sass' after 980 μs ^C $ ctrl + c を押し、一旦タスクを終了します [13:09:14] Starting 'sass'... [13:09:14] Finished 'sass' after 980 μs ^C > ctrl + c を押し、一旦タスクを終了します 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 57. 東区フロントエンド勉強会 2015年 第1回 57 出力する CSS を好みの書式に整形します gulp-csscombhttps://www.npmjs.com/package/gulp-csscomb 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 58. 東区フロントエンド勉強会 2015年 第1回 58 プラグインページの内容を参考に追加しましょ う。 1. インストール npm install gulp-csscomb --save-dev 2. タスクを追記 var csscomb = require('gulp-csscomb'); 3. タスクを .pipe() で繋げる .pipe(csscomb()) https://www.npmjs.com/package/gulp-csscomb 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 59. 東区フロントエンド勉強会 2015年 第1回 59 Windows の方 Mac の方 > npm install gulp-csscomb --save-dev gulp-csscomb を追加 $ npm install gulp-csscomb --save-dev gulp-csscomb を追加 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 60. 東区フロントエンド勉強会 2015年 第1回 60 gulpfile.js 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); var csscomb = require('gulp-csscomb'); gulp.task('sass', function () { gulp.src('./develop/sass/**/*.sass') .pipe(sass().on('error', sass.logError)) .pipe(csscomb()) .pipe(gulp.dest('./html/css')); }); gulp.task('sass:watch', function () { gulp.watch('./develop/sass/**/*.sass', ['sass']); }); 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 61. 東区フロントエンド勉強会 2015年 第1回 61 gulp-csscomb ジェネレーターでお好みの設定を作成します http://csscomb.com/config 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 62. 東区フロントエンド勉強会 2015年 第1回 62 出来上がった設定を .csscomb.json というファイル名で gulpfile.js と同じ階層に保存します 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 63. 東区フロントエンド勉強会 2015年 第1回 63 lesson ├ .csscomb.json ※MacのFinder上では不可視ファイルになります │ │ <開発用ディレクトリ> ├ develop │ │ <.sass ディレクトリ> │ └ sass │ └ style.sass │ ├ gulpfile.js │ │ <納品ファイル用ディレクトリ> ├ html │ │ <.css ディレクトリ(自動生成)> │ ├ css │ │ └ style.css │ │ │ └ index.html │ ├ node_modules └ package.json 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 64. 東区フロントエンド勉強会 2015年 第1回 64 Windows の方 Mac の方 $ gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms あたらめて gulp sass:watch タスクを実行 > gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms あたらめて gulp sass:watch タスクを実行 watch モードに入りました gulp sass: watch でファイルを監視します 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 65. 東区フロントエンド勉強会 2015年 第1回 65 style.sass 先ほどと同じように develop/sass/style.sass を保存してみてください h1 margin: 0 auto a color: red Windows の方 Mac の方 $ gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms [15:38:40] Starting 'sass'... [15:38:40] Finished 'sass' after 9.06 ms gulp sass:watch タスク > gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms [15:38:40] Starting 'sass'... [15:38:40] Finished 'sass' after 9.06 ms gulp sass:watch タスク 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 66. 東区フロントエンド勉強会 2015年 第1回 66 style.css html/css/style.css を確認してみよう h1 { margin: 0 auto; } h1 a { color: red; } 設定した通りの書式になっていれば完成です 第3章 応用 1-1. gulp-csscomb で出力したCSSを整形 http://excode.jp
  • 67. 東区フロントエンド勉強会 2015年 第1回 67 美しい CSS は保証されました 第3章 応用 http://excode.jp
  • 68. 東区フロントエンド勉強会 2015年 第1回 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 68 style.sass h1.span transform: rotate(-45deg) background-size: 20px 20px style.css h1.span { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-background-size: 20px 20px; background-size: 20px 20px; } 求める形はこっち ↓ 第3章 応用 http://excode.jp
  • 69. 東区フロントエンド勉強会 2015年 第1回 69 Windows の方 Mac の方 一旦、watch から抜けてプラグインと設定を追加をします [13:09:14] Starting 'sass'... [13:09:14] Finished 'sass' after 980 μs ^C $ ctrl + c を押し、一旦タスクを終了します [13:09:14] Starting 'sass'... [13:09:14] Finished 'sass' after 980 μs ^C > ctrl + c を押し、一旦タスクを終了します 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 http://excode.jp
  • 70. 東区フロントエンド勉強会 2015年 第1回 70 出力する CSS に要件に沿ったベンダー・プレフィクスを追加します gulp-autoprefixerhttps://www.npmjs.com/package/gulp-autoprefixer 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 http://excode.jp
  • 71. 東区フロントエンド勉強会 2015年 第1回 71 プラグインページの内容を参考に追加しましょ う。 1. インストール npm install gulp-autoprefixer --save-dev 2. タスクを追記 var autoprefixer = require('gulp-autoprefixer'); 3. タスクを .pipe() で繋げる .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 https://www.npmjs.com/package/gulp-autoprefixer http://excode.jp
  • 72. 東区フロントエンド勉強会 2015年 第1回 72 Windows の方 Mac の方 > npm install gulp-autoprefixer --save-dev gulp-csscomb を追加 $ npm install gulp-autoprefixer --save-dev gulp-csscomb を追加 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 http://excode.jp
  • 73. 東区フロントエンド勉強会 2015年 第1回 73 gulpfile.js 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); var csscomb = require('gulp-csscomb'); var autoprefixer = require('gulp-autoprefixer'); gulp.task('sass', function () { gulp.src('./develop/sass/**/*.sass') .pipe(sass().on('error', sass.logError)) .pipe(csscomb()) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('./html/css')); }); gulp.task('sass:watch', function () { gulp.watch('./develop/sass/**/*.sass', ['sass']); }); 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 http://excode.jp
  • 74. 東区フロントエンド勉強会 2015年 第1回 74 Windows の方 Mac の方 $ gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms あたらめて gulp sass:watch タスクを実行 > gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms あたらめて gulp sass:watch タスクを実行 watch モードに入りました gulp sass: watch でファイルを監視します 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 http://excode.jp
  • 75. 東区フロントエンド勉強会 2015年 第1回 75 style.sass 先ほどと同じように develop/sass/style.sass を保存してみてください h1.span transform: rotate(-45deg) background-size: 20px 20px Windows の方 Mac の方 $ gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms [15:38:40] Starting 'sass'... [15:38:40] Finished 'sass' after 9.06 ms gulp sass:watch タスク > gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms [15:38:40] Starting 'sass'... [15:38:40] Finished 'sass' after 9.06 ms gulp sass:watch タスク 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 http://excode.jp
  • 76. 東区フロントエンド勉強会 2015年 第1回 76 style.css html/css/style.css を確認してみよう h1.span { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background-size: 20px 20px; } 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 http://excode.jp
  • 77. 東区フロントエンド勉強会 2015年 第1回 77 style.css html/css/style.css を確認してみよう h1.span { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-background-size: 20px 20px; background-size: 20px 20px; } 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 求めているものと少し違います! http://excode.jp
  • 78. 東区フロントエンド勉強会 2015年 第1回 78 GitHub ai/browserslist に設定方法が記載され ています。 これを参考に、設定を変更します。 ※プロジェクトに合わせ適宜調整してください 今回のプロジェクトは以下の設定を使用します。 browsers:['safari 5', 'ie 8', 'ie 9', 'ie 10', 'ie 11', 'opera 12.1', 'firefox 14', 'ios 6', 'android 2.1'], 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 https://github.com/ai/browserslist http://excode.jp
  • 79. 東区フロントエンド勉強会 2015年 第1回 79 gulpfile.js 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); var csscomb = require('gulp-csscomb'); var autoprefixer = require('gulp-autoprefixer'); gulp.task('sass', function () { gulp.src('./develop/sass/**/*.sass') .pipe(sass().on('error', sass.logError)) .pipe(csscomb()) .pipe(autoprefixer({ browsers:['safari 5', 'ie 8', 'ie 9', 'ie 10', 'ie 11', 'opera 12.1', 'firefox 14', 'ios 6', 'android 2.1'], cascade: false })) .pipe(gulp.dest('./html/css')); }); gulp.task('sass:watch', function () { gulp.watch('./develop/sass/**/*.sass', ['sass']); }); 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 http://excode.jp
  • 80. 東区フロントエンド勉強会 2015年 第1回 80 Windows の方 Mac の方 $ gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms あたらめて gulp sass:watch タスクを実行 > gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms あたらめて gulp sass:watch タスクを実行 watch モードに入りました 再度 gulp sass: watch でファイルを監視します 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 設定を読み直すため一旦、watch から抜けて、 [13:09:14] Starting 'sass'... [13:09:14] Finished 'sass' after 980 μs ^C $ ctrl + c を押し、一旦タスクを終了します [13:09:14] Starting 'sass'... [13:09:14] Finished 'sass' after 980 μs ^C > ctrl + c を押し、一旦タスクを終了します http://excode.jp
  • 81. 東区フロントエンド勉強会 2015年 第1回 81 style.sass 先ほどと同じように develop/sass/style.sass を保存してみてください h1.span transform: rotate(-45deg) background-size: 20px 20px Windows の方 Mac の方 $ gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms [15:38:40] Starting 'sass'... [15:38:40] Finished 'sass' after 9.06 ms gulp sass:watch タスク > gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms [15:38:40] Starting 'sass'... [15:38:40] Finished 'sass' after 9.06 ms gulp sass:watch タスク 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 http://excode.jp
  • 82. 東区フロントエンド勉強会 2015年 第1回 82 style.css html/css/style.css を確認してみよう h1.span { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-background-size: 20px 20px; background-size: 20px 20px; } 第3章 応用 1-2. gulp-autoprefixer でベンダー・プレフィクスを追加 求めている仕上がりになりました http://excode.jp
  • 84. 東区フロントエンド勉強会 2015年 第1回 1-3. gulp-plumber でエラー時に処理が中断されないように 84 style.sass h1 &.span transform: [09:58:54] Starting 'sass'... [09:58:54] Finished 'sass' after 12 ms events.js:85 throw er; // Unhandled 'error' event ^ Error: develop/sass/demo.sass 2:21 error reading values after - at options.error (/Users/…/index.js:276:32) $ この状態で保存すると処理が停止 ↓ 第3章 応用 文法違反などエラー発生時、gulp は処理を中断し停止してしまします。 ←値がない ←処理が停止 http://excode.jp
  • 85. 東区フロントエンド勉強会 2015年 第1回 85 Windows の方 Mac の方 一旦、watch から抜けてプラグインと設定を追加をします [13:09:14] Starting 'sass'... [13:09:14] Finished 'sass' after 980 μs ^C $ ctrl + c を押し、一旦タスクを終了します [13:09:14] Starting 'sass'... [13:09:14] Finished 'sass' after 980 μs ^C > ctrl + c を押し、一旦タスクを終了します 第3章 応用 1-3. gulp-plumber でエラー時に処理が中断されないように http://excode.jp
  • 87. 東区フロントエンド勉強会 2015年 第1回 87 プラグインページの内容を参考に追加しましょ う。 1. インストール npm install gulp-plumber --save-dev 2. タスクを追記 var plumber = require('gulp-plumber'); 3. タスクを .pipe() で繋げる .pipe(plumber()) 第3章 応用 https://www.npmjs.com/package/gulp-plumber 1-3. gulp-plumber でエラー時に処理が中断されないように http://excode.jp
  • 88. 東区フロントエンド勉強会 2015年 第1回 88 Windows の方 Mac の方 > npm install gulp-plumber --save-dev gulp-csscomb を追加 $ npm install gulp-plumber --save-dev gulp-csscomb を追加 第3章 応用 1-3. gulp-plumber でエラー時に処理が中断されないように http://excode.jp
  • 89. 東区フロントエンド勉強会 2015年 第1回 89 gulpfile.js 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); var csscomb = require('gulp-csscomb'); var autoprefixer = require('gulp-autoprefixer'); var plumber = require('gulp-plumber'); gulp.task('sass', function () { gulp.src('./develop/sass/**/*.sass') .pipe(plumber()) .pipe(sass().on('error', sass.logError)) .pipe(csscomb()) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('./html/css')); }); gulp.task('sass:watch', function () { gulp.watch('./develop/sass/**/*.sass', ['sass']); }); 第3章 応用 1-3. gulp-plumber でエラー時に処理が中断されないように http://excode.jp
  • 90. 東区フロントエンド勉強会 2015年 第1回 90 Windows の方 Mac の方 $ gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms あたらめて gulp sass:watch タスクを実行 > gulp sass:watch [15:38:32] Starting 'sass:watch'... [15:38:32] Finished 'sass:watch' after 10 ms あたらめて gulp sass:watch タスクを実行 watch モードに入りました gulp sass: watch でファイルを監視します 第3章 応用 1-3. gulp-plumber でエラー時に処理が中断されないように http://excode.jp
  • 91. 東区フロントエンド勉強会 2015年 第1回 91 style.sass h1 &.span transform: [10:31:18] Starting 'sass'... [10:31:18] Finished 'sass' after 16 ms [10:31:18] Plumber found unhandled error: Error in plugin 'gulp-sass' Message: develop/sass/demo.sass 2:21 error reading values after - Details: column: 21 line: 2 file: stdin status: 1 messageFormatted: develop/sass/demo.sass 2:21 error reading values after - 先ほどと同じように保存 ↓ 第3章 応用 ←値がない ←処理が継続されています 1-3. gulp-plumber でエラー時に処理が中断されないように http://excode.jp
  • 94. 東区フロントエンド勉強会 2015年 第1回 94 メディアクエリ @media をまとめてくれます gulp-combine-media-querieshttps://www.npmjs.com/package/gulp-combine-media-queries 第3章 応用 2. Sass コーディングに役立つプラグイン http://excode.jp
  • 98. 東区フロントエンド勉強会 2015年 第1回 98 CSS をミニファイ化します gulp-minify-csshttps://www.npmjs.com/package/gulp-minify-css 第3章 応用 2. Sass コーディングに役立つプラグイン http://excode.jp
  • 99. 東区フロントエンド勉強会 2015年 第1回 99 CSS を gzip 圧縮します gulp-gziphttps://www.npmjs.com/package/gulp-gzip 第3章 応用 2. Sass コーディングに役立つプラグイン http://excode.jp
  • 101. 東区フロントエンド勉強会 2015年 第1回 101 ファイルを sftp で転送(gulp-ftp もあります) gulp-sftphttps://www.npmjs.com/package/gulp-sftp 第3章 応用 2. Sass コーディングに役立つプラグイン http://excode.jp