Change the file in place (same dest) with Gulp.js and a globe template

Question

I have a gulp task that tries to convert .scss files to .css files (using gulp -ruby-sass), and then put the resulting .css file in the place where it found the source file. The problem is that since I use the template for the substitution, I don’t necessarily know where the source file is stored.

In the code below, I'm trying to use gulp -tap to access the stream and find out the file path of the current file from which the stream was read:

gulp.task('convertSass', function() { var fileLocation = ""; gulp.src("sass/**/*.scss") .pipe(sass()) .pipe(tap(function(file,t){ fileLocation = path.dirname(file.path); console.log(fileLocation); })) .pipe(gulp.dest(fileLocation)); }); 

Based on the output of console.log(fileLocation) , this code looks as if it should work fine. However, the resulting CSS files seem to be placed in the same directory higher than I expect. Where it should be project/sass/partials , the resulting file path is simply project/partials .

If there is a much simpler way to do this, I will definitely appreciate this decision even more. Thank!

Answer 1

As you suspected, you make it too complicated. The destination does not need to be dynamic, since the traced path is used for dest . Just connect to the same base directory from which you clone src, in this case "sass":

 gulp.src("sass/**/*.scss") .pipe(sass()) .pipe(gulp.dest("sass")); 

If your files do not have a common base, and you need to pass an array of paths, this is not enough. In this case, you must specify the base case.

 var paths = [ "sass/**/*.scss", "vendor/sass/**/*.scss" ]; gulp.src(paths, {base: "./"}) .pipe(sass()) .pipe(gulp.dest("./")); 

Answer 2

It is simpler than numbers 1311407. You do not need to specify the destination folder at all, just use . . Also, be sure to set the base directory.

 gulp.src("sass/**/*.scss", { base: "./" }) .pipe(sass()) .pipe(gulp.dest(".")); 

Answer 3

 gulp.src("sass/**/*.scss") .pipe(sass()) .pipe(gulp.dest(function(file) { return file.base; })); 

The initial answer is here: https://stackoverflow.com/a/416829/

I know this thread is old, but it still shows up as the first result on google, so I thought I could post the link here.

Answer 4

It was very helpful!

 gulp.task("default", function(){ //sass gulp.watch([srcPath + '.scss', '!'+ srcPath +'min.scss']).on("change", function(file) { console.log("Compiling SASS File: " + file.path) return gulp.src(file.path, { base: "./" }) .pipe(sass({style: 'compressed'})) .pipe(rename({suffix: '.min'})) .pipe(sourcemaps.init()) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(sourcemaps.write('./')) .pipe(gulp.dest(".")); }); //scripts gulp.watch([srcPath + '.js','!'+ srcPath + 'min.js']).on("change", function(file) { console.log("Compiling JS File: " + file.path) gulp.src(file.path, { base: "./" }) .pipe(uglify()) .pipe(rename({suffix: '.min'})) .pipe(gulp.dest(".")); }); })