为什么 gulp 按字母顺序编译我的 SCSS 文件？

Question

我以前从未遇到过这种情况，而且我通常使用相同的 gulpfile。我所有的 SCSS 文件都是按字母顺序编译的，这意味着没有被正确覆盖。这是编译消息。（注意，我把客户的名字涂黑了）

这是我的 style.scss 文件

//Mixins
@import 'mixins';

//Globals
@import 'config';
@import 'global/global';

//Header
@import 'global/header';

//Company
@import 'company/leadership';


//Social buttons
@import 'social/social_buttons';

@import 'company/contact-us';

@import 'company/events-listing';

//Active Data Fabric tweak
@import 'active/active-data-fabric';

// News CPT Single
@import 'news/single';

//Resource Listing
@import 'resources/listing';

//Resource Single
@import 'resources/single';

//Products
@import 'products/products';

//Featured Testimonials
@import 'featured_testimonials/index';

//Videos Page
@import 'videos/index';

//Header Override
@import 'resources/header';

//Support Page
@import 'support/overview';

// Careers Page
@import 'company/careers';

//Search Page
@import 'search/index.scss';

// Import Views
@import 'views/home';

这是我的 gulpfile

var gulp = require('gulp');
var minifycss = require('gulp-cssnano');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('css', function() {
    return sass('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(autoprefixer())
        .pipe(concat('style.css'))
        .on('error', sass.logError)
        .pipe(minifycss())
        .pipe(sourcemaps.write(''))
        .pipe(gulp.dest('./scss'))
            .pipe(notify({ message: 'Wait for it....wait for it!!!' }));
});

gulp.task('default', function() {
    gulp.watch('scss/**/*.scss',['css']);
});

就像我说的，这以前从未发生过，所以我很茫然。文件不应该按照 style.scss 文件中指定的顺序编译吗？

Answer 1

您的 **/*.scss 通配符按字母顺序选取文件。由于 ** 递归到目录结构的底部，它 returns 目录按字母顺序排列，每个目录中的文件也按字母顺序排序。

这是通配符的预期输出。

为什么 gulp 按字母顺序编译我的 SCSS 文件？

Why is gulp compiling my SCSS files in alphabetical order?

css

sass

gulp

gulp-sass