2014-09-12 15 views
5

Lauf Sass 3.4.3, Compass 1.0.1, Gulp 3.8.8 und Gulp-Kompass 1.3.1Gulp-Kompass Komprimieren sass nicht funktioniert

gulp.task('compass', function() { 
    gulp.src('comp/sass/style.scss') 
     .pipe(compass({ 
      sass: 'comp/sass', 
      image: 'dev/theme/images', 
      style: 'compressed' 
     }) 
     .on('error', gutil.log)) 
     .pipe(gulp.dest('dev/theme/css')) 
}); 

Kompass Aufgabe ist Kompilieren der Sass, aber die Komprimierung funktioniert nicht. Es gibt eine normale unkomprimierte CSS-Datei aus.

Antwort

0

Was Sie haben, sollte funktionieren, aber ich denke, das Gulp-Kompass-Plugin ist etwas fehlerhaft mit den Konfigurationseigenschaften. Es funktioniert für mich immer mit dem Ausgabestil in einer separaten config.rb-Datei.

var gulp = require('gulp'); 
var compass = require('gulp-compass'); 
var gutil = require('gulp-util'); 

gulp.task('compass', function() { 
    return gulp.src('comp/sass/style.scss') 
     .pipe(compass({ 
      config_file: 'config.rb', 
      sass: 'comp/sass', 
      image: 'dev/theme/images' 
     }) 
     .on('error', gutil.log)) 
     .pipe(gulp.dest('dev/theme/css')) 
    ; 
}) 

Mit diesem in der config.rb Datei:

output_style = :compressed 
+0

Leider ist dieses nicht für mich zu arbeiten. Ich benutze sass 3.4.13 & gulp-compass 2.0.3. – koenpeters

+1

Ich habe das gleiche Problem und versuchte auch den Vorschlag, eine Ruby-Konfigurationsdatei zu verwenden. Es hat auch nicht für mich funktioniert. – Kenny

1

hatte ich das gleiche Problem mit dem folgenden:

gulp.task('compass', function() { 
    gulp.src(sassSources) 
    .pipe(compass({ 
     sass: 'components/sass', 
     image: outputDir + '/images', 
     style: sassStyle 
    })) 
    .on('error', gutil.log) 
    .pipe(gulp.dest(outputDir + '/css')) 
    .pipe(connect.reload()) 
}); 

Beachten Sie, dass es diese Variable sassStyle ist, die bedingt definiert ist In diesem nächsten Abschnitt des Codes, in dem der Prozess "node.js process.env" den Wert "NODE_ENV" überwacht, können wir zwischen dem Produktionsordner und dem Entwicklungsordner wechseln:

env = process.env.NODE_ENV || 'development'; 
if (env ==='development') { 
    outputDir = 'builds/development/'; 
    sassStyle = 'expanded'; 
} else { 
    outputDir = 'builds/production/'; 
    sassStyle ='compressed'; 
} 

Es ist nicht den Trick tun, sondern eine externe config.rb Datei manuell bearbeitet mit:

config_file: 'config.rb', 

mit dieser Zeile in der Datei gearbeitet:

output_style = :compressed 

Vorerst I Sie haben diese Zeilen einfach als Workaround in der Datei auskommentiert.

Ich verwende die folgenden devDependencies:

"devDependencies": { 
    "gulp": "^3.9.1", 
    "gulp-browserify": "^0.5.1", 
    "gulp-coffee": "^2.3.2", 
    "gulp-compass": "^2.1.0", 
    "gulp-concat": "^2.6.0", 
    "gulp-connect": "^5.0.0", 
    "gulp-util": "^3.0.7", 
    "jquery": "^3.1.0", 
    "mustache": "^2.2.1" 
    } 
+0

Ich gehe davon aus, dass dies aus dem Lynda.com Web-Projekt-Workflows-Kurs stammt. Wo hast du 'config_file: 'config.rb','? – ihodonald