gulp sass 没有缩小答案

【问题标题】：gulp sass not minifyinggulp sass 没有缩小
【发布时间】：2017-07-19 20:06:28
【问题描述】：

有一个任务来处理 SCSS 文件（其中一些只是纯 CSS），最终结果没有被缩小。这是我的 gulpfile.js 的一部分：

var gulp        = require('gulp');
var gutil       = require('gulp-util');
var sass        = require('gulp-sass');
var concatCss   = require('gulp-concat-css');
var minifyCss   = require('gulp-minify-css');

var estilos = [
    'app/scss/bootstrap.scss', /*a bunch of includes of other scss files*/
    'node_modules/select2/dist/css/select2.min.css',
    'node_modules/magnific-popup/dist/magnific-popup.css',
    'app/scss/estilos.scss',
    'app/scss/indexSlider.scss'
]

gulp.task('css', function() {
    return gulp.src(estilos)
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(minifyCss())
        .pipe(concatCss('final.min.css'))
        .pipe(gulp.dest('public/css'))
});

我 2 天前刚开始使用 gulp，所以到目前为止我的调试技能非常低......我做错了什么导致最终文件没有被缩小？

【问题讨论】：

为什么是.pipe(concatCss('final.min.css'))？只需将此 css 添加到 src.
这是我想要输出的最终文件名。所有 scss 文件都经过处理、缩小并连接到该特定文件
但您应该在sass...中导入部分内容...
不知道该怎么做！必须弄清楚

标签： javascript sass gulp

【解决方案1】：

您的estilos 中有一个不同的src，首先您必须将它们分别编译为css，然后合并。你可以在这个例子https://ypereirareis.github.io/blog/2015/10/22/gulp-merge-less-sass-css/中找到答案。

希望对你有帮助）

【讨论】：

解决了！谢谢

【解决方案2】：

尝试在缩小之前移动 concat：

gulp.task('css', function() {
    return gulp.src(estilos)
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(concatCss('final.min.css'))
        .pipe(minifyCss())
        .pipe(gulp.dest('public/css'))
});

应该可以解决它。

我还建议使用 gulp-clean-css，因为 gulp-minify-css 已被弃用。

【讨论】：

我之前试过，执行任务时出错