Ad

Can Gulp Add A Custom CSS?

- 1 answer

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" target="_blank" rel="nofollow noreferrer" 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 ?

Ad

Answer

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 target="_blank" rel="nofollow noreferrer" 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
});
Ad
source: stackoverflow.com
Ad