Gulpでscssからhtmlページを生成するには

Question

アイコン用のスタイルシートのような単純なHTMLページを作成する必要があります。

ガルプタスク「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-フォントSCSSファイルを生成します。

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

はそれが可能です、その後に

<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

ここでは、例のHTMLページを生成します。ファイルは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変数は、.pipe(jade(data))コールの{locals: {icons: {}}引数から得られます。

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 

便利なリンク：

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