Как собрать стили через gulp?

Question

[Артем Колчин]

Есть шаблон на wordpress
Там есть стили в less и css , правильно ли я понимаю что править надо less? а потом через консоль собирать less
пережимать их и на выходе получается css минифицированный?
Получается если я сейчас уже готовый css поправлю, это будет ошибкой. Т.к. при запуске сборщика он затрет все изменения?
Запускать как его? правильно ли я понимаю что мне надо просто пойди в папку в через консоль туда где лежит мой
gulpfile.js и просто запустить gulp команду? или у этой команды какие то есть параметры?
В целом хотел поменять кое какие стили.

gulpfile.js

const gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins(),
    streamqueue = require('streamqueue'),
    urladjuster = require('gulp-css-url-adjuster'),
    imageminJpegRecompress = require('imagemin-jpeg-recompress'),
    imageminPngquant = require('imagemin-pngquant'),
    del = require('del'),
    glob = require('glob'),
    fs = require('fs');


gulp.task('less', function () {
    glob.sync('less/*').forEach(function (path_each) {
        if (fs.statSync(path_each).isDirectory()) {
            gulp.src(path_each + "/*.less")
                .pipe(plugins.plumber())
                .pipe(plugins.concat('style.css'))
                .pipe(plugins.less())
                .pipe(urladjuster({
                    replace: ['../../', '../../../']
                }))
                .pipe(plugins.autoprefixer([
                    'ios_saf >= 6',
                    'ie 10',
                    'opera 12',
                    'last 5 versions'
                ]))
                .pipe(plugins.csso())
                .pipe(gulp.dest(function (file) {
                    return "css/" + path_each;
                }))
                .pipe(plugins.notify({message: 'Собран, чанк'}));
        }
    });

});

gulp.task('css_vendor', function () {
    return gulp.src([
        'css/vendor/*.css',
        '!css/vendor/plugins-style/'
    ])
        .pipe(plugins.plumber())
        .pipe(plugins.concat('vendor.css'))
        .pipe(plugins.autoprefixer(
            [
                'ios_saf >= 6',
                'ie 10',
                'opera 12',
                'last 5 versions'
            ]
        ))
        .pipe(gulp.dest('css/less'))
        .pipe(plugins.notify({message: 'Вендор css собрались'}));
});

gulp.task('plugins-helper', function () {
    return gulp.src([
        'css/vendor/plugins-style/*.less'
    ])

        .pipe(plugins.plumber())
        .pipe(plugins.less())
        .pipe(plugins.autoprefixer(
            [
                'ios_saf >= 6',
                'ie 10',
                'opera 12',
                'last 5 versions'
            ]
        ))
        .pipe(plugins.csso({
            comments: false
        }))
        .pipe(gulp.dest(function (file) {
            return file.base;
        }))
        .pipe(plugins.notify({message: 'Вспомогательные стии плагина собрались'}));
});

gulp.task('add_theme_header', ['build'], function () {
    return streamqueue({objectMode: true},
        gulp.src('css/theme_name.css'),
        gulp.src('style.css')
    )
        .pipe(plugins.concat('style.css'))
        .pipe(gulp.dest('./'))
        .pipe(plugins.notify({message: 'Добавлен заголовок темы'}));
});

gulp.task('build', ['less', 'css_vendor', 'plugins-helper'], function () {
    return streamqueue({objectMode: true},
        gulp.src('css/theme_name.css'),
        gulp.src('css/less/vendor.css'),
        gulp.src('css/less/common_critical/style.css')
    )
        .pipe(plugins.concat('css/opt/tmp_concat.css'))
        .pipe(urladjuster({
            replace: ['../../../', '']
        }))
        .pipe(plugins.csso({
            comments: false
        }))
        .pipe(plugins.rename('style.css'))
        .pipe(gulp.dest('./'))
        .pipe(plugins.notify({message: 'Оптимизация, прошла'}));
});

gulp.task('js', function () {
    return gulp.src([
        'js/*.js',
        '!js/*.min.js',
        '!js/vendor/**/*.js'
    ])
        .pipe(plugins.plumber())
        .pipe(plugins.uglify({
            compress: true,
        }))
        .pipe(plugins.rename({
            extname: ".js",
            suffix: ".min"
        }))
        .pipe(gulp.dest(function (file) {
            return file.base;
        }))
        .pipe(plugins.notify({message: 'Скрипты темы собрались'}));
});

gulp.task('svg', function () {
    return gulp.src('images/**/*.svg')
        .pipe(plugins.svgo())
        .pipe(gulp.dest(function (file) {
            return file.base;
        }))
        .pipe(plugins.notify({message: 'SVG оптимизированы'}));
});

gulp.task('img_optimization', function () {
    return gulp.src([
        'images/**/*.png',
        'images/**/*.jpeg',
        'images/**/*.jpg'
    ])
        .pipe(plugins.plumber())
        .pipe(plugins.imagemin([
            plugins.imagemin.gifsicle({interlaced: true}),
            imageminJpegRecompress({
                progressive: true,
                max: 80,
                min: 70
            }),
            imageminPngquant({quality: '80'}),
            plugins.imagemin.svgo({plugins: [{removeViewBox: true}]})
        ]))
        .pipe(gulp.dest(function (file) {
            return file.base;
        }))
});

gulp.task('watch', function () {
    gulp.watch(['less/**/*.less'], ['add_theme_header']);
    gulp.watch(
        [
            'js/*.js',
            '!js/*.min.js',
            '!js/vendor/**/*.js'
        ],
        ['js']
    );
    gulp.watch(
        [
            'css/vendor/plugins-style/*.less'
        ],
        ['plugins-helper']
    );
});

gulp.task('default', ['watch']);

Comments

[Антон Литвиненко]

если тема будет обновляться, то стили перетрутся в любом случае
в случае чудой темы все изменения рекомендуется вносить через дочернюю тему. а стили проще ввсего перебить в кастомном файле

[Артем Колчин]

Антон Литвиненко, Нет, тема кастомная и поэтому обновлений тут нет.
Просто предыдущий разработчик делал и хотелось бы обновить стили без неожиданностей.
Так как обновляться через gulp? просто захожу в консоль и пишу gulp?
или нужно какие то еще данные. исходя из моего gulpfile.js

[Артем Колчин]

Антон Литвиненко, ну или как то запустить отдельный таск, чтоб собрать только файлы в папке /less

[Антон Литвиненко]

Артем Колчин, ну обычно в папке с галпфайлом запускается консоль и если ничего не установлено то пишем nmp i
это добавит папку node_modules и установит все зависомости. после этого да, gulp это дефолтная задача.
я для подобных мелких правок вообще использую программу koala

[Артем Колчин]

Антон Литвиненко, а можно ссылочку на гит?

[Антон Литвиненко]

Артем Колчин, на коалу? пожлст
koala-app.com