在现有的gulpfile.js中添加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”(https://www.npmjs.com/package/gulp-clean-css)来缩小css输出。如何将此添加到上面现有的吞咽文件中？

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

需要更多的信息吗？

诚挚的问候,

奥利弗

Answer 1

我刚被告知我可以将风格从“扩展”改为“压缩”。多伊尔。希望这能帮到别人！