Gulp Sass - 如何正确命名输出 css？

Question

我正在阅读有关 sass here 的教程，然后我尝试了其他一些方法，但在本教程中我无法得到答案。有问题。我的 gulpfile.js 中有这段代码

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

到目前为止，我只有 assets/css/sass/guest.navbar.scss 并且此代码正确定位了 scss 文件并将输出 css 文件放在正确的目录中但是 css 是命名为 guest.navbar.css 我没想到。我希望将其命名为 navbar.css 但如何命名？

Answer 1

gulp-sass 不接受任何文件名参数。使用gulp-rename 重命名您的文件。如果您有多个.navbar.scss 文件要连接成一个navbar.css 文件，请随意使用gulp-concat。这个需要一个文件名参数:-)

用npm install gulp-rename --save-dev安装gulp-rename

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

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

或

用npm install gulp-concat --save-dev安装gulp-concat

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

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