将多个CSS文件合并为一个CSS文件

Question

我想将所有scss文件合并为一个压缩css文件：

结构体：

• 样式表/
• • test.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'))
});

!!! 效果！！！

• 样式表/
• • 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

有任何想法吗？

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链接以指向该文件名）。