gulp.js strips relative paths of output files

Question

I have a gulp.js configuration set up to automatically compile my SASS and CoffeeScript on save. It works, except that the relative paths are totally lost, and all the files are output into a single flat directory. I would like to retain the sub-directory structure of my app/assets/sass and app/assets/coffee directories when the final CSS and JS files are compiled. Here is my gulpfile:

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');
var coffee = require('gulp-coffee');

var sassDir = 'app/assets/sass';
var coffeeDir = 'app/assets/coffee';

gulp.task('sass', function() {
    return gulp.src(sassDir + '/**/*.scss')
        .pipe(plumber())
        .pipe(sass({ style: 'compress' }).on('error', gutil.log))
        .pipe(autoprefixer('last 10 versions'))
        .pipe(minifycss())
        .pipe(gulp.dest('public/css'));
});

gulp.task('coffee', function() {
    return gulp.src(coffeeDir + '/**/*.coffee')
        .pipe(plumber())
        .pipe(coffee({ bare: true }).on('error', gutil.log))
        .pipe(gulp.dest('public/js/coffee)'));
});

gulp.task('watch', function() {
    gulp.watch(sassDir + '/**/*.scss', ['sass']);
    gulp.watch(coffeeDir + '/**/*.coffee', ['coffee']);
});


gulp.task('default', ['sass', 'coffee', 'watch']);

Please see the existing answers [here](http://stackoverflow.com/a/21387311/145185) and [here](http://stackoverflow.com/a/21557049/145185). — OverZealous, Feb 07 '14 at 04:05
When I comment out all the pipes between .src and .dest the { base: '...' } solution works, but adding the sass() step back in creates the same issue. — Zac Crites, Feb 07 '14 at 04:26
Then the `gulp-sass` plugin is probably removing or modifying the `relative` property from the source files. I don't use that plugin, so I'm not sure. You can use the [`gulp-debug` plugin](https://npmjs.org/package/gulp-debug) to see what's happening to your files. — OverZealous, Feb 07 '14 at 05:08

score -2 · Answer 1 · answered Oct 30 '15 at 12:19

only split path string with / and get the last which is the filename and extension and then cut it to get files path

gulp.task('testing', function() {
        var orginalFile="tt/ee/style.scss";

        var pathArray=orginalFile.split('/');
        var destination=orginalFile.replace(pathArray[pathArray.length-1],"")

    gulp.src(orginalFile)    
    .pipe(sass())
    .pipe(gulp.dest(destination));

    })
});

gulp.js strips relative paths of output files

1 Answers1