【gulp】css-declaration-sorter が効かない時【アルファベット順に並べ替えたい】

目次

[chat face=”ハテナの人1.jpg” name=”” align=”left” border=”gray” bg=”none” style=””]
「cssプロパティをアルファベット順に並べ替えて納品してほしい」
というお客さんからの要望があったよ。

開発時、sassをgulpでコンパイルさせる時に並べ替えられるように設定したくて『css-declaration-sorter』をインストールしてみたけど、
コンパイルさせたcssを見ても並べ変わってないな・・・なんでだろう。。。

手動で並べ替えるには大変すぎるよ!なんとかならないかな。
[/chat]

そんなあなたに、私がやった対処法をご紹介します。

私は3日間くらいずっとgulpfile.jsとにらめっこして解決できなくて、挙句の果てには手動でcssファイルを並べ替えたのです。。。
エンジニアならば、そんなめんどくさい作業に時間を割いている場合ではありません

この記事を読んでササッと解決してしまいましょう!
[box04 title=”前提”]

  • 普段からgulpを使っている
  • gulp-postcssがインストールしてある
  • gulp-csscombも使っている

[/box04]

css-declaration-sorterをインストールする

npm install --save-dev css-declaration-sorter

ターミナルを開いて、ディレクトリを作業ファイルまで移動します。
そしてcss-declaration-sorterをインストールしましょう。
コマンドは上記の通りです。

npm install --save-dev css-declaration-sorter

↑こんな感じの画面になって、
package.jsonに“css-declaration-sorter”: “^4.0.1”, という記述が入っていればOKです。

gulpfile.jsをいじる

結論から先に。きちんとアルファベット順に並び替わるコードを記述します↓

/* 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の後に記述』という記事が沢山ヒットします。

その通り、

※間違っていた書き方※

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を走らせないとダメなのでは・・・?」

と気づきました!

.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 の中身です。

/node_modules/css-declaration-sorter/orders

このファイルを見てみたのも今回の解決の糸口になったと思います。
同じ様にcsscombフォルダの中のjsonも見てみたら、どうやら並び替えの指示が書かれていた感じがしたのですよ。

.pipe(postcss([ require('postcss-csscomb')('zen'), ]))

gulpfile.jsに書かれていた↑この部分の「zenって何のことだろうな?」と思いまして。

ほげほげ/node_modules/csscomb/config/zen.json

それで見てみたら、zen.jsonというファイルがありました。これを開いたら、並べ替えの指示みたいのが書いてありました。

まとめ‖タスクを記述する順番が大切なんだなという気付き

技術的な記事を書くのはなかなか難しいですね(^^;)
とても簡単にまとめるとこうです。
[box02 title=”gulpを使ってcssをアルファベット順に並べ替えるには”]

  1. css-declaration-sorter
  2. gulpfile.jsにcss-declaration-sorterを読み込む
  3. sassの後、さらにcsscombの後でcss-declaration-sorterを走らせる

[/box02]

以上、うまくアルファベット順にコンパイルされない時は
gulpfile.jsを開いて記述順を確認してみてください(^o^)/