将 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']);

但是我现在希望使用 npm 包 "gulp-clean-css" (https://www.npmjs.com/package/gulp-clean-css) 缩小我的 css 输出。如何将其添加到上面现有的 gulpfile 中？

到目前为止，我已经 cd 到我的 Wordpress 主题目录和运行 npm install gulp-clean-css --save-dev - 所以我假设我只需要以某种方式对其进行编码？

需要更多信息吗？

此致，

奥利弗

Answer 1

有人告诉我可以将样式从 'expanded' 更改为 'compressed'。呵呵。希望这对某人有所帮助！

将 gulp-clean-css 添加到现有的 gulpfile.js

Add gulp-clean-css to existing gulpfile.js

css

node.js

wordpress

npm

gulp-clean-css