Upload
sou-lab
View
21.083
Download
0
Embed Size (px)
Citation preview
イマドキのコーダー環境構築 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
2. PostCSS 3. gulp.js 4. Node.js
アジェンダ
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
PostCSS Benchmarkshttps://github.com/postcss/benchmark#preprocessors
アジェンダ1. Sass
2. PostCSS 3. gulp.js 4. Node.js
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
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.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
大切なことはすべて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 install --global gulp-cli
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.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のバージョンを切り替えられる
.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のバージョンを切り替えられる
.node-version
v4.5.0
(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_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. 黒い画面
イマドキのコーダー環境
コーダーは怠惰であれ
環境でとことんラクしよう!