Gulp - Generate Output CSS files in Same Directory as of SCSS file

Question

I am using Gulp to compile scss, uglify and concat and it is doing successfully when I try to output in one specific File.

But what I want to achieve is that gulp shall output css files in same directory as of SCSS file.

eg.

src
|
app
  |
  Folder1
     |
     style1.scss
     style1.css
  Folder2
     |
     style2.scss
     style2.css

What I am doing right now is as below gulp file

var gulp = require("gulp");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var sass = require("gulp-sass");
var debug = require("gulp-debug");

gulp.task('css', function () {
    gulp.src(
        "/*.scss"
    ).pipe(concat('styles.css'))
        pipe(sass().on('error', sass.logError))
        .pipe(debug({ title: 'unicorn:' }))
        .pipe(gulp.dest("./src"));
})

gulp.task('minify', ['css', 'default']);
gulp.task('default', function () {
    console.log("Default Task");
})

This generated CSS file in src directory. But i need different approach.

Could you check http://stackoverflow.com/questions/23247642/modify-file-in-place-same-dest-using-gulp-js-and-a-globbing-pattern or http://stackoverflow.com/questions/29793894/how-to-set-gulp-dest-in-same-directory-as-pipe-inputs. I think that you can find the answer... — Srdjan Dejanovic, Mar 30 '17 at 08:20
I have looked into these.. Thing is that my Folders are dynamic.. Root folder is same.. but Folder1, folder2 can be dynamic — Gags, Mar 30 '17 at 08:22

score -2 · Answer 1 · answered Dec 16 '19 at 09:21

To generate the output files in same folder give the same location in dest location example

gulp.task('css', function () {
  var component =  gulp.src('pattern-lab/source/_patterns/*/*/*/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(cssimport())
    .pipe(autoprefixer())
    .pipe(gulp.dest('pattern-lab/source/_patterns'));
  return mergeStream(component);
});

Gulp - Generate Output CSS files in Same Directory as of SCSS file

1 Answers1