Reputation: 23
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
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