Gulp cwd 到项目根目录答案

【问题标题】：Gulp cwd to project rootGulp cwd 到项目根目录
【发布时间】：2015-04-18 12:01:19
【问题描述】：

我当前的代码：

gulp.task('_sass', function() {
    var files = [
        './vendor/bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss',
        './resources/assets/sass/main.scss',
        './vendor/bower_components/bootstrap-rating/bootstrap-rating.css',
        './vendor/bower_components/select2/select2.css'
    ];
    return gulp.src(files)
    //return gulp.src(files)
        .pipe(concat('all.css'))
        .pipe(sass())
        .on('error', notify.onError(function (error) {
            return "Error: " + error.message;
        }))
        .pipe(gulp.dest('./public/css/'))
        .pipe(reload({stream: true}));
});

如您所见，我有一个文件数组，其中存储了我想要连接到 all.css 中的 .scss 文件的所有路径。但我得到这个错误：

Error: file to import not found or unreadable: base/normalize
Current dir: /Users/**/Code/Laravel/vendor/bower_components/bootstrap-sass/assets/stylesheets/

这很明显，因为 gulp 使用数组的第一个路径作为它的基本目录。所以我尝试将base 或cwd 设置为'./'，这样我就可以指定我的Laravel 根目录。但这不起作用。我该如何解决这个问题，这样我就可以使用所有这些 .scss 文件而无需将文件复制到其他目录？

【问题讨论】：

标签： javascript laravel gulp

【解决方案1】：

这是一个棘手的问题，因为您不需要相对于 gulpfile 的基本工作目录，而是相对于所有 Sass 组件。

'./resources/assets/sass/main.scss'是您自己使用的主要 Sass 文件，我说得对吗？如果是这样，我建议在那里导入引导程序：

 @import '../../../vendor/bower_components/bootstrap-sass/assets/stylesheets/_bootstrap';

在让 Sass 处理文件时，Sass 通常在处理相对 URL 方面要好得多。

比我拆分 Sass 和 CSS 文件，稍后使用流队列捆绑它们：

var queue = require('streamqueue');

gulp.task('_sass', function() {
    return queue(
        // our CSS files
        gulp.src([
            './vendor/bower_components/bootstrap-rating/bootstrap-rating.css',
            './vendor/bower_components/select2/select2.css']
        ),
        // our Sass file, compiled to CSS
        gulp.src('./resources/assets/sass/main.scss')
            .pipe(sass())
    )
    // all the rest
    .pipe(concat('all.css'))
    .on('error', notify.onError(function (error) {
        return "Error: " + error.message;
    }))
    .pipe(gulp.dest('./public/css/'))
    .pipe(reload({stream: true}));
});

【讨论】：