2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

sassのビルド環境を試す

Last updated at Posted at 2018-12-20

導入

デプロイ周り

これからは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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?