Добавить gulp-clean-css в существующий gulpfile.js

Question

Мой сотрудник дал мне файл с именем gulpfile.js, в котором был следующий код. Он смотрит и компилирует мои файлы scss после сохранения.

var gulp       = require('gulp'),
gutil      = require('gulp-util'),
browserify = require('browserify'),
uglify     = require('gulp-uglify'),
concat     = require('gulp-concat'),
changed    = require('gulp-changed'),
compass    = require('gulp-compass'),
buffer     = require('vinyl-buffer'),
source     = require('vinyl-source-stream'),
livereload = require('gulp-livereload');

var scssSources = [
        '_src/scss/**/*.scss'
    ],
    jsSources = [
        '_src/js/main.js'
    ],
    jsVendorSources = [
        '_src/js/vendor.js'
    ],
    scriptsPath = 'assets/js',
    scssPath    = 'assets/css';

var onError = function (error)
{
    gutil.log(gutil.colors.red(error));
    this.emit('end');
};

gulp.task('sass', function()
{
    gulp.src(scssSources)
        .pipe(changed(scssPath))
            .on('error', onError)
        .pipe(compass({
            style: 'expanded',
            sass: '_src/scss',
            css: scssPath,
            relative: true,
            require: ['breakpoint', 'susy']
        }))
            .on('error', onError)
        .pipe(gulp.dest(scssPath))
        .pipe(livereload())
});

gulp.task('js', function()
{
    return browserify(jsSources)
            .on('error', onError)
        .bundle()
            .on('error', onError)
        .pipe(source('main.js'))
            .on('error', onError)
        .pipe(buffer())
            .on('error', onError)
        //.pipe(uglify())
            //.on('error', onError)
        .pipe(gulp.dest(scriptsPath))
        .pipe(livereload());
});

gulp.task('js-vendor', function()
{
    return browserify(jsVendorSources)
            .on('error', onError)
        .bundle()
            .on('error', onError)
        .pipe(source('vendor.js'))
            .on('error', onError)
        .pipe(buffer())
            .on('error', onError)
        //.pipe(uglify())
            //.on('error', onError)
        .pipe(gulp.dest(scriptsPath))
        .pipe(livereload());
});

gulp.task('watch', function()
{
    livereload.listen();
    gulp.watch(['_src/js/main.js', '_src/js/scripts/**/*.js'], ['js']);
    gulp.watch(['_src/js/vendor.js', '_src/js/vendor/**/*.js'], ['js-vendor']);
    gulp.watch(scssSources, ['sass']);
    gulp.watch(['**/*.php', '**/*.html', '**/*.twig']).on('change', function(file) { livereload.changed(file.path) })
});

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

Однако теперь я хочу уменьшить вывод css с помощью пакета npm "gulp-clean-css" ( https://www.npmjs.com/package/gulp-clean-css). Как добавить это в существующий файл gulpfile выше?

До сих пор я уже перешел в мой каталог тем Wordpress и запустил npm install gulp-clean-css --save-dev - так что я предполагаю, что мне просто нужно как-то кодировать это?

Нужна больше информации?

С наилучшими пожеланиями,

Оливер

Answer 1

Мне только что сказали, что я могу изменить стиль с "расширенного" на "сжатый". Doh. Надеюсь, это все равно кому-нибудь поможет!