diff --git a/README.md b/README.md index f1ebf70..0538761 100644 --- a/README.md +++ b/README.md @@ -158,6 +158,23 @@ gulp.task('compass', function() { }); ``` +### Usage with gulp-watch + +```javascript +var compass = require('gulp-compass'), + watch = require('gulp-watch'); + +gulp.task('compass', function() { + return watch('./src/*.scss') + .pipe(compass.singleFile({ + css: 'app/assets/css', + sass: 'app/assets/sass', + image: 'app/assets/images' + })) + .pipe(gulp.dest('app/assets/temp')); +}); +``` + ## Configuration ### Configuration Options diff --git a/lib/index.js b/lib/index.js index 1750cb8..873ebca 100644 --- a/lib/index.js +++ b/lib/index.js @@ -6,6 +6,8 @@ var callCounter = require('./callCounter'); var through = require('through2'); var gutil = require('gulp-util'); var path = require('path'); +var source = require('vinyl-source-stream'); +var eventStream = require('event-stream'); // Consts var PLUGIN_NAME = 'gulp-compass'; @@ -77,3 +79,32 @@ module.exports = function(opt) { return through.obj(collectNames, compile); }; + +/** + * Run compass on single sass files as they come down the stream. + * + * The gulp-compass plugin collects all files and runs compass on them when the + * stream is over, but the stream is never over when watching. + */ +module.exports.singleFile = function(opt) { + + return eventStream.map(function(file, callback) { + + var result; + + var stream = source(file.relative) + .pipe(module.exports(opt)) + .on('data', function(data) { + result = data; + }) + .on('end', function() { + callback(null, result); + }); + + stream.write(file); + + stream.end(); + + }); + +}; diff --git a/package.json b/package.json index 62a74f6..72b22f9 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,10 @@ }, "homepage": "https://github.com/appleboy/gulp-compass", "dependencies": { + "event-stream": "^3.3.2", "gulp-util": "^3.0.4", "through2": "^0.6.5", + "vinyl-source-stream": "^1.1.0", "which": "^1.1.1" }, "devDependencies": {