css - 如何使用 Gulp 从 SASS 文件生成缩小的 CSS

Question

我正在开发我的第一个 Angular 2 应用程序，我正在使用以下文件夹结构:

我正在尝试设置 Gulp 的配置文件(这是我第一次)，我会从不同的 .scss 获得一个缩小的 style.css 文件文件。

我开始编写如下代码:

gulp.task('styles', function() {
  gulp.src('src/**/*.scss')
      .pipe(sass({
        style: 'compressed'
      }).on('error', sass.logError))
      .pipe(autoprefixer('last 2 version'))
      .pipe(gulp.dest('./css/'))
      .pipe(rename({suffix: '.min'}))
      .pipe(minifycss())
      .pipe(gulp.dest('./css/'));
});

你能告诉我将生成的缩小 CSS 文件连接成唯一 CSS 文件的最佳方法吗？

编辑:我通过以下方式达到相同的效果:

gulp.task('styles', function() {
  gulp.src('src/**/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefixer('last 2 version'))
      .pipe(minifycss())
      .pipe(rename({suffix: '.min'}))
      .pipe(gulp.dest('./css/'));
});

Answer 1

您可以创建 style.scss 文件并在其中导入其他 .scss 文件。像这样

@import "first.scss";
@import "second.scss";
@import "../third.scss";
...

用这个替换你代码中的第二行之后

gulp.src('src/style.scss')

输出必须是一个style.min.css