導入
デプロイ周り
これからはcssはSassで書こう。 - Qiita
https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe
わかりやすい
gulp-sass
の出力形式に指定する識別子もこれなのね。
Sassの複数のimportはglobを使って一つにまとめると幸せ - Qiita
https://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34
gulp-glob
ここがすごいぞ! stylelint! - Qiita
https://qiita.com/terrierscript/items/ff4f6972c988afbec3a8
gulpでつかう事例や設定がある
stylelintをgulpで使うときのデバッグ設定
しておかないと止まったけど理由がわからない状態だった
stylelintおすすめルール・プラグイン - Qiita
https://qiita.com/FumiyaShibusawa/items/fdeb7632177643cd42e1
作った人天才か?と思ったプラグイン、なるほど。
gulp.jsで便利なタスクを作ってみよう【エラーと通知編】 | 東京上野のWeb制作会社LIG
https://liginc.co.jp/252645
gulpでエラーのデスクトップ通知をさせる、監視も停止しない
Quick Start · gulp.js
https://gulpjs.com/docs/en/getting-started/quick-start
gulpの公式、バージョン4がなかなか入らなかったので、ここを見て安心しつつグローバルから入れ直した
Gulp v4に更新してみました - 株式会社MIRAI
https://mi-rai.co.jp/blog/2181
少し書き方が変わったけど、並列処理などもできるgulp4
@babel/preset-env · Babel
https://babeljs.io/docs/en/babel-preset-env
babel7について公式
ブラウザ対応もenvでできるのね
Webpack 4:babel-loader のアップデートで起きたエラーを解決 - Qiita
https://qiita.com/oreo3@github/items/b383c57949e0f117cbea
ブラウザ対応もenvでできる
@babel/preset-envのuseBuiltInsを使ってpolyfillする - Qiita
https://qiita.com/shisama/items/88080011bbc69e3e620b
polyfillのための@babel/polyfillのインストールが不要
今更のバベる。 Babel 7を試してみたメモ - かもメモ
https://chaika.hatenablog.com/entry/2018/11/21/150000
browserslistのクエリを使って、>=1% in JP(日本で使われている1%以上)のような指定も可能です。
すごいな。。
browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
https://github.com/browserslist/browserslist
とても便利。
設定は、package.json、rcファイル、gulpの指定などできそう。
jsの設定ファイルがあればいいのにな。
でもrcファイルでコメントがかけたのでいいや。(#)
あ、Shareable Configs
でjs管理できるな。。
どのツールで利用できるかなど、使い道が書かれている
ここでも確認できるしcliでもいける
autoprefixer 基本 - Qiita
https://qiita.com/oreo3@github/items/dc7d570c2798e82433ca
ieでのcss-gridのautoprefixer
最新版で学ぶwebpack 4入門 - Babel 7でES2018環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA
https://ics.media/entry/16028
webpackはメモだけしてひとまず保留しておこう。。
intellijではリソースルートにマークする
空行の除去
[SCSS] [Gulp] これからはじめるGulp(14):gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる | UI/UX Design、フロントエンド系の技術に関する備忘録 | whiskers
https://whiskers.nukos.kitchen/2014/12/14/gulp-cached.html
2014だけどもgulpのプラグインなどいろいろ書いてありそう
postcss,scss
PostCSSを導入してみた & PostCSSの便利プラグインと誰得プラグイン – Snaplog
https://blog.mismithportfolio.com/web/20160911postcss
PostCSS まとめ - Qiita
https://qiita.com/morishitter/items/4a04eb144abf49f41d7d
次はブラウザが解釈可能なCSSコードを受け取り、最適化をおこなうためのプラグインを紹介します。これらのプラグインはPostCSS製のプリプロセッサーだけでなく、SassやLess、Stylusとも併用可能(プリプロセッサーの出力を入力として受け取るから)です。
今回はこの位置付けで使ったということになりそう
postcss-neat
でpostcssのプリプロセッサでneatをパースして変換することができそう。
ただ、エディタでの補完機能が活用できなくなる気がする。
使い方
mixins:neat/bourbon
neatに関する9件の記事 - Qiita
https://qiita.com/tags/neat
bourbonに関する17件の記事 - Qiita
https://qiita.com/tags/bourbon