決断力を消耗しないSass開発環境構築 / Set up Sass development environment

Sassのコンパイル、ベンダープレフィックス自動付加、Lint、自動フォーマット、pre-commit hookなど、チーム開発に最適なSass開発環境をステップ・バイ・ステップで構築していく。

デザイナーにもオススメ！シンプルですぐできるSass（SCSS）開発環境構築
https://kuroeveryday.blogspot.com/2018/10/setup-sass-development-environment.html

https://twitter.com/bc_rikko

Transcript

1. 決断⼒を消耗しない Sass開発環境構築 フロントエンド交流会 - 2019/08/22 ダーシノ（@bc_rikko)
2. さくらインターネット フロントエンドエンジニア ダーシノ NES.css ファミコン⾵CSSフレームワーク GitHub Stars: 13,000+ 世界ランク 4位
3. 1⽇に使える決断⼒に 上限があることを 知っていますか？ ＼突然ですが／
4. 決断⼒を消耗すると ミスしやすくなる https://ja.wikipedia.org/wiki/決断疲れ
5. どんな⼩さな決定でも 決断⼒を消費する
6. I really want to clear my life to make it so that I have to make as few decisions as possible about anything except how to best serve this community. - Mark Zuckerberg 画像: https://en.wikipedia.org/wiki/Mark_Zuckerberg 引⽤元: https://www.cnbc.com/2017/01/05/mark-zuckerberg-and-john-paul-dejorias-simple-wardrobe-trick.html
7. Iʼm trying to pare down decisions. I donʼt want to make decisions about what Iʼm eating or wearing. Because I have too many other decisions to make, - Brack Obama 画像: https://en.wikipedia.org/wiki/Barack_Obama 引⽤元: https://www.vanityfair.com/news/2012/09/barack-obama-michael-lewis
8. 決断を減らすように 努⼒している
9. 今⽇着る服も、 晩ごはんの献⽴も、 コーディングスタイルも。
10. 決断⼒を消耗しない 開発環境をつくりましょう
11. やること 1. Node.jsのインストール 2. プロジェクト作成 3. Sass→CSSのコンパイル 4. ベンダープレフィックス付加 5. コーディングスタイルの統⼀ 6. ⾃動フォーマット 7. ファイル圧縮 8. エディタ上で⾃動フォーマット 9. コミット前にLintチェック 参考: https://kuroeveryday.blogspot.com/2018/10/setup-sass-development-environment.html
12. TL;DR
13. // package.json { "name": "sass-project", "scripts": { "watch": "npm run sass -- --fix", "build": "npm run stylelint && npm run clean && npm run sass && npm run autoprefix && npm run minify", "sass": "node-sass --output-style expended --source-map true scss/style.scss css/style.css", "clean": "rimraf css", "autoprefix": "postcss --use autoprefixer --map false --output css/style.css css/style.css", "stylelint": "stylelint ./scss/**/*.scss --fix", "minify": "cleancss -o css/style.min.css css/style.css" }, "devDependencies": { "autoprefixer": "^9.6.1", "clean-css-cli": "^4.3.0", "husky": "^3.0.2", "lint-staged": "^9.2.1", "node-sass": "^4.12.0", "postcss-cli": "^6.1.3", "prettier": "^1.18.2", "rimraf": "^2.6.3", "stylelint": "^10.1.0", "stylelint-config-recess-order": "^2.0.3", "stylelint-config-standard": "^18.3.0", "stylelint-prettier": "^1.1.1", "stylelint-scss": "^3.9.3" }, "browserslist": [ ">= 1% in JP", "ie >= 10" ], "stylelint": { "plugins": [ "stylelint-scss", "stylelint-prettier" ], "extends": [ "stylelint-config-standard", "stylelint-config-recess-order" ], "rules": { "prettier/prettier": true, "at-rule-no-unknown": null, "scss/at-rule-no-unknown": true } }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "scss/**/*.scss": [ "npm run stylelint", "git add" ] } }
14. 1. Node.jsのインストール • nodejs.orgからインストーラーをダウン ロードして、Node.jsをインストールする • LTS（推奨版）を選べば間違いない • -envのようなバージョン管理ツールは必要 に応じて使う
15. 2. プロジェクト作成 Sass開発環境のプロジェクト（ディレクトリ）を作成し、npmの初期設定を⾏う
 ※ npm: Node.jsのパッケージ管理ツール # ディレクトリを作成する $ mkdir sass-project && cd sass-project # npmの初期設定（package.json）が作成される $ npm init
