gulp compass creates an unwanted file instead of using only stream

问题

This is my app-compass gulp task:

var compass = require('gulp-compass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('app-compass', function() {
    var stream = gulp.src('./app/styles/index.scss')
        .pipe(compass({
            css: paths.css,
            sass: 'app/styles',
            image: 'app/assets/images',
            generated_images_path: paths.images
        }))
        .pipe(autoprefixer())
        .pipe(gulp.dest(paths.css));
});

As part of compass, an index.css file created. This is an unwanted operation. I only want the data on the stream without write it to a file. Tomorrow I might change the destination and I'll have to change also the css property of compass, for example.
Is there a way where I can tell compass not to create a css file and only pass it via the stream?

回答1:

It looks like compass and gulp.dest are both creating the .css file. Try removing .pipe(gulp.dest(paths.css)) and ensuring the css property of the compass configuration object points to the desired destination location.

Updated Code from Original Poster

gulp.task('app-compass', function() {
    var stream = gulp.src('./app/styles/index.scss')
        .pipe(compass({
            css: paths.css,
            sass: 'app/styles',
            image: 'app/assets/images',
            generated_images_path: paths.images
        }))
        .pipe(autoprefixer());
});

回答2:

Remove the css: paths.css, in the compass config. Otherwise compass thinks it should generate a css directly.

var compass = require('gulp-compass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('app-compass', function() {
    var stream = gulp.src('./app/styles/index.scss')
        .pipe(compass({

            sass: 'app/styles',
            image: 'app/assets/images',
            generated_images_path: paths.images
        }))
        .pipe(autoprefixer())
        .pipe(gulp.dest(paths.css));
});

EDIT:

I just ran it again, and indeed, it created the css directory in the root. I had only checked the app/css… Sorry, it looks like the documentation says that it is not possible for the ruby compass to work that way:

Please make sure to add css and sass options with the same value in config.rb since compass can't output css result directly.

https://www.npmjs.com/package/gulp-compass

Unfortunately, I don't see a good solution at the moment. Fortunately, the extra file generation wont kill your performance.

Or you could have a look at Bourbon, which is pretty similar to Compass and better integrated into the node environment (because it is only the mixins without a special compiler of its own):

https://www.npmjs.com/package/node-bourbon

回答3:

Have you tried the following?

var compass = require('gulp-compass');
var autoprefixer = require('gulp-autoprefixer');
var clean = require('gulp-clean');

gulp.task('app-compass', function() {
    var stream = gulp.src('./app/styles/index.scss')
        .pipe(compass({
            css: paths.css,
            sass: 'app/styles',
            image: 'app/assets/images',
            generated_images_path: paths.images
        }))
        .pipe(autoprefixer())
        .pipe(clean())
        .pipe(gulp.dest(paths.css));
});

来源：https://stackoverflow.com/questions/27383740/gulp-compass-creates-an-unwanted-file-instead-of-using-only-stream