Question

我在用gulp-replace替换几行代码时遇到问题。这是我需要删除的代码

@font-face {
  font-family: Vaadin-Icons;
  src: url(../valo/fonts/vaadin-icons/Vaadin-Icons.eot);
  src: url(../valo/fonts/vaadin-icons/Vaadin-Icons.eot?#iefix) format("embedded-opentype"), url(../valo/fonts/vaadin-icons/Vaadin-Icons.woff) format("woff"), url(../valo/fonts/vaadin-icons/Vaadin-Icons.ttf) format("truetype"), url(../valo/fonts/vaadin-icons/Vaadin-Icons.svg#icomoon) format("svg")
}

我需要将上述代码段替换为空白。

这是我的大口吃

replace = require('gulp-replace'),

gulp.task('minify-core-styles', function() {
    gulp.src(PATH_CSS_CORE)
        .pipe(replace(vaadin_icon, ' '))
        .pipe(autoprefixer({ browsers: AUTOPREFIXER_BROWSERS }))
        .pipe(concat('styles.css'))
        .pipe(min())
        .pipe(gulp.dest(PATH_CSS_CORE_DEST));
});

在我的口中，我创建了一个名为vaadin_icon的变量，其中包含字符串。

var vaadin_icon = '@font-face {' +
    'font-family: Vaadin-Icons;' +
    'src: url(../valo/fonts/vaadin-icons/Vaadin-Icons.eot);' +
    'src: url(../valo/fonts/vaadin-icons/Vaadin-Icons' +
    '.eot?#iefix) format("embedded-opentype"), url(../valo/fonts/vaadin-icons/Vaadin-Icons.woff) format("woff"), url(../valo/fonts/vaadin-icons/Vaadin-Icons.ttf) format("truetype"), url(../valo/fonts/vaadin-icons/Vaadin-Icons.svg#icomoon) format("svg")' +
    '}';

我做错了什么？

Answer 1

您无需考虑@ font-face声明中的换行符或选项卡/空格。因此，尝试：

var vaadin_icon = '@font-face {\r\n' +
  '  font-family: Vaadin-Icons;\r\n' +
  '  src: url(../valo/fonts/vaadin-icons/Vaadin-Icons.eot);\r\n' +
  '  src: url(../valo/fonts/vaadin-icons/Vaadin-Icons' +
  '.eot?#iefix) format("embedded-opentype"), url(../valo/fonts/vaadin-icons/Vaadin-Icons.woff) format("woff"), url(../valo/fonts/vaadin-icons/Vaadin-Icons.ttf) format("truetype"), url(../valo/fonts/vaadin-icons/Vaadin-Icons.svg#icomoon) format("svg")\r\n' +
'}';

请注意，我不知道您使用的是哪个操作系统，因此对于换行符，您可能不得不尝试使用\r\n之外的其他方法。您也许还可以使用模板文字来做到这一点。

编辑：同样，在您的情况下使用正则表达式也更容易。

var fontFaceRegEx = /@font-face.*(.*\r\n)*}/g;

，然后在替换管道中使用：

.pipe(replace(fontFaceRegEx, ' '))

如何在gulp中替换几行

1 个答案: