Should you manually add a css file in a gulp project?

Question

I have tried so many times to get skeleton.css in the index.html for my gulp-angular project but still can't find a way to. I used bower install to install skeleton-css and it added it into its respective folder in the bower-component folder

I have tried adding it manually to index.html in the .tmp folder but whenever I do gulp serve, whatever code i added disappears:

Before running gulp serve

<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="app/skeleton.css">
<link rel="stylesheet" href="app/index.css">
<!-- endinject -->
<!-- endbuild -->

After running gulp serve

<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="app/index.css">
<!-- endinject -->
<!-- endbuild -->

I know this pretty much a nooby question and it has to do with the way injection works in gulp but I can't seem to understand it as i'm quite new to the task automation environment, any ideas where I might be going wrong and any solutions ?

Thanks so much!

Gulp Task

gulp.task('serve', ['watch'], function () {
  browserSyncInit([
    paths.tmp + '/serve',
    paths.src
  ], [
    paths.tmp + '/serve/{app,components}/**/*.css',
    paths.tmp + '/serve/{app,components}/**/*.js',
    paths.src + 'src/assets/images/**/*',
    paths.tmp + '/serve/*.html',
    paths.tmp + '/serve/{app,components}/**/*.html',
    paths.src + '/{app,components}/**/*.html'
  ]);
});

gulp.task('serve:dist', ['build'], function () {
  browserSyncInit(paths.dist);
});

gulp.task('serve:e2e', ['inject'], function () {
  browserSyncInit([paths.tmp + '/serve', paths.src], null, []);
});

gulp.task('serve:e2e-dist', ['build'], function () {
  browserSyncInit(paths.dist, null, []);
});