Gulp - 类型错误: 无法分配给只读属性'cwd'的 bower / bootstrap.css

Question

我刚开始学习 Gulp.js，但是我遇到了一个错误无法解决。

我已经使用 bower 安装了 bootstrap，并尝试压缩 bootstrap 的 CSS 文件。

这是我的 gulp 任务：

gulp.task('minifycss', function() {
gulp.src('www/css/animate.css', 'www/bower_components/bootstrap/dist/css/bootstrap.css')
    .pipe(minifycss({compatibility: 'ie8'}))
    .pipe(gulp.dest('www-deploy/css/'));
});

然而当我运行主 gulp 任务时，它指出该文件是“只读”的。

Karls-MacBook-Pro:cmp-2015 karltaylor$ gulp
[13:48:50] Using gulpfile ~/Documents/web/cmp-2015/gulpfile.js
[13:48:50] Starting 'sassMin'...
[13:48:50] Finished 'sassMin' after 12 ms
[13:48:50] Starting 'minifycss'...
[13:48:50] 'minifycss' errored after 508 μs
[13:48:50] TypeError: Cannot assign to read only property 'cwd' of www/bower_components/bootstrap/dist/css/bootstrap.css
    at Object.gs.createStream (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-stream/index.js:19:46)
    at Object.gs.create (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-stream/index.js:68:42)
    at Gulp.src (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/vinyl-fs/lib/src/index.js:33:23)
    at Gulp.<anonymous> (/Users/karltaylor/Documents/web/cmp-2015/gulpfile.js:35:7)
    at module.exports (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at /Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/index.js:279:18
    at finish (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
    at module.exports (/Users/karltaylor/Documents/web/cmp-2015/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:60:3)

我尝试过的事情：

1. 重新安装 bootstrap
2. 将实际的 bootstrap.css 文件移动到我的 css 文件中，但它仍然做同样的事情。

编辑：已解决 = 要使用多个来源，您必须将它们放入数组中。

来源：https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

- Karl Taylor

---

我认为这是因为你在gulp.src中有两个文件。尝试使用以下代码进行验证（替换你的gulp.src代码）: return gulp.src('www/bower_components/bootstrap/dist/css/bootstrap.css') - Antonin Cezard

@topleft 这个方法很管用！当使用多个源文件时，看起来必须将它放在数组中或使用 merge-stream。- https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md - Karl Taylor

将它们放入数组中解决了问题。gulp.src([ , ]) - Deke

Answer 1

就像@topleft提到的那样，这是因为我在gulp.src中使用了多个文件导致语法错误。如果要使用多个源，则需要将它们放入数组中。

例如：

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

gulp.task('default', function() {
    return gulp.src(['foo/*', 'bar/*'])
        .pipe(concat('result.txt'))
        .pipe(gulp.dest('build'));
});

- Karl Taylor

Answer 2

我可以帮您进行翻译，以下是相关内容：

当我尝试输出两个 CSS 文件时，我遇到了问题，因为我没有使用数组[]。

修改前的代码：

gulp.src('www/css/animate.css', 'www/bower_components/bootstrap/dist/css/bootstrap.css')
    .pipe(minifycss({compatibility: 'ie8'}))
    .pipe(gulp.dest('www-deploy/css/'));
});

使用此方法：

gulp.src(['www/css/animate.css', 'www/bower_components/bootstrap/dist/css/bootstrap.css'])
    .pipe(minifycss({compatibility: 'ie8'}))
    .pipe(gulp.dest('www-deploy/css/'));
});

解释：

gulp.src(['./file1.scss', './file2.scss']);

- llioor

Answer 3

或者你也可以尝试使用

return gulp.src('www/**/*.css')

如果这是所需的效果，它应该添加您目录中的每个 .css 文件。

- Antonin Cezard

---

那么你就做不到了。 - dsandrade