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

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

CSS Nite LP 47 Coder's High 2016 2016.09.24

Sublime Text 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スプライトあまり使わなくなってきた • ベンダープリフィックス Autoprefixer • 便利Mixin 依存が強い • 便利関数依存が強い • 更新が2014年8月からない • Ruby環境依存

Compassの終焉

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

Compassの終焉

Compassやめたい...

一方、Sassは…

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

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

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

Preprocessor Number of Votes Percentage

Sass 1297 63.95%

Less 308 15.19%

Stylus 76 3.75%

No Preprocessor 305 15.04%

Other 42 2.07%

• Update 12/10/2015 • 2028 responses

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


アジェンダ

Sass: Syntactically Awesome Style Sheetshttp://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設計にも欠かせない

SMACSShttps://smacss.com/

FLOCSShttps://github.com/hiloki/flocss

rscsshttp://rscss.io/

ECSShttp://ecss.io/

BEMりやすい記法

BEMhttp://bem.info/

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

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

SCSS.block { display: block; &__element { display: inline-block; &--modifier { background-color: #f00; } } }

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

LibSass

Ruby Sassと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 Benchmarkshttps://github.com/postcss/benchmark#preprocessors

アジェンダ1. Sass


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

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

どれも正解

SassとPostCSSの基本機能比較

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

Sassに近い機能をPostCSSに

nested simple-vars calc color-function等 sassy-mixins、extend each、for、conditionals partial-import

PostCSSプラグイン

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

PostCSSプラグイン

CSSに関わる全ての処理を行うので、プリ/ポストプロセッサーという概念はない

• セレクタのネスト • 変数 • 四則演算 • 関数 • Mixin、Extend • ループ、条件分岐 • パーシャル• 一行コメント • 画像サイズ取得 • 独自プロパティ

• 自動ベンダープリフィックス • プロパティの並びかえ • クラス名にハッシュ付与 • メディアクエリをまとめる • flexboxバグ修正 • フォールバック • コードチェック • 画像インライン変換 • 出力コード整形 • minify（圧縮）

PostCSSは拡張してなんぼ

お好みのPostCSSレシピを

PostCSS.parts | A searchable catalog of PostCSS pluginhttp://postcss.parts/

PreCSShttps://github.com/jonathantneal/precss

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

PostCSS Japanese Stylesheetshttps://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


アジェンダ

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

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

• 各種言語コンパイル • バリデート • 構文チェック • コード変換/置換 • 監視（ウォッチ） • ライブリロード • ローカルサーバー • ファイル名変更 • ファイル結合 • ファイル分割 • ファイル/フォルダ削除

gulpの使い方

設定はJavaScriptで

gulpfile.js

gulpfileの書き方gulpfile.jsvar gulp = require('gulp');

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

// place code for your default task here

});

タスク名

処理を書く

パッケージの読み込み

gulpfileの書き方gulpfile.jsvar gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function () { return gulp.src('./sass/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write()) .pipe(gulp.dest('./css')); });

タスク名

処理を書く .pipeでつなぐ

パッケージの読み込み

gulpfileの書き方gulpfile.jsvar gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function () { return gulp.src('./sass/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write()) .pipe(gulp.dest('./css')); });

gulpfileの書き方gulpfile.coffeegulp = require('gulp') sass = require('gulp-sass') sourcemaps = require('gulp-sourcemaps')

gulp.task 'sass', -> gulp.src('./sass/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write()) .pipe(gulp.dest('./css'))

gulpfileの書き方gulpfile.babel.jsimport gulp from 'gulp'; import sass from 'gulp-sass'; import sourcemaps from 'gulp-sourcemaps';

gulp.task('sass', () => { return gulp.src('./sass/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write()) .pipe(gulp.dest('./css')); });

大切なことはすべてREADME.mdが教えてくれた

gulp-sass https://github.com/dlmanning/gulp-sass


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




$ npm install --global gulp-cli

npmでインストール

npm？

1. Sass

2. PostCSS 3. gulp,js 4. Node.js

アジェンダ

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

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.0Project B

node v6.6.0

Project A

node v4.5.0

Project C

node v7.0.0

nodeのバージョンを切り替えられる

.node-version

v4.5.0

node v6.6.0

.node-version

v7.0.0

.node-version

v6.6.0Project B

node v6.6.0

Project A

node v4.5.0

Project C

node v7.0.0


.node-version

v4.5.0

node v7.0.0

.node-version

v7.0.0

.node-version

v6.6.0Project B

node v6.6.0

Project A

node v4.5.0

Project C

node v7.0.0


.node-version

v4.5.0

(Node Package Manager)

npm https://www.npmjs.com/

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

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

--global オプションはグローバルにインストールどのディレクトリでも使えるコマンドになる


パッケージのグローバルインストール


パッケージのグローバルインストール

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_modules」フォルダに、それぞれにnpmパッケージをインストールする

--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", "gulp-sourcemaps": "^1.6.0" } }

--save-devオプションでインストールしたパッケージが自動で書き込まれる

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を作成パッケージやスクリプトなどを管理する

package.json package.json package.json

雛形の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-scriptpackage.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. gulpfile.js でタスクを書く 5. README.md で説明を書く 6. .gitignoreで「node_nodules」を無視

渡す設定ファイル• .node-version • package.json • (npm-shrinkwrap.json) • gulpfile.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. 黒い画面

イマドキのコーダー環境

コーダーは怠惰であれ

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

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

Engineering