gulp + sass に CSScomb を追加
お母ちゃん
2019.9.3
0
0
CSScomb を追加したメモ
CSScombインストール
|
1 |
npm install gulp-csscomb --save-dev |
Gulpfile.js の修正
var csscomb = require(‘gulp-csscomb’); と、
.pipe(csscomb()) を追加する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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: dest } }); gulp.watch(dest + '/**/*.html', ['reload']); gulp.watch(dest + '/**/*.scss', ['sass']); gulp.watch(dest + '/**/*.css', ['reload']); gulp.watch(dest + '/**/*.js', ['reload']); }); gulp.task('reload', () => { browserSync.reload(); }); gulp.task('sass', function() { gulp .src(dest + '/**/*.scss') .pipe(plumber()) .pipe( sass({ outputStyle: 'expanded' }) ) .pipe(autoprefixer()) .pipe(csscomb()) .pipe(gulp.dest(dest)); }); gulp.task('default', ['browser-sync','sass']); |
.csscomb.json
SScomb ジェネレータを使う
色々質問されるので設定したいものを選んでいく。
色々選んでいくと最後に設定用のJSONが表示される。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
{ "remove-empty-rulesets": true, "always-semicolon": true, "color-case": "lower", "block-indent": " ", "color-shorthand": true, "element-case": "lower", "eof-newline": false, "leading-zero": false, "quotes": "single", "sort-order-fallback": "abc", "space-before-colon": "", "space-after-colon": " ", "space-before-combinator": " ", "space-after-combinator": " ", "space-between-declarations": "\n", "space-before-opening-brace": " ", "space-after-opening-brace": "\n", "space-after-selector-delimiter": "\n", "space-before-selector-delimiter": "", "space-before-closing-brace": "\n", "strip-spaces": true, "tab-size": true, "unitless-zero": true, "vendor-prefix-align": true } |
gulpfile.js と同じ場所に、
.csscomb.json を作成し、上記を貼り付ける。
gulp を再起動すると反映されている。
