Can Gulp Add A Custom CSS?

- 1 answer

Here's my index.html file:

<!doctype html>
<html class="no-js">
        <meta charset="utf-8">
        <title>Price Tracker</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <!-- bower:css -->
        <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="../bower_components/bootstrap-css/css/bootstrap.min.css" />
        <!-- endbower -->
        <!-- 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 -->

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 ?



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

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() {
        //'app-css' : 'assets/'+version+'/css/dashboard.css',
        'app-css' : 'assets/css/dashboard.css',

Then in your markup

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

This is how you delete files, with run-sequence

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

This is how you pipe different tasks together and in order

gulp.task('build', function(cb) {
        '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