Anton Fedorishko
Anton Fedorishko

Reputation: 23

gulp: remove a directory from the output destination path

Please help me with Gulp config

I have two src scss folders:

styles1/
styles2/

In each folder I have next structure for various site pages:

styles1/front_page/front.page.scss - root file for front page
styles1/front_page/sections/ - front page sections that are impoted in root file(front.page.scss)

My gulp task looks like this:

gulp.task('sass-dev', function(done) {
    return gulp.src(['src/scss/**/*.page.scss'])
    .pipe(sass({outputStyle:'expanded'}).on('error',sass.logError))
    .pipe(gulp.dest('./frontend/css/temp/'))
});

In this way i get output file with next path:

./frontend/css/temp/styles1/front_page/front.page.css

But I need

./frontend/css/temp/styles1/front.page.css

More examples of expected result:

./frontend/css/temp/styles1/about.page.css
./frontend/css/temp/styles1/contact.page.css
./frontend/css/temp/styles2/front.page.css
./frontend/css/temp/styles2/profile.page.css

Is it possible to configure output like this?

Thanks!

Upvotes: 2

Views: 705

Answers (1)

Mark
Mark

Reputation: 180785

There are a number of ways to accomplish this. Here are three:

gulp.task('sass-dev', function (done) {

  return gulp.src(['src/scss/**/*.page.scss'], {base: 'src/scss/styles1/front_page' }) 

    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))

    .pipe(gulp.dest('./frontend/css/temp/styles1'))  // use with base option, works

});

Using the base option - this basically sets what you don't want in the final destination, which is why gulp.dest adds the styles1 back in. So you eliminate "src/scss/styles1/front_page and send to `'./frontend/css/temp/styles1'.


I think a better way os to use the gulp-flatten plugin. It allows you to strip off or flatten directories as you choose. In your case:

const flatten = require("gulp-flatten");


gulp.task('sass-dev', function (done) {

  return gulp.src(['src/scss/**/*.page.scss'])

    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)

    .pipe(flatten({ subPath: [0, -1] }))

    .pipe(gulp.dest('./frontend/css/temp'))

 });

flatten({ subPath[0, -1] }) will strip off the last folder, i.e., 'front_page'.


const rename = require("gulp-rename");
const path = require("path");

gulp.task('sass-dev', function (done) {

  return gulp.src(['src/scss/**/*.page.scss'])

    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))

    .pipe(rename(function (file) {
      let temp = path.dirname(file.dirname);
      file.dirname = temp;
    }))

    .pipe(gulp.dest('./frontend/css/temp'))

});

Upvotes: 3

Related Questions