如何替换吞咽中的几行

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, ' '))