イマドキのコーダー環境構築2016

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

イマドキのコーダー環境構築
2016
CSS Nite LP 47 Coder's High 2016
2016.09.24

SublimeText 3!!
森田壮
@sou_lab 
Gaji-Labo Inc.
Sou-Lab.

「4年前の自分に届けたい。
イマドキのコーディングは
こうなっているんです」
今回のテーマ

から、ちょっと先の

2年半前の私

2014.2.15 CSS Nite LP, Disk 32「Sass」

時代は変わった

Rubyが必要でもなくなった

node-sass
https://github.com/sass/node-sass

$ compass w 
これだけおぼえておけばオケ

もう、オケではない

Compassの終焉

• CSSスプライト
• ベンダープリフィックス
• 便利Mixin
• 便利関数
Compass

• CSSスプライトあまり使わなくなってきた
• ベンダープリフィックス Autopreﬁxer
• 便利Mixin 依存が強い
• 便利関数依存が強い
• 更新が2014年8月からない
• Ruby環境依存
Compassの終焉

• CSSスプライトあまり使わなくなってきた
• ベンダープリフィックス Autopreﬁxer
• 便利Mixin 依存が強い
• 便利関数依存が強い
• 更新が2014年8月からない
• Ruby環境依存
Compassの終焉
Comp...

一方、Sassは…

CSSプリプロセッサの 
デファクトスタンダードに

The State of Front-End Tooling ‒ 2015 
https://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

The State of Front-End Tooling ‒ 2015 
https://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
Preprocessor Nu...

CSSプリプロセッサの 
デファクトスタンダードに

Sassをコンパイル
する方法も変わってきた

Sass単体で使うことがあまりなくなった 
（単体で満足しないという意味で）
$ sass . --watch --style expanded
sassコマンドは使わなくなった

フリーのコンパイラは、ほぼ更新されていない。
GUIコンパイラは死屍累々

有償のコンパイラはメンテナンスされているが、
更新頻度は少なめ。
まだ使える！GUIコンパイラ2選！

その理由として

タスクランナー
でよくね？

タスクランナー

タスクランナー

Grunt からgulpへ

• ストリーミングで高速
• 設定ファイルが見やすく書きやすい
• Google Web Starter Kitで採用
• Gruntの開発が止まっていた
Grunt からgulpへ

そして、2016年

アジェンダ
1. Sass
2. PostCSS
3. gulp.js
4. Node.js

1. Sass
2. PostCSS
3. gulp.js
4. Node.js
アジェンダ

Sass: Syntactically Awesome Style Sheets 
http://sass-lang.com/

Sassの機能
• セレクタのネスト
• 変数
• 四則演算
• 関数
• Mixin、Extend
• ループ、条件分岐
• パーシャル
etc...

Web制作者のためのSassの教科書 
https://www.amazon.co.jp/dp/B00FMLD7UC/

現場で役立つ実践Sass | Adobe Creative Station
https://blogs.adobe.com/creativestation/serialization/web-sass-practice

Dreamweaverでも正式対応
2016年09月現在はベータ3が公開

Dreamweaverで覚える最新Web開発ワークフロー: Sass編 
https://blogs.adobe.com/creativestation/web-dreamweaver-sass-compile-and-options

CSS設計にも欠かせない

SMACSS 
https://smacss.com/

FLOCSS 
https://github.com/hiloki/ﬂocss

rscss 
http://rscss.io/

ECSS 
http://ecss.io/

BEMりやすい記法

BEM 
http://bem.info/

MindBEMding ‒ getting your head ’round BEM syntax 
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-

