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

【问题标题】：How to generate minified CSS from SASS file using Gulp如何使用 Gulp 从 SASS 文件生成缩小的 CSS
【发布时间】：2016-07-14 18:36:38
【问题描述】：

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

【问题讨论】：

标签： css angular sass minify concat

【解决方案1】：

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

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

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

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

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

【讨论】：

好的，这样我可以创建一些包含@import 的“索引”.scss 文件。那么如何将所有索引文件连接到一个 CSS 文件中作为输出呢？

【解决方案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"]);

【讨论】：