javascript - 如何在 Gulp 中使用 scss 元素生成 html 页面

Question

我需要制作简单的 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>

Answer 1

这是一个使用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