$「＆」を使ったセレクタ記法 CSS .block { display: block; } .block__element { display: inline-block; } .block__element--modifier { backgr...$

ブロック(モジュール)ごとのファイル分割

LibSass

RubySassとLibSass
Ruby製
Rubyのみで動作
C/C++製
様々な言語に対応

node-sass
https://github.com/sass/node-sass

Sass 3.5 Release Candidates
http://blog.sass-lang.com/posts/809572-sass-35-release

PostCSS Benchmarks 
https://github.com/postcss/benchmark#preprocessors

PostCSS Benchmarks 
https://github.com/postcss/benchmark#preprocessors

アジェンダ
1. Sass
2. PostCSS
3. gulp.js
4. Node.js

PostCSS - a tool for transforming CSS with JavaScript 
http://postcss.org/

PostCSSって…？
• Sassの次？
• CSSプリプロセッサ？
• CSSポストプロセッサ？
• 次世代CSSが使えるもの？

どれも正解
（ある意味）

SassとPostCSSの基本機能比較
• セレクタのネスト
• 変数
• 四則演算
• 関数
• Mixin、Extend
• ループ、条件分岐
• パーシャル etc...

Sassに近い機能をPostCSSに
nested
simple-vars
calc
color-function等
sassy-mixins、extend
each、for、conditionals
partial-import
PostCS...

PostCSSプラグイン
CSSに関わる全ての処理を行うので、 
プリ/ポストプロセッサーという概念はない
• セレクタのネスト
• 変数
• 四則演算
• 関数
• Mixin、Extend
• ループ、条件分岐
• パーシャル
• 一行コメ...

PostCSSは拡張してなんぼ

お好みのPostCSSレシピを

PostCSS.parts | A searchable catalog of PostCSS plugin 
http://postcss.parts/

PreCSS 
https://github.com/jonathantneal/precss

cssnext - Use tomorrow's CSS syntax, today. 
http://cssnext.io/

PostCSS Japanese Stylesheets 
https://github.com/ikkou/postcss-japanese-stylesheets

PostCSSの処理
お好みのプラグインを組み合わせてCSSをコンパイル

Sassから乗りかえ？

Sassでも使える
SCSSのみ対応
SassをSassにコンパイル
SassをCSSにコンパイルすることはできない

ポストプロセッサ的な使用法
SassでCSSにコンパイルしてから、 
PostCSSでCSSをさらにコンパイル

Sassの前後でPostCSS
SassをSassにPostCSSしてから、SassでCSSに
コンパイルして、PostCSSでさらにコンパイル

で、どうやって 
コンパイルするの？

1. Sass
2. PostCSS
3. gulp.js
4. Node.js
アジェンダ

gulp.js - the streaming build system
http://gulpjs.com/

• CSSスプライト
• SVGスプライト
• SVG圧縮
• フォント作成
• 画像最適化（圧縮）
• 画像リサイズ
• スタイルガイド
• ファイル圧縮
• アップロード
• スクリーンショット
• 通知
• 各種言語コンパイル
• バリデ...

gulpの使い方

設定はJavaScriptで

gulpfile.js

gulpﬁleの書き方
gulpﬁle.js
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task h...

gulpﬁleの書き方
gulpﬁle.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcem...

gulpﬁleの書き方
gulpﬁle.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcem...

gulpﬁleの書き方
gulpﬁle.coffee
gulp = require('gulp')
sass = require('gulp-sass')
sourcemaps = require('gulp-sourcemaps')
gulp...

gulpﬁleの書き方
gulpﬁle.babel.js
import gulp from 'gulp';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemap...

大切なことはすべてREADME.mdが教えてくれた
gulp-sass
https://github.com/dlmanning/gulp-sass

大切なことはすべてREADME.mdが教えてくれた
gulp-postcss
https://github.com/postcss/gulp-postcss

実行は黒い画面で

$ gulp
defaultタスクはgulpコマンドのみで動作する
gulpの実行

$ gulp sass
それ以外のタスクはgulpコマンド + タスク名
gulpの実行

gulpコマンドの
インストールが必要

gulp - Getting Started
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
大切なことはすべてREADME.mdが教えてくれた

gulp - Getting Started
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
大切なことはすべてREADME.mdが教えてくれた
$ npm ...

npmでインストール

npm？

1. Sass
2. PostCSS
3. gulp,js
4. Node.js
アジェンダ

npmを使うには、
Node.jsをインストール

Node.js
https://nodejs.org/

Node.js
https://nodejs.org/

Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
nodeのバージョン大混在

Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
nodeのバージョン大混在
node v6.6.0
古くて動かないかも？新しくて動かないかも？

Node.js
https://nodejs.org/
🙅🙅

Node.jsの
バージョン管理をしよう

anyenv + ndenv
https://github.com/riywo/anyenv + https://github.com/riywo/ndenv

nodist
https://github.com/marcelklehr/nodist

node v4.5.0
.node-version
v7.0.0
.node-version
v6.6.0
Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
no...

node v6.6.0
.node-version
v7.0.0
.node-version
v6.6.0
Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
no...

node v7.0.0
.node-version
v7.0.0
.node-version
v6.6.0
Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
no...

(Node Package Manager)

npm
https://www.npmjs.com/

すべて、npmパッケージ
• node-sass
• postcss本体
• postcssプラグイン
• gulp本体
• gulpプラグイン

npm パッケージの
インストール

gulp - Getting Started
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
$ npm install --global gulp-cli

--global オプションはグローバルにインストール
どのディレクトリでも使えるコマンドになる
$ npm install --global gulp-cli
パッケージのグローバルインストール

$ npm install --global gulp-cli
パッケージのグローバルインストール
node_modules
node v6.6.0 gulp-cli

node_modulesnode_modulesnode_modules
Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
ローカルインストール
「node_mo...

--save-dev オプションでpackage.json 
にインストールしたパッケージが書き込まれる
$ npm install --save-dev gulp
パッケージのローカルインストール

$package.jsonに書き込まれる package.json { "devDependencies": { "gulp": "^3.9.1", "gulp-postcss": "^6.2.0", "gulp-sass": "^2.3.2",...$

package.json

npmの設定ファイル

node_modulesnode_modulesnode_modules
Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
ローカルパッケージ
プロジェクトごとに...

雛形のpackage.jsonを作成
$ npm init -y
package.jsonを作成

--save-dev オプションでpackage.json 
にインストールしたパッケージが書き込まれる
$ npm install --save-dev gulp
パッケージのローカルインストール

installは i 、--save-devは -D と省略できる
$ npm i -D gulp
パッケージのローカルインストール

パッケージは複数まとめてインストールもできる
package.jsonにもまとめて書き込まれる
$ npm i -D gulp gulp-sass gulp-postcss
パッケージのローカルインストール

npm-shrinkwrap.jsonというファイルが
生成されパッケージのバージョンが固定される
$ npm shrinkwrap
パッケージのバージョンを固定する

$npm-script package.json { "scripts": { "start": "gulp" } } node_module内のコマンドを実行できるここではgulpコマンドを指定$

npm-scriptに設定したコマンド（今回はgulp）
を実行できる
この方法だとグローバルのgulp-cliは不要
$ npm start
npm-script

つまり

package.jsonを渡せば
同じ環境が作れる

他の設定ファイルも 
全部共有しよう

環境を作る流れ
1. .node-version でバージョン指定
2. $ npm init -y でプロジェクト作成
3. $ npm install --save-dev ◯◯ 
でパッケージインストール
4. gulpﬁle.js でタ...

渡す設定ファイル
• .node-version
• package.json
• (npm-shrinkwrap.json)
• gulpﬁle.js
• .gitignore

設定ファイルを受け取る側

package.jsonに書かれている
パッケージがローカルインストールされる
$ npm install
npmパッケージのインストール

これだけ！

1. リポジトリからクローン
2. $npm install
3. $gulp or $npm start
4. ッターーン！
5. プルリク
6. LGTM!!
繰り返す
環境を受け取ったイマドキのコーダー

サンプルファイル 
https://github.com/sou-lab/cssnite-lp47

まとめ

1. 　ndenv or 　nodist
2. Sass
3. PostCSS
4. gulp
5. 黒い画面
イマドキのコーダー環境

コーダーは怠惰であれ

環境でとことんラクしよう！