web-dev-qa-db-fra.com

Gulp Sass - Comment nommer correctement le CSS de sortie?

Je lis un tutoriel sur sass ici alors j'ai essayé une autre approche et je ne peux pas obtenir la réponse dans ce tutoriel. Theres le problème. J'ai ce code dans mon gulpfile.js

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

Pour l'instant, je n'ai que assets/css/sass/guest.navbar.scss et ce code localise correctement les fichiers scss et place le fichier css de sortie dans le bon répertoire [~ # ~] mais [~ # ~] le css est nommé comme guest.navbar.css auquel je ne m'attendais pas. Je veux qu'il soit nommé navbar.css mais comment?

csssassgulp
21
boi_echos

gulp-sass ne prend aucun paramètre de nom de fichier. Utilisation gulp-rename pour renommer vos fichiers. Si vous en avez plusieurs .navbar.scss fichiers que vous souhaitez concaténer en un seul navbar.css fichiers, n'hésitez pas à utiliser gulp-concat. Celui-ci prend un paramètre de nom de fichier :-)

Installer gulp-rename avec 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');

ou

Installer gulp-concat avec 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');
55
ddprrt