Exclude file types in fonts task

sage
1

Following up on this thread: Pulling font-face CSS files automatically into your workflow with Gulp - #8 by Twansparant

In my project I have several custom webfonts (some purchased, some generated icon fonts) which I move into my assets/fonts folder. The structure of these folders vary, for example IcoMoon generates the following files (which I would like to keep):

font-name
├── demo-files
│   ├── demo.js
│   └── demo.css
├── demo.html
└── fonts
│   ├── font-name.eot
│   ├── font-name.svg
│   ├── font-name.ttf
│   └── font-name.woff
├── Read Me.txt
├── selection.json
└── style.css

The default font task flattens en copies everything in /assets/fonts/ to the /dist/fonts/:

// ### Fonts
gulp.task('fonts', function() {
  return gulp.src(globs.fonts)
    .pipe(flatten())
    .pipe(gulp.dest(path.dist + 'fonts'))
    .pipe(browserSync.stream());
});

If I print the globs.fonts it outputs:

[ '~/web/app/themes/sage/bower_components/font-awesome/fonts/fontawesome-webfont.eot',
  '~/web/app/themes/sage/bower_components/font-awesome/fonts/fontawesome-webfont.svg',
  '~/web/app/themes/sage/bower_components/font-awesome/fonts/fontawesome-webfont.ttf',
  '~/web/app/themes/sage/bower_components/font-awesome/fonts/fontawesome-webfont.woff',
  '~/web/app/themes/sage/bower_components/font-awesome/fonts/fontawesome-webfont.woff2',
  '~/web/app/themes/sage/bower_components/font-awesome/fonts/FontAwesome.otf',
  'assets/fonts/**/*' ]

So my question is, how can I alter this globs.fonts so I can whitelist (or blacklist) only certain filetypes?
Something like this:

[ '~/web/app/themes/sage/bower_components/font-awesome/fonts/fontawesome-webfont.eot',
  '~/web/app/themes/sage/bower_components/font-awesome/fonts/fontawesome-webfont.svg',
  '~/web/app/themes/sage/bower_components/font-awesome/fonts/fontawesome-webfont.ttf',
  '~/web/app/themes/sage/bower_components/font-awesome/fonts/fontawesome-webfont.woff',
  '~/web/app/themes/sage/bower_components/font-awesome/fonts/fontawesome-webfont.woff2',
  '~/web/app/themes/sage/bower_components/font-awesome/fonts/FontAwesome.otf',
  'assets/fonts/**/*.{eot,svg,ttf,woff,woff2,otf}' ,
  'assets/fonts/**/**/*.{eot,svg,ttf,woff,woff2,otf}' ,
  '!assets/fonts/**/*.{html,txt,json,css}'
]

Can I somehow add keys to an existing glob array inside the font task?
Thanks!

1 Like
2

This seems to work:

// ### Fonts
gulp.task('fonts', function() {
  globs.fonts.pop(); // Remove 'assets/fonts/**/*' in array
  globs.fonts.push(
    'assets/fonts/**/*.{eot,svg,ttf,woff,woff2,otf}',
    'assets/fonts/**/**/*.{eot,svg,ttf,woff,woff2,otf}',
    '!assets/fonts/**/*.{html,txt,json,css}'
  );
  return gulp.src(globs.fonts)
    .pipe(flatten())
    .pipe(gulp.dest(path.dist + 'fonts'))
    .pipe(browserSync.stream());
});

But not sure if this key 'assets/fonts/**/*' will always be last in the globs array, otherwise this could lead to trouble…

1 Like
3

lifesaver! Wanted to exclude all of my master files that all of the pngs & svgs are exported from

1 Like