イマドキのコーダー環境構築 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スプライト あまり使わなくなってきた • ベンダープリフィックス Autoprefixer • 便利Mixin 依存が強い • 便利関数 依存が強い • 更新が2014年8月からない • Ruby環境依存 Compassの終焉
• CSSスプライト あまり使わなくなってきた • ベンダープリフィックス Autoprefixer • 便利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/flocss
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-
「＆」を使ったセレクタ記法 SCSS .block { display: block; } .block__element { display: inline-block; } .block__element--modifier { backg...
ブロック(モジュール)ごとのファイル分割
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ポストプロセッサ？ • CSS4が使えるもの？
どれも正解
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
gulpfileの書き方 gulpfile.js var gulp = require('gulp'); gulp.task('default', function() { // place code for your default task h...
gulpfileの書き方 gulpfile.js var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcem...
gulpfileの書き方 gulpfile.js var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcem...
gulpfileの書き方 gulpfile.coffee gulp = require('gulp') sass = require('gulp-sass') sourcemaps = require('gulp-sourcemaps') gulp...
gulpfileの書き方 gulpfile.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. gulpfile.js でタ...
渡す設定ファイル • .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
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Upcoming SlideShare
Loading in …5
×

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

317 views

Published on

CSS Nite LP47 Coder's High 2016
「イマドキのコーダー環境構築」で発表したスライドです。

※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。

Published in: Engineering
0 Comments
0 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
317
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

×