How to generate html page with elements from scss in Gulp

Question

I need to make simple html page, something like stylesheet for icons.

Gulp task 'iconfont' generate glyph fonts out of svg icons with this code:

gulp.task('iconfont', function(){
  return gulp.src(['assets/svg/*.svg'])
    .pipe(iconfontCss({
        fontName: 'my-icons',
        cssClass: 'icon',
        path: 'conf/icon-font.scss',
        targetPath: '../../scss/layout/_icon-font.scss',
        fontPath: '../fonts/'
    }))
    .pipe(iconfont({
        fontName: 'my-icons',
        prependUnicode: false,
        formats: ['ttf', 'eot', 'woff'],
        normalize: true,
        centerHorizontally: true
}))
    .on('glyphs', function(glyphs, options) {
        // CSS templating, e.g.
        console.log(glyphs, options);
    })
    .pipe(gulp.dest('assets/fonts/'));
});

And generates .icon-font scss file with classes:

.icon-calendar {
    @include icon(calendar);
}
.icon-circle {
    @include icon(circle);
}
.icon-sun {
    @include icon(sun);
}
.icon-home {
    @include icon(home);
}

Is it possible then to generate simple html page, containing elements with these class names:

<i class="icon-calendar">.icon-calendar</i>
<i class="icon-circle">.icon-circle</i>
<i class="icon-sun">.icon-sun</i>
<i class="icon-home">.icon-home</i>

Yes, just read the generated css, parse it and generate a new html file. Use the `fs` node module to read, and `gulp-wrap` https://www.npmjs.com/package/gulp-wrap to generate html from a template — cl3m, Mar 29 '16 at 12:36
You could use a templating engine (handlebars, etc.) which has a gulp plugin, then just create a template with placeholders for the class names. You'd just need the logic to figure those out dynamically. — aw04, Mar 29 '16 at 12:50

score 3 · Answer 1 · edited May 23 '17 at 11:46

Here is an example using the jade templating engine. This will read the file ./test.scss, extract all the icon-* words and generate a ./template.html file:

Gulpfile.js:

// npm i gulp gulp-jade --save-dev

var gulp = require('gulp'),
    jade = require('gulp-jade'),
    fs   = require('fs');


gulp.task('default', function () {
    var re = new RegExp(/icon-(\w+)/);

    fs.readFile('./test.scss', 'utf8', function(err, data) {
        var icons = []
        if(err)
            return console.log(err);
        data.split('\r\n').forEach(function(icon) {
            var match = re.exec(icon);
            if(match)
                icons.push('icon-' + match[1])
        })
        // the gulp-jade plugin expects template local data to be an object
        // such as:
        // {locals: YOUR_DATA_OBJECT_TO_BIND}
        bind({locals: {icons: icons}})
    });

    // method that will bind data to your template
    var bind = function(data) {     
        gulp.src('./template.jade')
            .pipe(jade(data))
            .pipe(gulp.dest('./'))
    }
});

./test.scss:

.icon-calendar {
    @include icon(calendar);
}
.icon-circle {
    @include icon(circle);
}
.icon-sun {
    @include icon(sun);
}
.icon-home {
    @include icon(home);
}

./template.jade

The icons variable comes from the {locals: {icons: {}} argument in the .pipe(jade(data)) call.

doctype html
html(lang="en")
    head
    // you may want to add a link to your compiled `css` file for a nicer display
    body
        for ic in icons
            i(class=ic)
                |.
                = ic

Useful links:

I'm having an issue with the above code. When I run my GULP task all works and everything generates fine with the exception of the html file. It is only generating my first icon listed in the SCSS icon file. Currently I have 4 icons in the file but only 1 shows up after generated. Am I missing something in the JADE file to make it repeat and keep generating each icon listed in my SCSS? (FYI I am building a styleguide for a company and need to list all of the icons that are created each time someone drops one into the SVG folder) Thanks for your help — Robert Wojtow, Mar 31 '17 at 18:09

How to generate html page with elements from scss in Gulp

1 Answers1