Add gulp-clean-css zu bestehenden gulpfile.js

Question

Ein Mitarbeiter von mir gab mir eine Datei namens gulpfile.js, die den folgenden Code enthielt. Es überwacht und kompiliert meine scss-Dateien beim Speichern.

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

Allerdings möchte ich jetzt meine CSS-Ausgabe mit dem NPM-Paket "schlucke-clean-css" (https://www.npmjs.com/package/gulp-clean-css) minify. Wie füge ich dies zu der obenstehenden gulpfile hinzu?

Bisher habe ich schon in mein Wordpress Theme-Verzeichnis cd und npm install gulp-clean-css --save-dev laufen - also nehme ich an, ich muss es nur irgendwie codieren?

Benötigen Sie weitere Informationen?

Mit freundlichen Grüßen,

Oliver

Answer 1

Mir wurde gesagt, nur kann ich Stil von 'erweiterten' ändern zu 'komprimiert'. Do. Hoffe, das hilft trotzdem jemandem!