css debug

css debug

/* подсвечиваем теги без необходимых атрибутов */
img:not([alt]),
label:not([for]),
input[type=submit]:not([value]) {
  outline:2px solid red;
}

/* тревога, если первый child внутри списка не li и прочие похожие примеры */
ul > *:not(li),
ol > *:not(li),
dl > *:not(dt):not(dd) {
  outline:2px solid red;
}

gulpfile.js

'use strict';

/* параметры для gulp-autoprefixer */
var autoprefixerList = [
'Chrome >= 45',
'Firefox ESR',
'Edge >= 12',
'Explorer >= 10',
'iOS >= 9',
'Safari >= 9',
'Android >= 4.4',
'Opera >= 30'
];

/* пути к исходным файлам (src), к готовым файлам (build), а также к тем, за изменениями которых нужно наблюдать (watch) */
var path = {
    ftp: {
        url: 'httpdocs/',
        globs: 'build/**/*.*'
    },
    build: {
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        img: 'build/img/',
        fonts: 'build/fonts/',
        libs: 'build/libs/'
    },
    dev: {
        html: 'dev/',
        js: 'dev/js/',
        css: 'dev/css/',
        img: 'dev/img/',
        fonts: 'dev/fonts/',
        libs: 'dev/libs/'
    },
    src: {
        html: 'src/*.html',
        js: 'src/js/main.js',
        style: 'src/style/main.scss',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/*.*',
        libs: 'src/libs/**/*.*'
    },
    watch: {
        html: 'src/**/*.html',
        js: 'src/js/**/*.js',
        css: 'src/style/**/*.scss',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*',
        libs: 'src/libs/**/*.*',
        css_build: 'dev/css/*.css',
        js_build: 'dev/js/*.js'
    },
    clean: {
        build: './build/*',
        dev: './dev/*'
    }
};

/* настройки сервера */
var config = {
    server: {
        baseDir: './dev'
    },
    notify: true,
    version: {
        value: '%MDS%',
        append: {
            key: 'v',
            to: ['css', 'js'],
        },
    }
};

/* подключаем gulp и плагины */
var gulp = require('gulp'),                                 // подключаем Gulp
    gutil = require('gulp-util'),
    webserver = require('browser-sync'),                    // сервер для работы и автоматического обновления страниц
    plumber = require('gulp-plumber'),                      // модуль для отслеживания ошибок
    rigger = require('gulp-rigger'),                        // модуль для импорта содержимого одного файла в другой
    sass = require('gulp-sass'),                            // модуль для компиляции SASS (SCSS) в CSS
    autoprefixer = require('gulp-autoprefixer'),            // модуль для автоматической установки автопрефиксов
    postcss = require('gulp-postcss'),
    pxtorem = require('postcss-pxtorem'),
    focus = require('postcss-focus'),
    responsiveImages = require('postcss-responsive-images'),
    size = require('postcss-size'),
    cleanCSS = require('gulp-clean-css'),                   // плагин для минимизации CSS
    uglify = require('gulp-uglify-es').default,             // модуль для минимизации JavaScript
    cache = require('gulp-cache'),                          // модуль для кэширования
    imagemin = require('gulp-imagemin'),                    // плагин для сжатия PNG, JPEG, GIF и SVG изображений
    jpegrecompress = require('imagemin-jpeg-recompress'),   // плагин для сжатия jpeg	
    pngquant = require('imagemin-pngquant'),                // плагин для сжатия png
    rimraf = require('gulp-rimraf'),                        // плагин для удаления файлов и каталогов
    version = require('gulp-version-number'),               // плагин для добавлении версий css и js файлов
    rename = require('gulp-rename'),
    gulpCopy = require ('gulp-copy'),
    ftp = require( 'vinyl-ftp' );


    /* задачи */

// запуск сервера
gulp.task('webserver', function () {
    webserver(config);
});

// сбор html
gulp.task('html:build', function () {
    return gulp.src(path.src.html)                  // выбор всех html файлов по указанному пути
        .pipe(plumber())                            // отслеживание ошибок
        .pipe(rigger())                             // импорт вложений
        .pipe(version(config.version))              // добавление версий css и js
        .pipe(gulp.dest(path.build.html))           // выкладывание готовых файлов
        .pipe(webserver.reload({ stream: true }));  // перезагрузка сервера
    });

// сбор html
gulp.task('html:dev', function () {
    return gulp.src(path.src.html)                  // выбор всех html файлов по указанному пути
        .pipe(plumber())                            // отслеживание ошибок
        .pipe(rigger())                             // импорт вложений
        .pipe(version(config.version))              // добавление версий css и js
        .pipe(gulp.dest(path.dev.html))           // выкладывание готовых файлов
        .pipe(webserver.reload({ stream: true }));  // перезагрузка сервера
    });

// сбор стилей
gulp.task('css:build', function () {
    var processors = [
    pxtorem({
        propList: ['*'],
        selectorBlackList: ['html']
    }),
    focus,
    size,
    responsiveImages
    ];
    
    return gulp.src(path.src.style)     // получим main.scss
        .pipe(plumber())                // для отслеживания ошибок
        .pipe(sass())                   // scss -> css
        .pipe(autoprefixer({            // добавим префиксы
            overrideBrowserslist: autoprefixerList
        }))
        .pipe(gulp.dest(path.build.css))
        .pipe(postcss(processors))
        .pipe(gulp.dest(path.build.css))
        .pipe(rename({ suffix: '.min' }))
        .pipe(cleanCSS())                           // минимизируем CSS
        .pipe(gulp.dest(path.build.css))            // выгружаем в build
        .pipe(webserver.reload({ stream: true }));  // перезагрузим сервер
    });

