Gulp 将多个scss文件合并到一个css文件中

我想将我所有的

scss

文件合并成一个压缩的

css

文件：

gulp.task('sass', function() {
    return gulp.src('stylesheets/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('css/'))
});

结构：

• 样式表/
• • test.scss
• • test2.scss
• gulpfile.js

我尝试了这两个任务，我在一些答案和教程中找到了这两个任务，但我总是将

scss

文件复制到一个重复的

css

文件中：

gulp.task('sass', function() {
    return gulp.src('stylesheets/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('css/'))
});

及

！！！有效的结果

• 样式表/
• • test.scss
• • test2.scss
• css/
• • test.css
• • test2.css
• gulpfile.js

或第二次尝试的任务：

• 样式表/
• • test.scss
• • test2.scss
• css/styles.css/
• • test.css
• • test2.css
• gulpfile.js

？？？预期结果？？？

• 样式表/
• • test.scss
• • test2.scss
• css/
• • styles.css
• gulpfile.js

有什么想法吗？

希望这是个好主意

gulp.task('styles', () => {
  gulp.src([path.src.sass])
    .pipe(sassGlob())
    .on('error', util.log)
    .pipe(sass({
       includePaths: ['src/scss'],
    }))
    .on('error', util.log)
    .pipe(gulp.dest(path.dist.css))
});

---

您表示要将文件合并到一个文件中并压缩该文件，因此需要添加两个插件来分别执行这些操作

及

---

此外，您可能希望添加以表明文件已通过.min.css扩展名进行了uglified/minified（并更改html链接以指向该文件名）。

您只需在sass（）之后添加一个concat（styles.css）调用即可。看一口海螺。@Mark很管用，谢谢！你能给其他人举个例子吗？这样我就可以把它标记为正确的。CheersThanks，我将在几个小时内做个例子。虽然CONTAT将工作，我相信OP应该首先考虑使用SASS分部。它非常简单，并使代码组织良好。Concat可能适用于逻辑上分离的样式表。这里有一个快速的解释-所以在stylesheets文件夹中，使用单个scss文件导入具有导入规则的模块，例如@import“components/cards”；然后创建以下划线开头的模块（例如样式表/组件/_cards.scs）。Gulp将把所有文件编译成单个文件，无需任何额外配置。

const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

gulp.task('sass', function() {
return gulp.src('stylesheets/**/*.scss')
  .pipe(sass())
  .pipe(concat('styles.css'))
  .pipe(uglify())

  // .pipe(rename({
   //  basename: "styles",
   //   suffix: ".min",
   //   extname: ".css"
  //  }))

  .pipe(gulp.dest('css'))
});