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

我正在开发我的第一个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/'));
});

---

下面的内容不包括

sass

任务，但您得到了一个css文件的想法：

var webroot = "./wwwroot/";

var paths = {
    js: webroot + "js/**/*.js",
    ts: webroot + "app/**/*.ts",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

---

您可以创建

style.scss

文件并在其中导入其他

.scss

文件。像这样

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

之后，用以下代码替换代码中的第二行

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

---

输出必须是一个

style.min.css

好的，这样我就可以创建一些“index.scss”文件，其中包含一些

@import

。那么，如何将所有索引文件压缩为一个CSS文件作为输出？