というお客さんからの要望があったよ。
開発時、sassをgulpでコンパイルさせる時に並べ替えられるように設定したくて『css-declaration-sorter』をインストールしてみたけど、
コンパイルさせたcssを見ても並べ変わってないな･･･なんでだろう。。。
手動で並べ替えるには大変すぎるよ！なんとかならないかな。
そんなあなたに、私がやった対処法をご紹介します。
私は3日間くらいずっとgulpfile.jsとにらめっこして解決できなくて、挙句の果てには手動でcssファイルを並べ替えたのです。。。
エンジニアならば、そんなめんどくさい作業に時間を割いている場合ではありません。
この記事を読んでササッと解決してしまいましょう！
- 普段からgulpを使っている
- gulp-postcssがインストールしてある
- gulp-csscombも使っている
css-declaration-sorterをインストールする
|
1 |
npm install --save-dev css-declaration-sorter |
ターミナルを開いて、ディレクトリを作業ファイルまで移動します。
そしてcss-declaration-sorterをインストールしましょう。
コマンドは上記の通りです。
↑こんな感じの画面になって、
package.jsonに“css-declaration-sorter”: “^4.0.1”, という記述が入っていればOKです。
gulpfile.jsをいじる
結論から先に。きちんとアルファベット順に並び替わるコードを記述します↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* Gulpとプラグインを読み込む */ const gulp = require('gulp'); const cached = require('gulp-cached'); const htmlv = require('gulp-html-validator'); const htmlMin = require('gulp-htmlmin'); const plumber = require('gulp-plumber'); const postcss = require(gulp-postcss'); const sass = require('gulp-sass'); const sassGlob = require("gulp-sass-glob"); const cssdeclsort = require(css-declaration-sorter); 中略 gulp.task('sass', () => { return gulp.src(filePattern.sass, { base: baseDir.src }) .pipe(plumber()) .pipe(sassGlob()) .pipe(sass(sassArgs)) .pipe(postcss([ require('postcss-csscomb')('zen'), ])) .pipe(postcss([cssdeclsort({order: 'alphabetically'})])) ←アルファベット順に並べ替える指示 .pipe(gulp.dest(baseDir.dist)); }); |
※少し省略している部分がありますが、だいたい皆さん同じようなプラグインを入れたりしているかと思います。
gulpタスクの記述の順番が原因だった【sassの直後というわけでもない】
css-declaration-sorter でアルファベット順に並べ替える方法をググって調べていると、
『sassの後に記述』という記事が沢山ヒットします。
その通り、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
※間違っていた書き方※ gulp.task('sass', () => { return gulp.src(filePattern.sass, { base: baseDir.src }) ... .pipe(sassGlob()) .pipe(sass(sassArgs)) .pipe(postcss([cssdeclsort({order: 'alphabetically'})])) .pipe(postcss([ require('postcss-csscomb')('zen'), ])) ... }); |
↑この様にsassのタスクのすぐ後ろに書いていたんですね。
でもこれが並び替えがうまくいかない原因でした。
csscombも整形(並び替え等)ができるタスクだった
CSSプロパティの記述順について – CSScomb解決編
こちらの記事を読んでみると、どうやらCSScombというプラグインもcssプロパティを並び替えることができるもののようです。
｢ということは、これの後にcss-declaration-sorterを走らせないとダメなのでは･･･？｣
と気づきました！
|
1 2 3 4 5 6 |
.pipe(sassGlob()) .pipe(sass(sassArgs)) .pipe(postcss([ require('postcss-csscomb')('zen'), ])) .pipe(postcss([cssdeclsort({order: 'alphabetically'})])) |
この様に、
sassの後にpostcss-csscomb、その後に css-declaration-sorter を走らせましょう。
おまけ‖node_modulesフォルダの中を覗いてみた
gulpを使うとnode_modulesというフォルダが出来ると思います。そのフォルダの中にさらに、プラグインごとのフォルダがバ〜〜っとたくさん入っているはず。
そこからcss-declaration-sorterのフォルダを見てみると、並び替える指示が書かれたjsonファイルが入っています。
ほげほげ/node_modules/css-declaration-sorter/orders の中身です。
このファイルを見てみたのも今回の解決の糸口になったと思います。
同じ様にcsscombフォルダの中のjsonも見てみたら、どうやら並び替えの指示が書かれていた感じがしたのですよ。
|
1 |
.pipe(postcss([ require('postcss-csscomb')('zen'), ])) |
gulpfile.jsに書かれていた↑この部分の｢zenって何のことだろうな？｣と思いまして。
それで見てみたら、zen.jsonというファイルがありました。これを開いたら、並べ替えの指示みたいのが書いてありました。
まとめ‖タスクを記述する順番が大切なんだなという気付き
技術的な記事を書くのはなかなか難しいですね(^^;)
とても簡単にまとめるとこうです。
- css-declaration-sorter
- gulpfile.jsにcss-declaration-sorterを読み込む
- sassの後、さらにcsscombの後でcss-declaration-sorterを走らせる
以上、うまくアルファベット順にコンパイルされない時は
gulpfile.jsを開いて記述順を確認してみてください(^o^)/
