Can Gulp add a custom CSS?

Question

Here's my index.html file:

<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Price Tracker</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <!-- bower:css -->
        <link rel="stylesheet" href="../bower_components/bootstrap-css/css/bootstrap.min.css" />
        <!-- endbower -->
    </head>
    <body>
        <!-- bower:js -->
        <script src="../bower_components/jquery/dist/jquery.js"></script>
        <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../bower_components/angular/angular.js"></script>
        <script src="../bower_components/bootstrap-css/js/bootstrap.min.js"></script>
        <!-- endbower -->
    </body>
</html>

My gulpfile picks up the bower dependencies correctly and adds them to the index. But I want gulp to pick up a custom CSS file.

Is this possible ?

Did the answers below not provide a solution yet? – Leon Gaban Feb 01 '16 at 22:00 — Leon Gaban, Feb 01 '16 at 22:00

Leon Gaban · Accepted Answer · 2016-01-24T03:20:45.893

Yeah you can embed any CSS file path you want, this is what I'm using htmlReplace

https://github.com/VFK/gulp-html-replace

npm install --save-dev gulp-html-replace

// Task to make the index file production ready
var htmlReplace = require('gulp-html-replace');

gulp.task('build:index', function() {
  gulp.src('app/index.html')
    .pipe(htmlReplace({
        //'app-css' : 'assets/'+version+'/css/dashboard.css',
        'app-css' : 'assets/css/dashboard.css',
    }))
    .pipe(gulp.dest('build/'));
});

Then in your markup

<!-- build:app-css -->
<!-- Anything between the build comments gets replaced --> 
<link href="dev/assets/css/dashboard.css" rel="stylesheet">
<!-- endbuild -->

This is how you delete files, with run-sequence

https://www.npmjs.com/package/del

// Clear out all files and folders from build folder:
gulp.task('build:cleanfolder', function(cb) {
    del([
        'build/**'
    ], cb);
});

This is how you pipe different tasks together and in order

gulp.task('build', function(cb) {
    runSequence(
        'version',                  // Save new version
        'build:del-assets-static',  // Delete old static folder in app/assets
        'build:move-files',         // Move files into new static folder
        'html-templates',           // Generate $templateCache file of HTML partials
        //'build-highcharts-css',            // Minify and concat highcharts styles
        'build-app-css',            // Minify and concat app styles
        'highcharts-js',            // Minify and concat highcharts scripts
        'build-app-js',             // Minify and concat app scripts
        'build:copy',               // Deletes old build folder
        'build:remove',             // Copy then Remove unneeded assets from build
        'build:version',            // Move assets into versioned build folder
        'build:index',              // Replace scripts in index.html
        'build:final-clean', cb);   // Remove app.min.js from build folder
});

Seems to work but the file ends up in folder `build`, which is not what I'm looking for. I want the task to take `app/index.html` as source AND destination for the changes. I tried changing the `dest` but gulp whines about the file existing already. — Francis Ducharme, Jan 23 '16 at 13:41
Oh you need a task to delete that file first, I will post later — Leon Gaban, Jan 23 '16 at 18:40
@FrancisDucharme updated my answer with how to pipe a del command, before the css replace html — Leon Gaban, Jan 24 '16 at 03:21

score 1 · Answer 2 · answered Jan 23 '16 at 01:14

gulp-inject is probably what you are looking for. It works similar to Wiredep and lets you specify where to insert css/js tags into the html for every match found (specified by glob pattern)

<!-- Index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>My index</title>
    <!-- bower:css -->
    <!-- endbower -->

    <!-- inject:css -->
    <!-- endinject -->
  </head>
  <body>


    <!-- bower:js -->
    <!-- endbower -->

    <!-- inject:js -->
    <!-- endinject -->
  </body>
</html>





// Gulpfile.js
var gulp = require('gulp');
var inject = require('gulp-inject');

gulp.task('custom', function(){
    var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
    return gulp.src('./index.html')
               .pipe(inject(sources))
               .pipe(gulp.dest('./build'));
})

Can Gulp add a custom CSS?

2 Answers2