Javascript 如何在Gulp中使用scs中的元素生成html页面

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

。图标日历
.图标圈
.icon sun
.图标主页

下面是一个使用

jade

模板引擎的示例。这将读取文件

/test.scss

，提取所有

图标-*

单词，并生成

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

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

/test.scss：

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

.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

有用的链接：

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

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

---

是的，只需读取生成的css，对其进行解析并生成一个新的html文件。使用

fs

节点模块进行读取，

gulp wrap

从模板生成html您可以使用模板引擎（把手等）它有一个gulp插件，然后只需创建一个带有占位符的模板作为类名。你只需要逻辑就可以动态地计算出来。我对上面的代码有一个问题。当我运行gulp任务时，除了html文件外，所有功能都正常，生成的一切都很好。它只生成SCSS I中列出的第一个图标con文件。目前，我在文件中有4个图标，但生成后只有1个显示。我是否缺少JADE文件中的某些内容，以便重复并不断生成SCS中列出的每个图标？（仅供参考，我正在为一家公司创建样式指南，需要列出每次有人将图标放入SVG文件夹时创建的所有图标）谢谢你的帮助