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

时间:2018-02-08 17:52:28

标签: css sass gulp gulp-sass

我之前从未发生过这种情况,我通常使用相同的gulpfile。我的所有SCSS文件都按字母顺序进行编译,这意味着事情没有被正确覆盖。这是编译消息。 (请注意,我已将我的客户的名字涂黑了)

enter image description here

这是我的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文件中指定的顺序编译文件吗?

1 个答案:

答案 0 :(得分:1)

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

这是通配符的预期输出。