現状
scssファイルをgulpで監視して、cssファイルを生成しています。
現状のgulpfile.jsの中身は以下の様な感じ。
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var postcss = require("gulp-postcss");
var mqpacker = require("css-mqpacker");
gulp.task('default', function () {
return gulp.watch('../BU/**/css/*scss', gulp.series('css'));
});
gulp.task("css", function() {
const plugin = [
mqpacker()
];
return gulp.src("../BU/**/css/*scss")
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(autoprefixer({
grid: true
}))
.pipe(postcss(plugin))
.pipe(gulp.dest("../BU/"));
});
ベンダープレフィックス自動付与の「gulp-autoprefixer」と、メディアクエリをまとめるプラグイン「mqpacker」を入れて、BUフォルダ下にあるcssフォルダ内のscssファイルを監視しています。
コマンドラインでgulpと実行するとcssが生成されます。
あと「gulp-postcss」も入れています。
現状のエラー監視
gulp-sassが入っているので、以下のようなcssがあった場合エラーは出力されます。
.hoge{
color: #ddd
font-size: 14px;
}
１行目#dddの後に「;」がないという間違い。
以下gulpを実行した際のコマンドラインの出力
[16:23:21] Error in plugin "gulp-sass"
Message:
../BU/sample/css/style.scss
Error: Invalid CSS after " font-size": expected "}", was ": 14px;"
on line 3 of ../BU/sample/css/style.scss
>> font-size: 14px;
以下略
なんとなくのエラー文しか出ないという状態・・・
また以下のようなコードであった場合、エラーは出ずそのまま間違ったcssが出力されてしまいます。
.hoge{
.foo{
color: #www;
font-size: 14pm;
}
}
colorが無効な値で、font-sizeの単位も間違っていますね。
[16:46:01] Starting 'css'...
[16:46:01] Finished 'css' after 10 ms
しかしcssはそのまま出力されてしまいます。
やりたいこと
stylelintを入れてもっと詳細にcssの構文エラーを出力したい。
stylelintでは様々な構文チェックを設定して監視できます。
中でも以下のことがチェックできるのが良いと思いました。
・同名セレクタの重複禁止
・セレクタ内のプロパティ重複禁止
・無効な文字の禁止
手順
では早速環境を作っていきます。
以下のパッケージのインストール
npmコマンドで以下のパッケージをインストールします。
・stylelint
・stylelint-scss
・stylelint-config-recommended
・stylelint-config-recommended-scss
npm i -D stylelint stylelint-scss stylelint-config-recommended stylelint-config-recommended-scss
各パッケージがインストールできたら後は設定ファイルを作っていくだけです。
gulpfile.jsの設定
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var postcss = require("gulp-postcss");
var mqpacker = require("css-mqpacker");
var stylelint = require('stylelint');
gulp.task('default', function () {
return gulp.watch('../BU/**/css/*scss', gulp.series('css'));
});
gulp.task("css", function() {
const plugin = [
mqpacker(),
stylelint()
];
return gulp.src("../BU/**/css/*scss")
.pipe(sass({
outputStyle: 'expanded'
}))
.pipe(autoprefixer({
grid: true
}))
.pipe(postcss(plugin))
.pipe(gulp.dest("../BU/"));
});
以下の部分が更新されています。
var stylelint = require('stylelint');
const plugin = [
mqpacker(),
stylelint()
];
package.jsonの設定
{
"name": "gulp",
"version": "1.0.0",
"description": "ページコーディング用",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"gulp"
],
"author": "",
"license": "MIT",
"devDependencies": {
"css-mqpacker": "^7.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.1.0",
"browserslist": [
"last 5 version",
"> 3%",
"ie >= 9"
],
"stylelint": "^13.12.0",
"stylelint-config-recommended": "^4.0.0",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-scss": "^3.19.0"
}
}
以下の部分を追記しただけです。
"stylelint": "^13.12.0",
"stylelint-config-recommended": "^4.0.0",
"stylelint-config-recommended-scss": "^4.2.0",
"stylelint-scss": "^3.19.0"
.stylelintrc.jsの設定
.stylelintrc.jsはstylelintの設定ファイルです。このファイルを読み込んで様々な構文チェックを適用します。
module.exports = {
extends: [
'stylelint-config-recommended',
'stylelint-config-recommended-scss',
],
rules:{
"no-descending-specificity":null
}
}
インストールしたstylelint-config-recommendedとstylelint-config-recommended-scssを適用しています。
この２つは、予め用意されているおすすめの構文チェックルールがまとめられたものになります。
「-scss」の方はscss構文もチェックできるようにするためのものです。
またrulesを記述することで自由に設定をカスタマイズできます。
「no-descending-specificity」は
詳細度が高いセレクタより後に、詳細度が低いセレクタを禁止
というルールなので外しました。
結果
さて、ではstylelintを適用したgulpを実行してみます。
scssは以下のものです。
.hoge{
.foo{
color: #www;
font-size: 14pm;
}
}
実行結果
[17:15:43] gulp-postcss: sample/css/style.css
stylelint: /Users/BU/sample/css/style.css:2:10: Unexpected invalid hex color "#www" (color-no-invalid-hex)
stylelint: /Users/BU/sample/css/style.css:3:14: Unexpected unknown unit "pm" (unit-no-unknown)
エラーが出ましたね。
color-no-invalid-hexは無効なプロパティの値
unit-no-unknownは不明なプロパティの単位
という感じですね。
また以下のようなscssでも試してみます。
.hoge{
color: #ddd;
font-size: 14px;
}
.hoge{
font-size: 12px;
}
実行結果
[17:19:19] gulp-postcss: sample/css/style.css
stylelint: /Users/BU/sample/css/style.css:6:1: Unexpected duplicate selector ".hoge", first used at line 1 (no-duplicate-selectors)
no-duplicate-selectorsというエラーが出ましたね。
これで満足です。
以上です。