イマドキのコーダー環境構築2016
•
73 likes•30,256 views
CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。
イマドキのコーダー環境構築2016
- 2. イマドキのコーダー環境構築 2016 CSS Nite LP 47 Coder's High 2016 2016.09.24
- 3. SublimeText 3!! 森田 壮 @sou_lab Gaji-Labo Inc. Sou-Lab.
- 6. から、ちょっと先の
- 7. 2年半前の私
- 8. 2014.2.15 CSS Nite LP, Disk 32「Sass」
- 9. 時代は変わった
- 10. Rubyが必要でもなくなった
- 13. もう、オケではない
- 14. Compassの終焉
- 15. • CSSスプライト • ベンダープリフィックス • 便利Mixin • 便利関数 Compass
- 16. • CSSスプライト あまり使わなくなってきた • ベンダープリフィックス Autoprefixer • 便利Mixin 依存が強い • 便利関数 依存が強い • 更新が2014年8月からない • Ruby環境依存 Compassの終焉
- 17. • CSSスプライト あまり使わなくなってきた • ベンダープリフィックス Autoprefixer • 便利Mixin 依存が強い • 便利関数 依存が強い • 更新が2014年8月からない • Ruby環境依存 Compassの終焉 Compassやめたい...
- 18. 一方、Sassは…
- 20. The State of Front-End Tooling ‒ 2015 https://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
- 21. 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
- 24. Sass単体で使うことがあまりなくなった （単体で満足しないという意味で） $ sass . --watch --style expanded sassコマンドは使わなくなった
- 27. その理由として
- 28. タスクランナー でよくね？
- 29. タスクランナー
- 30. タスクランナー
- 31. Grunt からgulpへ
- 32. • ストリーミングで高速 • 設定ファイルが見やすく書きやすい • Google Web Starter Kitで採用 • Gruntの開発が止まっていた Grunt からgulpへ
- 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...
- 39. 現場で役立つ実践Sass | Adobe Creative Station https://blogs.adobe.com/creativestation/serialization/web-sass-practice
- 42. CSS設計にも欠かせない
- 47. BEMりやすい記法
- 49. MindBEMding ‒ getting your head ’round BEM syntax http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-
- 50. 「＆」を使ったセレクタ記法 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; } } }
- 52. LibSass
- 55. Sass 3.5 Release Candidates http://blog.sass-lang.com/posts/809572-sass-35-release
- 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等 sassy-mixins、extend each、for、conditionals partial-import PostCSSプラグイン • セレクタのネスト • 変数 • 四則演算 • 関数 • Mixin、Extend • ループ、条件分岐 • パーシャル
- 64. PostCSSプラグイン CSSに関わる全ての処理を行うので、 プリ/ポストプロセッサーという概念はない • セレクタのネスト • 変数 • 四則演算 • 関数 • Mixin、Extend • ループ、条件分岐 • パーシャル • 一行コメント • 画像サイズ取得 • 独自プロパティ • 自動ベンダープリフィックス • プロパティの並びかえ • クラス名にハッシュ付与 • メディアクエリをまとめる • flexboxバグ修正 • フォールバック • コードチェック • 画像インライン変換 • 出力コード整形 • minify（圧縮）
- 65. PostCSSは拡張してなんぼ
- 66. お好みのPostCSSレシピを
- 67. PostCSS.parts | A searchable catalog of PostCSS plugin http://postcss.parts/
- 69. cssnext - Use tomorrow's CSS syntax, today. http://cssnext.io/
- 72. Sassから乗りかえ？
- 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')); });
- 91. 実行は黒い画面で
- 93. $ gulp sass それ以外のタスクはgulpコマンド + タスク名 gulpの実行
- 95. gulp - Getting Started https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md 大切なことはすべてREADME.mdが教えてくれた
- 96. gulp - Getting Started https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md 大切なことはすべてREADME.mdが教えてくれた $ npm install --global gulp-cli
- 97. npmでインストール
- 98. npm？
- 99. 1. Sass 2. PostCSS 3. gulp,js 4. Node.js アジェンダ
- 104. Project B node v6.6.0 Project A node v4.5.0 Project C node v7.0.0 nodeのバージョン大混在
- 105. Project B node v6.6.0 Project A node v4.5.0 Project C node v7.0.0 nodeのバージョン大混在 node v6.6.0 古くて動かないかも？ 新しくて動かないかも？
- 107. Node.jsの バージョン管理をしよう
- 108. anyenv + ndenv https://github.com/riywo/anyenv + https://github.com/riywo/ndenv
- 110. 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
- 111. 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
- 112. 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
- 115. すべて、npmパッケージ • node-sass • postcss本体 • postcssプラグイン • gulp本体 • gulpプラグイン
- 116. npm パッケージの インストール
- 117. gulp - Getting Started https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md $ npm install --global gulp-cli
- 118. --global オプションはグローバルにインストール どのディレクトリでも使えるコマンドになる $ npm install --global gulp-cli パッケージのグローバルインストール
- 119. $ npm install --global gulp-cli パッケージのグローバルインストール node_modules node v6.6.0 gulp-cli
- 120. 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パッケージをインストールする
- 121. --save-dev オプションでpackage.json にインストールしたパッケージが書き込まれる $ npm install --save-dev gulp パッケージのローカルインストール
- 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_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
- 126. 雛形のpackage.jsonを作成 $ npm init -y package.jsonを作成
- 127. --save-dev オプションでpackage.json にインストールしたパッケージが書き込まれる $ npm install --save-dev gulp パッケージのローカルインストール
- 128. installは i 、--save-devは -D と省略できる $ npm i -D gulp パッケージのローカルインストール
- 129. パッケージは複数まとめてインストールもできる package.jsonにもまとめて書き込まれる $ npm i -D gulp gulp-sass gulp-postcss パッケージのローカルインストール
- 131. npm-script package.json { "scripts": { "start": "gulp" } } node_module内のコマンドを実行できる ここではgulpコマンドを指定
- 133. つまり
- 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. 設定ファイルを受け取る側
- 140. これだけ！
- 141. 1. リポジトリからクローン 2. $npm install 3. $gulp or $npm start 4. ッターーン！ 5. プルリク 6. LGTM!! 繰り返す 環境を受け取ったイマドキのコーダー
- 143. まとめ
- 144. 1. ndenv or nodist 2. Sass 3. PostCSS 4. gulp 5. 黒い画面 イマドキのコーダー環境
- 145. コーダーは怠惰であれ
- 146. 環境でとことんラクしよう！