Gulp 按顺序连接

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 插件 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 证明了这一点与建议的解决方案一起使用...