Gulp按顺序排列

时间:2017-12-20 14:21:50

标签: javascript node.js gulp gulp-concat

我想使用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

1 个答案:

答案 0 :(得分: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证明了这一点与提议的解决方案一起工作......