Question

我想使用GulpJS创建一个sass文件。主要问题是gulp.src()在连接时有一个特定的顺序。

我的任务不起作用......

gulp.task('createGlobalScss', function(done) {
  return gulp.src([
    'sass/colors.scss',
    'sass/theme.scss',
    'sass/settings.scss',
    'sass/functions.scss',
    'sass/mixins.scss',
    'sass/components/**/settings.scss',
    'sass/theme.scss',
    'sass/components/**/*.scss'
  ])
  .pipe(concat('globalScss.scss'))
  .pipe(gulp.dest('./'));
  done();
});

问题：结果无序，我不想使用SASS的@import。

Answer 1

查看gulp-order

gulp plugin gulp-order允许您使用与gulp.src相同的语法重新排序文件流。

您的任务可以按照这样的结构......

var order = require('gulp-order');

gulp.task('createGlobalScss', function() {
  return gulp.src('sass/**/*.scss')
    .pipe(order([
      'sass/colors.scss',
      'sass/theme.scss',
      'sass/settings.scss',
      'sass/functions.scss',
      'sass/mixins.scss',
      'sass/components/**/settings.scss',
      'sass/theme.scss',
      'sass/components/**/*.scss'
    ], { base: __dirname }))
    .pipe(concat('globalScss.scss'))
    .pipe(gulp.dest('./'));
});

您也可以在此处删除done，因为在这种情况下您不需要显式异步回调。另请注意，我需要指定一个base option，以便按预期工作。

根据我们下面的讨论，here is a proof of concept证明了这一点与提议的解决方案一起工作......

Gulp按顺序排列

1 个答案: