絶対つまずかないGulp 4入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 4に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18とv19で動作検証をしています。 ※Sass
プロパティの順番メモ（CSScombの設定ファイル晒す） - Qiita
CSScombはプロパティの順番を自動で変更してくれる便利なsublimetextのプラグインです。 プロパティをそろえることで、メンテナンスがしやすくなります。 無駄な記述が入りにくくなり、スタイル重複指定を防ぐことができます。 当初気にしていなかったのですが、先輩のアドバイスにより気を付けたら スタイルの意図がつかみやすくなりました。 ざっくりと言うと、レイアウトが上のほう、デコレーションが下の方に書いておく、です。 sublimetext3で使用しているcsscombの設定ファイル晒します。 http://csscomb.com/ 設定ファイルは、 Preferences > Package Settings > CSSComb > Settings - User から見れます。 { // Full list of supported options and acceptable v
gulp + sass に CSScomb を追加 - Web - HomeMadeGarbage
Gulpfile.js の修正 var csscomb = require(‘gulp-csscomb’); と、 .pipe(csscomb()) を追加する var gulp = require('gulp'); var browserSync = require('browser-sync'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var plumber = require('gulp-plumber'); var csscomb = require('gulp-csscomb'); var dest = './public'; gulp.task('browser-sync', () => { browserSync({ server: { baseDir
初心者でも分かるscssのメディアクエリをまとめる「mqpacker」の使い方
今回は、scssのメディアクエリをまとめる方法を探して試行錯誤していたけど、他のどの記事も説明が抜けてたり、ソースミスでエラーばっかりだった経験から、初心者でも1回で分かる「mqpacker」の使い方を徹底解説します。 今回の完成形 今回やりたいことは、Sass/Scssで下記のようにバラバラになったメディアクエリをまとめることです。 .test-1 { margin-top: 16px; font-size: 16px; } @media screen and (min-width: 600px) { .test-1 { margin-top: 24px; font-size: 18px; } } @media screen and (min-width: 960px) { .test-1 { margin-top: 32px; font-size: 20px; } } .test-2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
