Wie HTML-Seite mit Elementen aus Scss in Gulp

Question

generieren Ich brauche eine einfache HTML-Seite, etwas wie Stylesheet für Symbole.

Gulp Aufgabe 'IconFont' Glyphe Schriftarten aus svg Icons mit diesem Code generieren:

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

und erzeugt .icon-font SCSS Datei mit Klassen:

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

Ist es möglich, dann Generiere eine einfache html-Seite, die Elemente mit folgenden Klassennamen enthält:

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

Answer 1

Hier ist ein Beispiel le mit der jade Templating-Engine. Dadurch wird die Datei ./test.scss, extrahieren Sie alle icon-* Wörter lesen und erzeugen eine ./template.html Datei:

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

Die icons Variable kommt aus dem {locals: {icons: {}} Argument im .pipe(jade(data)) Aufruf.

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 

Nützliche Links:

• Generate a static site from folder
• Node fs readFile
• Javascript match RegExp
• Jade template engine