Gulp Sass - How to properly name the output css?

Question

I'm reading a tutorial about sass here then I tried some other approach and I cant get the answer in this tutorial. Theres the problem. I have this code in my gulpfile.js

gulp.task('compileNavbar', function() {
    gulp.src('assets/css/sass/**/*.navbar.scss')
        .pipe(sass('navbar.css'))
        .pipe(gulp.dest('assets/css/'));;
});

As of now, I only have assets/css/sass/guest.navbar.scss and this code locates the scss files correctly and puts the output css file in the correct directory BUT the css is named as guest.navbar.css which I didnt expect. I want it to be named as navbar.css but how to?

Answer 1

gulp-sass doesn't take any file name parameters. Use gulp-rename to rename your files. If you have more than one .navbar.scss files you want to concatenate into one navbar.css files, feel free to use gulp-concat. This one takes a file name parameter :-)

Install gulp-rename with npm install gulp-rename --save-dev

var rename = require('gulp-rename');

return gulp.src('assets/css/sass/**/*/*.navbar.scss')
   .pipe(sass())
   .pipe(rename('navbar.css'))
   .pipe(gulp.dest('assets/css');

or

Install gulp-concat with npm install gulp-concat --save-dev

var concat = require('gulp-concat');

return gulp.src('assets/css/sass/**/*/*.navbar.scss')
   .pipe(sass())
   .pipe(concat('navbar.css'))
   .pipe(gulp.dest('assets/css');