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

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

ターミナルを開いて、ディレクトリを作業ファイルまで移動します。
そして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 の中身です。

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

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

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

それで見てみたら、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^)/