gulp-减少全局变量的混乱

Question

我正在尝试将版本字符串从 gulp 传递到 less，如以下示例项目所示：

package.json:

{
  "name": "webui",
  "version": "0.0.0",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-less": "^3.0.5"
  }
}

gulpfile.js:

var gulp = require('gulp');
var less = require('gulp-less');

var LESS_PARAMS = {
  globalVars: {
    webUiVersion: '0.0.0'
  }
};

gulp.task('less', function() {
  return gulp.src('test.less')
    .pipe(less(LESS_PARAMS))
    .pipe(gulp.dest('.'))
})

test.less:

.test {
  background: url("test.jpg?v=@{webUiVersion}")
}

当运行 gulp less 时，生成的 test.css 文件如下所示：

.test {
  background: url("test.jpg?v=0 0");
}

如您所见，gulp-less 以某种方式将 0.0.0 转换为 0 0。如果我使用不带点或 0 的简单字符串，如 123asdf，替换工作正常。另外，直接调用

lessc --global-var='webUiVersion="0.0.0"' test.less

在命令行上生成所需的结果。

所以我的问题是：

这是故意行为还是错误？
有没有办法解决这个问题？

Answer 1

我找到了解决这个问题的方法：诀窍是将应该传递给 less 的字符串用引号引起来，即在 [= 中写入 webUiVersion: '"0.0.0"' 而不是 webUiVersion: '0.0.0' 12=].

下面seven-phases-max已经指出了原因：webUiVersion的值直接传给了less。如果没有引号，0.0.0 将被解析为两个数字，即 0.0 后跟 .0，这会导致生成的 CSS.[=19= 中的 0 0 ]

gulp-减少全局变量的混乱

gulp-less messes with global variable

less

gulp

gulp-less