16. 3. Sass→CSSのコンパイル # ディレクトリを作成する ./sass-project ┣ css // コンパイルされたCSSのコードを格納する ┗ scss // Sass(scss)のコードを格納する # Sassをコンパイルするツールをインストールする $ npm install -D node-sass 補⾜情報 • npm installでライブラリをインストールできる • -Dは開発環境の依存関係を保存するためのオプション
17. 3. Sass→CSSのコンパイル 補⾜情報 • npm run sassを実⾏するとSass→CSSにコンパイルされる • オプション • —output-style expanded: 出⼒されたCSSが読みやすくなる • —source-map true: ブラウザのdevtoolsを⾒たときにSassファイルを参照してくれる • 最終形（オススメ） • node-sass
 —output-style expanded —source-map true
 scss/style.scss css/style.css { "scripts": { "sass": "node-sass scss/style.scss css/style.css" } } ./package.json
18. 3. Sass→CSSのコンパイル ./cssにゴミが残ることがあるのでコンパイル前に削除する # rimraf（rm -rfを実⾏してくれるツール） $ npm install -D rimraf # package.json 補⾜情報 • npm run buildを実⾏するとclean→sassの順番で実⾏してくれる { "scripts": { "build": "npm run clean && npm run sass", "sass": "...", "clean": "rimraf css" } }
19. 3. Sass→CSSのコンパイル エディタで修正したら⾃動でコンパイルしてほしいとき # package.json # ファイルの変更を監視して⾃動でコンパイルする $ npm run watch { "scripts": { "watch": "npm run sass -- --watch", "build": "...", "sass": "...", "clean": “..." } }
20. 4. ベンダープレフィックス付加 -ms-, -o-, -moz-, -webkit-とか調べるのが⾯倒なので⾃動で付加する # PostCSS（CSSに対していろいろやってくれる） $ npm install -D postcss-cli # PostCSSのプラグイン # Autoprefixer（⾃動でベンダープレフィックスをつけてくれる） $ npm install -D autoprefixer # package.json # browserslistで国内1%以上のシェアとIE10に対応させる { "scripts": {}, "browserslist": [ ">= 1% in JP", "ie >= 10”] } 補⾜情報 • browserslistでサポート対象のブラウザバーションを指定する • 詳細は https://browsersl.ist/ で確認できる
21. 4. ベンダープレフィックス付加 # package.json { "scripts": { "watch": "...", "build": "npm run clean && npm run sass && npm run autoprefix", "clean": "...", “sass" : "...", "autoprefix": "postcss --use autoprefixer --map false ―output css/style.css css/style.css" }, "browserslist": [ ">= 1% in JP", "ie >= 10"] } 補⾜情報 • npm run buildを実⾏するとclean→sass→autoprefixが実⾏される
22. 4. ベンダープレフィックス付加 // コンパイル前 $color: black; body { background-color: $color; } .flex { display: flex; } IE10⽤にベンダープレフィックを ⾃動でつけてくれる // コンパイル後 body { background-color: black; } .flex { display: -ms-flexbox; display: flex; }
23. 5. コーディングスタイルの統⼀ 個⼈差をなくすためにコーディングスタイルを統⼀する # Stylelint（CSSのコーディングスタイルをチェックしてくれる） $ npm install -D stylelint # StylelintのSCSS⽤プラグイン $ npm install -D stylelint-scss # 標準的なコーディングスタイルのルール $ npm install -D stylelint-config-standard # プロパティ順を強制するプラグイン $ npm install -D stylelint-config-recess-order
24. 5. コーディングスタイルの統⼀ Stylelintのルールを設定する { "scripts": {}, "browserslist": [], "stylelint": { "plugins": [ "stylelint-scss" ], "extends": [ "stylelint-config-standard", "stylelint-config-recess-order" ], "rules": { "at-rule-no-unknown": null, "scss/at-rule-no-unknown": true } } } # package.json 補⾜情報 • rulesのat-rule-no-unknowはSCSSの@mixinや@functionをエラーにしないための設定
25. 5. コーディングスタイルの統⼀ # package.json 補⾜情報 • npm run stylelintを実⾏するとルールにしたがって⾃動でコードを修正してくれる • npm run buildを実⾏するとclean→stylelint→sass→autoprefixが実⾏される { "scripts": { "watch": "...", "build": "npm run clean && npm run stylelint && npm run sass && npm run autoprefix", "clean": "...", "sass": "...", "autoprefix": "...", "stylelint": "stylelint scss/**/*.scss --fix" } }
26. 6. ⾃動フォーマット stylelint ̶fixでは直しきれない部分を⾃動で修正する # StylelintでPrettierを使うためのプラグイン # (いろんなコードをフォーマットしてくれる) $ npm install -D prettier stylelint-prettier # package.json { "stylelint": { "rules": { "prettier/prettier": true ←追加 } } }
27. 6. ⾃動フォーマット // Before .my-style { width: 100px; height: 500px; background-color: #333333; padding: 10px; position: relative; margin: 10px; color: #ffffff; } // After .my-style { position: relative; width: 100px; height: 500px; padding: 10px; margin: 10px; color: #fff; background-color: #333; }
28. 7. ファイル圧縮 不要なコメントやスペースを削除してファイルを圧縮する # clean-css(コメントやスペースを削除して圧縮してくれる) $ npm install -D clean-css-cli # package.json { "scripts": { "watch": "...", "build": "npm run clean && npm run stylelint && npm run sass && npm run autoprefix && npm run minify", "clean": "...", "sass": "...", "autoprefix": "...", "stylelint": "...", "minify": "cleancss -o css/style.min.css css/style.css" } }
29. 7. ファイル圧縮 // Before .my-style { position: relative; width: 100px; height: 500px; padding: 10px; margin: 10px; color: #fff; background-color: #333; } // After .my- style{position:relative;wi dth:100px;height: 500px;padding:10px;margin: 10px;color:#fff;background -color:#333}
30. 8. エディタ上で⾃動フォーマット VSCode上で保存したときに⾃動フォーマットする ※ prettier-vscode, vscode-stylelintの拡張機能必須 # .vscode/settings.json { "editor.formatOnSave": true, "prettier.stylelintIntegration": true }
31. 9. コミット前にLintチェック 最終防衛ライン（pre-commit hook）でLintチェックする # husky(git hooksを使いやすくしてくれる) $ npm install -D husky # lint-staged(ステージングされたファイルをチェックする) $ npm install -D lint-staged # package.json { "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "scss/**/*.scss": ["npm run build:stylelint", "git add"] } }
32. 9. コミット前にLintチェック # エラーが含まれているとコミットできない $ git commit -m “エラーが含まれています” husky > pre-commit (node v8.16.0) ↓ Stashing changes... [skipped] → No partially staged files found... › Running tasks... › Running tasks for scss/**/*.scss ✖ npm run stylelint git add ✖npm run stylelint found some errors. Please fix them and try committing again. # エラーがなければコミット前に⾃動フォーマットする $ git commit -m “⾃動フォーマットされます” husky > pre-commit (node v8.16.0) ↓ Stashing changes... [skipped] → No partially staged files found... ✔ Running tasks... [master c28cbea] haha 1 file changed, 1 insertion(+), 8 deletions(-)
33. 参考サイト https://kuroeveryday.blogspot.com/2018/10/setup-sass-development-environment.html デザイナーにもオススメ！ シンプルですぐできるSass（SCSS）開発環境構築