gulp - 将多个scss文件合并为一个css文件

Question

我想将所有 scss 文件合并到一个压缩的 css 文件中:

结构:

• 样式表/
• • 测试.scss
• • test2.scss
• gulpfile.js

我尝试了这两个任务，我在几个答案和教程中找到了这两个任务，但我总是将 scss 文件放入重复的 css 文件中:

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

和

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

<强>!!!有效的结果!!!

• 样式表/
• • 测试.scss
• • test2.scss
• CSS/
• • 测试.css
• • test2.css
• gulpfile.js

或第二次尝试的任务:

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

<强>???预期结果???

• 样式表/
• • 测试.scss
• • test2.scss
• CSS/
• • 样式.css
• gulpfile.js

有什么想法吗？

Answer 1

您表示要将文件合并为一个文件并压缩该文件，因此您需要添加两个插件来完成每个文件。

Gulp-concat和 gulp-uglify

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'))
});

此外，您可能需要添加 gulp-rename指示该文件已通过 .min.css 扩展名进行丑化/缩小(并更改您的 html 链接以指向该文件名)。