Gulp 吞咽SASS、AutoRefixer、minify和sourcemaps可生成巨大的文件

我在使用此Gulp配置缩小生成源地图的SASS文件时遇到了奇怪的行为

'use strict';

var PATH = {
    SRC_DIR: 'src/',
    SRC: {
        IMG: 'img/',
        INDEX: 'index.html',
        JS: {
            DIR: 'js/',
            FILE: [
                'app.js',
                '**/*.js',
                'controller/**/*.js',
                'factory/**/*.js',
                'directive/**/*.js',
                'model/**/*.js'
            ]
        },
        SASS: 'sass/',
        TEMPLATE: 'template/'
    },
    DEST_DIR: 'dist/',
    DEST: {
        CSS: {
            DIR: 'css/',
            FILE: 'full.css'
        },
        IMG: 'img/',
        JS: {
            DIR: 'js/',
            FILE: 'full.js'
        },
        LIB: 'lib/',
        TEMPLATE: 'template/',
    }
};

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'),
    minifyCss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    sass = require('gulp-ruby-sass'),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function() {
    return sass(PATH.SRC_DIR + PATH.SRC.SASS, {
        sourcemap: true,
        style: 'expanded'
    })
    .pipe(autoprefixer({
        browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9'],
        cascade: true
    }))
    .pipe(concat(PATH.DEST.CSS.FILE))
    .pipe(gulp.dest(PATH.DEST_DIR + PATH.DEST.CSS.DIR))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifyCss())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(PATH.DEST_DIR + PATH.DEST.CSS.DIR));
});

gulp.task('watch', function() {
    gulp.watch(PATH.SRC_DIR + PATH.SRC.SASS + '**/*.scss', ['styles']);
});

gulp.task('default', ['watch', 'styles']);

第一次使用

gulp

运行此脚本时，它将生成正确的

full.min.css

，并等待SASS目录中的更改

当您更改SASS文件中的某些内容时，它将触发监视并重新运行

style

任务，这将生成

full.min.css

您可以在前端看到更改，但每次重建时，这个缩小的文件都会变得越来越大

如果我省略

styles

任务中的sourcemaps，它似乎可以正常工作。

full.css

文件始终正常

---

我错过了什么？为什么缩小版的尺寸不断增加？

请帮我解决这个问题。。。为什么要将

full.css

文件与新的sass输出连接起来？好吧，这不是我的意图，这可能是另一个错误。我只想通过连接SASS编译文件（css）和

full.min.css

来获得

full.css

，后者是带有sourcemaps的缩小版本。实现这一点的最佳方法是什么？那么你的意思是获取该文件的名称？或者你想得到内容。对于第一个任务，您只需使用

rename

任务即可。这样，您的文件会变得更大，这是有道理的，因为MinifyCSS实际上会删除重复的文件，但sourcemaps仍然需要知道这些文件的来源。文件命名正确，我得到了两个文件，其中的内容与它们的名称一致。问题是

full.min.css

中每个构建的内容都在增长。现在我明白你的意思了，对我来说也可以将

full.css

作为串联和源映射（对调试SASS很有用），并在没有源映射的情况下缩小

full.min.css

。很抱歉让你久等了。你能把你的源地图放到一个pastebin.com上吗？我想看看什么正在被合并。我感觉这里有某种循环，一遍又一遍地连接同一个文件，minifycss再次删除它。