I'm currently working on a forum and need to convert my CSS files to SASS. Here is the project hierarchy:
app/
components/
404/
controllers/
404Ctrl.js
sass/
404.scss
css/
404.min.css
home/
controllers/
homeCtrl.js
sass/
home.scss
css/
home.min.css
etc... many more
My goal is to minify the SCSS file and place it in the corresponding CSS folder whenever changes are made. However, I have multiple components like 404, home, authDesc, etc., and I want Gulp to process all these folders when running 'gulp sass' command.
This is what I've tried so far:
gulp.task('sass', function(done) {
gulp.src('app/components/{COMPONENT_NAME}/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/history/css'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('app/components/{COMPONENT_NAME}/css'))
.on('end', done);
});
However, I need to find a way to dynamically replace {COMONENT_NAME} with the desired component. Any help or suggestions would be appreciated.
EDIT
I discovered a workaround for this issue, but it's not error-free:
var PATHS_SASS = {
scss_org : [
'app/components/404/sass/_404.scss',
'app/components/auth/sass/_auth.scss'
],
css_dest : [
'app/components/404/css',
'app/components/auth/css'
]
}
gulp.task('sass', function() {
for(var i=0; i<2; i++) {
gulp.src(PATHS_SASS.scss_org[i])
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/history/css'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest(PATHS_SASS.css_dest[i]))
}
});