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

Question

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

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

我开始编写以下代码：

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档案＆amp;导入其中的其他.scss个文件。喜欢这个

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

使用此

替换代码中的第二行后

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

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

Answer 2

以下内容不包含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"]);