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

Posted 2023-03-06

【中文标题】Gulp Sass - 如何正确命名输出 css？

【英文标题】：Gulp Sass - How to properly name the output css?

【发布时间】：2015-12-08 16:56:56

【问题描述】：

我正在阅读有关 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 但如何命名？

【问题讨论】：

我没有使用 Gulp 的经验，但是您是否尝试过将输入文件重命名为 navbar.scss？

【参考方案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');

【讨论】：

抱歉，我忘记将此答案标记为正确。两种方法都对我有用。谢谢

嗨！我尝试了第一种方法，它创建了一个名称包含.scss 而不是.css 的空文件。这是我正在使用的功能：pastebin.com/GJLN5TQG

都不适合我，直到我当然记得将 gulp-rename pacakge 添加到我的开发依赖项中；)

rename 似乎不稳定。

gulp-concat 为我工作。我没有意识到您可以有效地将单个文件连接到新名称。