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

CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47
「イマドキのコーダー環境構築」で発表したスライドです。

Transcript

2. イマドキのコーダー環境構築 2 016 CSS Nite LP 47 Coder's High 2016 2016.09.24
3. Sou-Lab. 森田 壮 @sou_lab Gaji-Labo Inc. Sublime Text 3!!
4. 今回のテーマ 「4年前の自分に届けたい。 イマドキのコーディングは こうなっているんです」
6. から、ちょっと先の
7. 2年半前の私
8. 2014.2.15 CSS Nite LP, Disk 32「Sass」
9. 時代は変わった
10. Rubyが必要でもなくなった
11. node-sass https://github.com/sass/node-sass
12. $ compass w これだけおぼえておけばオケ
13. もう、オケではない
14. Compassの終焉
15. Compass • CSSスプライト • ベンダープリフィックス • 便利Mixin • 便利関数
16. Compassの終焉 • CSSスプライト あまり使わなくなってきた • ベンダープリフィックス Autoprefixer • 便利Mixin 依存が強い • 便利関数 依存が強い • 更新が2014年8月からない • Ruby環境依存
17. Compassの終焉 • CSSスプライト あまり使わなくなってきた • ベンダープリフィックス Autoprefixer • 便利Mixin 依存が強い Compassやめたい... • 便利関数 依存が強い • 更新が2014年8月からない • Ruby環境依存
18. 一方、Sassは…
19. CSSプリプロセッサの デファクトスタンダードに
20. The State of Front-End Tooling ‒ 2015 https://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
21. 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 The State of Front-End Tooling ‒ 2015 https://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
22. CSSプリプロセッサの デファクトスタンダードに
23. Sassをコンパイル する方法も変わってきた
24. sassコマンドは使わなくなった $ sass . --watch --style expanded Sass単体で使うことがあまりなくなった （単体で満足しないという意味で）
25. GUIコンパイラは死屍累々 フリーのコンパイラは、ほぼ更新されていない。
26. まだ使える！GUIコンパイラ2選！ 有償のコンパイラはメンテナンスされているが、 更新頻度は少なめ。
27. その理由として
28. タスクランナー でよくね？
29. タスクランナー
30. タスクランナー
31. Grunt からgulp へ
32. Grunt からgulpへ • ストリーミングで高速 • 設定ファイルが見やすく書きやすい • Google Web Starter Kitで採用 • Gruntの開発が止まっていた
33. そして、2016年
34. アジェンダ 1. Sass 2. PostCSS 3. gulp.js 4. Node.js
35. アジェンダ 1. Sass 2. PostCSS 3. gulp.js 4. Node.js
36. Sass: Syntactically Awesome Style Sheets http://sass-lang.com/
37. Sassの機能 • セレクタのネスト • 変数 • 四則演算 • 関数 • Mixin、 Extend • ループ、条件分岐 • パーシャル etc...
38. Web制作者のためのSassの教科書 https://www.amazon.co.jp/dp/B00FMLD7UC/
39. 現場で役立つ実践Sass | Adobe Creative Station https://blogs.adobe.com/creativestation/serialization/web-sass-practice
40. Dreamweaverでも正式対応 2016年09月現在はベータ3が公開
41. Dreamweaverで覚える最新Web開発ワークフロー: Sass編 https://blogs.adobe.com/creativestation/web-dreamweaver-sass-compile-and-options
42. CSS設計にも欠かせない
43. SMACSS https://smacss.com/
44. FLOCSS https://github.com/hiloki/flocss
45. rscss http://rscss.io/
46. ECSS http://ecss.io/
47. BEMりやすい記法
48. BEM http://bem.info/
49. MindBEMding ‒ getting your head ’round BEM syntax http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-
50. 「＆」を使ったセレクタ記法 SCSS .block { display: block; &_ _element { display: inline-block; &--modifier { background-color: #f00; } } } CSS .block { display: block; } .block__element { display: inline-block; } .block__element--modifier { background-color: #f00; }
51. ブロック(モジュール)ごとのファイル分割
52. LibSass
53. Ruby SassとLibSass Ruby製 Rubyのみで動作 C/C++製 様々な言語に対応
54. node-sass https://github.com/sass/node-sass
55. Sass 3.5 Release Candidates http://blog.sass-lang.com/posts/809572-sass-35-release
56. PostCSS Benchmarks https://github.com/postcss/benchmark#preprocessors
57. PostCSS Benchmarks https://github.com/postcss/benchmark#preprocessors
58. アジェンダ 1. Sass 2. PostCSS 3. gulp.js 4. Node.js
59. PostCSS - a tool for transforming CSS with JavaScript http://postcss.org/
60. PostCSSって…？ • Sassの次？ • CSSプリプロセッサ？ • CSSポストプロセッサ？ • 次世代CSSが使えるもの？
61. どれも正解 （ある意味）
62. SassとPostCSSの基本機能比較 セレクタのネスト 変数 • 四則演算 • 関数 • Mixin、 Extend • ループ、条件分岐 • パーシャル etc... • •
63. Sassに近い機能をPostCSSに セレクタのネスト nested • 変数 simple-vars calc • 四則演算 color-function等 • 関数 • Mixin、 Extend sassy-mixins、extend for、conditionals • ループ、条件分岐 each、 • パーシャル partial-import • PostCSSプラグイン
64. PostCSSプラグイン セレクタのネスト • 変数 • 四則演算 • 関数 • Mixin、 Extend • ループ、条件分岐 • パーシャル • 一行コメント • 画像サイズ取得 • 独自プロパティ • • 自動ベンダープリフィックス • プロパティの並びかえ • クラス名にハッシュ付与 • メディアクエリをまとめる • flexboxバグ修正 • フォールバック • コードチェック • 画像インライン変換 • 出力コード整形 • minify （圧縮） CSSに関わる全ての処理を行うので、 プリ/ポストプロセッサーという概念はない
65. PostCSSは拡張してなんぼ
66. お好みのPostCSSレシピを
67. PostCSS.parts | A searchable catalog of PostCSS plugin http://postcss.parts/
68. PreCSS https://github.com/jonathantneal/precss
69. cssnext - Use tomorrow's CSS syntax, today. http://cssnext.io/
70. PostCSS Japanese Stylesheets https://github.com/ikkou/postcss-japanese-stylesheets
71. PostCSSの処理 お好みのプラグインを組み合わせてCSSをコンパイル
72. Sassから乗りかえ？
73. Sassでも使える SCSSのみ対応 SassをSassにコンパイル SassをCSSにコンパイルすることはできない
74. ポストプロセッサ的な使用法 SassでCSSにコンパイルしてから、 PostCSSでCSSをさらにコンパイル
75. Sassの前後でPostCSS SassをSassにPostCSSしてから、SassでCSSに コンパイルして、PostCSSでさらにコンパイル
76. で、どうやって コンパイルするの？
77. アジェンダ 1. Sass 2. PostCSS 3. gulp.js 4. Node.js
78. gulp.js - the streaming build system http://gulpjs.com/
80. • • • • • • • • • • • 各種言語コンパイル • CSSスプライト 構文チェック • SVG圧縮 監視（ウォッチ） • 画像最適化（圧縮） ローカルサーバー • スタイルガイド ファイル結合 • アップロード ファイル/フォルダ削除 • 通知 バリデート • SVGスプライト コード変換/置換 • フォント作成 ライブリロード • 画像リサイズ ファイル名変更 • ファイル圧縮 ファイル分割 • スクリーンショット
81. gulpの使い方
82. 設定は JavaScript で
83. gulpfile.js
84. gulpfileの書き方 gulpfile.js var gulp = require('gulp'); パッケージの読み込み gulp.task('default', function() { タスク名 // place code for your default task here }); 処理を書く
85. gulpfileの書き方 gulpfile.js var 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でつなぐ タスク名
86. gulpfileの書き方 gulpfile.js var 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')); });
87. gulpfileの書き方 gulpfile.coffee gulp = 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'))
88. gulpfileの書き方 gulpfile.babel.js import 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')); });
89. 大切なことはすべてREADME.md が教えてくれた gulp-sass https://github.com/dlmanning/gulp-sass
90. 大切なことはすべてREADME.md が教えてくれた gulp-postcss https://github.com/postcss/gulp-postcss
91. 実行は黒い画面で
92. gulpの実行 $ gulp defaultタスクは gulpコマンドのみで動作する
93. gulpの実行 $ gulp sass それ以外のタスクは gulpコマンド + タスク名
94. gulpコマンドの インストールが必要
95. 大切なことはすべてREADME.md が教えてくれた gulp - Getting Started https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
96. 大切なことはすべてREADME.md が教えてくれた $ npm install --global gulp-cli gulp - Getting Started https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
97. npmでインストール
98. npm？
99. アジェンダ 1. Sass 2. PostCSS 3. gulp,js 4. Node.js
100. npmを使うには、 Node.jsをインストール
101. Node.js https://nodejs.org/
102. Node.js https://nodejs.org/
104. nodeのバージョン大混在 node v4.5.0 node v6.6.0 node v7.0.0 Project A Project B Project C
105. nodeのバージョン大混在 node v4.5.0 node v6.6.0 node v7.0.0 Project A Project B Project C 古くて動かないかも？ 新しくて動かないかも？ node v6.6.0
106. 🙅🙅 Node.js https://nodejs.org/
107. Node.jsの バージョン管理をしよう
108. anyenv + ndenv https://github.com/riywo/anyenv + https://github.com/riywo/ndenv
109. nodist https://github.com/marcelklehr/nodist
110. nodeのバージョンを切り替えられる node v4.5.0 v4.5.0 Project A .node-version node v4.5.0 node v6.6.0 v6.6.0 Project B .node-version node v7.0.0 v7.0.0 Project C .node-version
111. nodeのバージョンを切り替えられる node v4.5.0 v4.5.0 Project A .node-version node v6.6.0 v6.6.0 Project B .node-version node v6.6.0 node v7.0.0 v7.0.0 Project C .node-version
112. nodeのバージョンを切り替えられる node v4.5.0 v4.5.0 Project A .node-version node v6.6.0 v6.6.0 Project B .node-version node v7.0.0 v7.0.0 Project C .node-version node v7.0.0
113. (Node Package Manager)
114. npm https://www.npmjs.com/
115. すべて、npmパッケージ • node-sass • postcss本体 • postcssプラグイン • gulp本体 • gulpプラグイン
116. npm パッケージの インストール
117. $ npm install --global gulp-cli gulp - Getting Started https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
118. パッケージのグローバルインストール $ npm install --global gulp-cli --global オプションはグローバルにインストール どのディレクトリでも使えるコマンドになる
119. パッケージのグローバルインストール $ npm install --global gulp-cli node v6.6.0 gulp-cli node_modules
120. ローカルインストール node v4.5.0 node v6.6.0 node v7.0.0 Project A Project B Project C node_modules node_modules node_modules 「node_modules」フォルダに、 それぞれにnpmパッケージをインストールする
121. パッケージのローカルインストール $ npm install --save-dev gulp --save-dev オプションでpackage.json にインストールしたパッケージが書き込まれる
122. 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オプションでインストールした パッケージが自動で書き込まれる
123. package.json
124. npmの設定ファイル
125. ローカルパッケージ node v4.5.0 node v6.6.0 node v7.0.0 Project A Project B Project C node_modules package.json node_modules package.json node_modules package.json プロジェクトごとにpackage.jsonを作成 パッケージやスクリプトなどを管理する
126. package.jsonを作成 $ npm init -y 雛形のpackage.jsonを作成
127. パッケージのローカルインストール $ npm install --save-dev gulp --save-dev オプションでpackage.json にインストールしたパッケージが書き込まれる
128. パッケージのローカルインストール $ npm i -D gulp installは i 、--save-devは -D と省略できる
129. パッケージのローカルインストール $ npm i -D gulp gulp-sass gulp-postcss パッケージは複数まとめてインストールもできる package.jsonにもまとめて書き込まれる
130. パッケージのバージョンを固定する $ npm shrinkwrap npm-shrinkwrap.jsonというファイルが 生成されパッケージのバージョンが固定される
131. npm-script package.json { } "scripts": { "start": "gulp" } node_module内のコマンドを実行できる ここではgulpコマンドを指定
132. npm-script $ npm start npm-scriptに設定したコマンド（今回はgulp） を実行できる この方法だとグローバルの gulp-cliは不要
133. つまり
134. package.jsonを渡せば 同じ環境が作れる
135. 他の設定ファイルも 全部共有しよう
136. 環境を作る流れ 1. .node-version でバージョン指定 2. $ npm init -y でプロジェクト作成 3. $ npm install --save-dev ◯◯ でパッケージインストール 4. gulpfile.js でタスクを書く 5. README.md で説明を書く 6. .gitignoreで「node_nodules」を無視
137. 渡す設定ファイル • .node-version • package.json • (npm-shrinkwrap.json) • gulpfile.js • .gitignore
138. 設定ファイルを受け取る側
139. npmパッケージのインストール $ npm install package.jsonに書かれている パッケージがローカルインストールされる
140. これだけ！
141. 環境を受け取ったイマドキのコーダー 1. リポジトリからクローン 2. $ npm install 3. $ gulp or $ npm start 4. ッターーン！ 5. プルリク 6. LGTM!! 繰り返す
142. サンプルファイル https://github.com/sou-lab/cssnite-lp47
143. まとめ
144. イマドキのコーダー環境 1. ndenv or 2. Sass 3. PostCSS 4. gulp 5. 黒い画面 nodist
145. コーダーは怠惰であれ
146. 環境でとことんラクしよう！