Как создать html-страницу с элементами из scss в Gulp

Мне нужно сделать простую html-страницу, что-то вроде таблицы стилей для иконок.

Задача Gulp 'iconfont' генерирует шрифты глифов из значков svg с помощью этого кода:

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/'));
});

И генерирует файл .icon-font scss с классами:

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

Возможно ли создать простую html-страницу, содержащую элементы с этими именами классов:

<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>

javascript html gulp icon-fonts glyph
person momciloo    schedule 29.03.2016    source источник
comment
Да, просто прочитайте сгенерированный css, проанализируйте его и сгенерируйте новый html-файл. Используйте модуль узла fs для чтения и gulp-wrap npmjs.com/package/gulp-wrap сгенерировать html из шаблона   -  person cl3m    schedule 29.03.2016
comment
Вы можете использовать механизм шаблонов (рули и т. д.), который имеет плагин gulp, а затем просто создать шаблон с заполнителями для имен классов. Вам просто нужна логика, чтобы понять это динамически.   -  person aw04    schedule 29.03.2016

Ответы (1)


arrow_upward
3
arrow_downward

Вот пример использования механизма шаблонов jade. Это прочитает файл ./test.scss, извлечет все icon-* слова и сгенерирует ./template.html файл:

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

Переменная icons происходит из аргумента {locals: {icons: {}} в вызове .pipe(jade(data)).

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

Полезные ссылки:

person cl3m    schedule 29.03.2016
comment
У меня проблема с приведенным выше кодом. Когда я запускаю свою задачу GULP, все работает, и все работает нормально, за исключением файла html. Он генерирует только мой первый значок, указанный в файле значков SCSS. В настоящее время у меня есть 4 значка в файле, но после создания появляется только 1. Я что-то упустил в файле JADE, чтобы он повторялся и продолжал генерировать каждый значок, указанный в моем SCSS? (К вашему сведению, я создаю руководство по стилю для компании, и мне нужно перечислить все значки, которые создаются каждый раз, когда кто-то помещает один из них в папку SVG). Спасибо за вашу помощь. - person Robert Wojtow; 31.03.2017