// сбор стилей
gulp.task('css:dev', function () {
    var processors = [
    /*pxtorem({
        propList: ['*'],
        selectorBlackList: ['html']
    }),*/
    size,
    responsiveImages
    ];
    return gulp.src(path.src.style)     // получим main.scss
        .pipe(plumber())                // для отслеживания ошибок
        .pipe(sass())                   // scss -> css
        .pipe(gulp.dest(path.dev.css))
        .pipe(postcss(processors))
        .pipe(gulp.dest(path.dev.css))            // выгружаем в build
        .pipe(webserver.reload({ stream: true }));  // перезагрузим сервер
    });

/*gulp.task('postcss:build', function(){
    var processors = [
    pxtorem({
        propList: ['*'],
        selectorBlackList: ['html']
    }),
    focus,
    size,
    responsiveImages
    ];
    return gulp.src(path.build.css)
    .pipe(postcss(processors))
});*/

// сбор js
gulp.task('js:build', function () {
    return gulp.src(path.src.js)                    // получим файл main.js
        .pipe(plumber())                            // для отслеживания ошибок
        .pipe(rigger())                             // импортируем все указанные файлы в main.js
        .pipe(gulp.dest(path.build.js))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())                             // минимизируем js
        .pipe(gulp.dest(path.build.js))             // положим готовый файл
        .pipe(webserver.reload({ stream: true }));  // перезагрузим сервер
    });

// сбор js
gulp.task('js:dev', function () {
    return gulp.src(path.src.js)                    // получим файл main.js
        .pipe(plumber())                            // для отслеживания ошибок
        .pipe(rigger())                             // импортируем все указанные файлы в main.js
        .pipe(gulp.dest(path.dev.js))             // положим готовый файл
        .pipe(webserver.reload({ stream: true }));  // перезагрузим сервер
    });

// перенос шрифтов
gulp.task('fonts:build', function (done) {
    return gulp.src(path.src.fonts)
    .pipe(gulpCopy(path.build.fonts, { prefix: 3 }))
    .pipe(gulp.dest('fonts'));
    done();
});

// перенос шрифтов
gulp.task('fonts:dev', function (done) {
    return gulp.src(path.src.fonts)
    .pipe(gulp.dest(path.dev.fonts));
    done();
});

// обработка картинок
gulp.task('image:build', function () {
    return gulp.src(path.src.img)                       // путь с исходниками картинок
        .pipe(cache(imagemin([                          // сжатие изображений
            imagemin.gifsicle({ interlaced: true }),
            jpegrecompress({
                progressive: true,
                max: 90,
                min: 80
            }),
            pngquant(),
            imagemin.svgo({ plugins: [{ removeViewBox: false }] })
            ])))
        .pipe(gulp.dest(path.build.img));               // выгрузка готовых файлов
    });

// обработка картинок
gulp.task('image:dev', function () {
    return gulp.src(path.src.img)
        .pipe(gulp.dest(path.dev.img));
    });

// перенос библиотек
gulp.task('libs:build', function () {
    return gulp.src(path.src.libs)
    .pipe(gulp.dest(path.build.libs));
});

// перенос библиотек
gulp.task('libs:dev', function () {
    return gulp.src(path.src.libs)
    .pipe(gulp.dest(path.dev.libs));
});

// удаление каталога build 
gulp.task('clean:build', function () {
    return gulp.src(path.clean.build, { read: false })
    .pipe(rimraf());
});

// удаление каталога build 
gulp.task('clean:dev', function () {
    return gulp.src(path.clean.dev, { read: false })
    .pipe(rimraf());
});

// очистка кэша
gulp.task('cache:clear', function () {
    cache.clearAll();
});

// сборка
gulp.task('build', gulp.series('clean:build',
    gulp.parallel(
        'html:build',
        'css:build',
        'js:build',
        'fonts:build',
        'image:build',
        'libs:build'
        )
    )
);

// dev сборка
gulp.task('dev', gulp.series('clean:dev',
    gulp.parallel(
        'fonts:dev',
        'html:dev',
        'css:dev',
        'js:dev',
        'image:dev',
        'libs:dev'
        )
    )
);

// запуск задач при изменении файлов
gulp.task('watch', function(err){
    gulp.watch(path.watch.html, gulp.series('html:dev'));
    gulp.watch(path.watch.css, gulp.series('css:dev'));
    gulp.watch(path.watch.js, gulp.series('js:dev'));
    gulp.watch(path.watch.img, gulp.series('image:dev'));
    gulp.watch(path.watch.fonts, gulp.series('fonts:dev'));
    gulp.watch(path.watch.libs, gulp.series('libs:dev'));
    gulp.watch(path.watch.css_build).on('change', webserver.reload);
    gulp.watch(path.watch.js_build).on('change', webserver.reload);
    console.error('Error!', err.message);
});

/*gulp.task('deploy', gulp.series('build', function (done) {
    var conn = ftp.create({
        host: 'travelgid.kz',
        user: 'ahrefa',
        password: 'L!56h0yq',
        parallel: 10,
        log: gutil.log
    });

    var globs = path.ftp.globs;

    conn.rmdir(path.ftp.url, function(e){
        if (e === undefined) {
        // using base = '.' will transfer everything to /public_html correctly 
        // turn off buffering in gulp.src for best performance 
        return gulp.src(globs, {buffer: false})
        // .pipe(conn.newer(path)) // only upload newer files 
        .pipe(conn.newer(path.ftp.url))
        .pipe(conn.dest(path.ftp.url));
        }
        return console.log(e);
    });
    done();
}));
*/
// задача по умолчанию
gulp.task('default', gulp.series('dev', 
    gulp.parallel(
        'webserver',
        'watch'
    )
));