將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包「吞掉潔淨的CSS」來縮小我的CSS輸出（https://www.npmjs.com/package/gulp-clean-css）。我如何將它添加到上面的現有gulp文件？

到目前爲止，我已經進入我的Wordpress主題目錄並運行npm install gulp-clean-css --save-dev - 所以我認爲我只是需要以某種方式對其進行編碼？

需要更多信息？

最好的問候，

奧利弗

Answer 1

我只是告訴我可以從「擴大」到「壓縮」改變風格。衛生署。無論如何希望這可以幫助別人！