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

The gulp plugin gulp-order allows you to reorder a stream of files using the same syntax as of 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 按顺序连接

Gulp concat in order

javascript

node.js

gulp

gulp-concat