javascript - Gulp cwd 到项目根目录

Question

我当前的代码:

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 文件，而无需将文件复制到其他目录？

Answer 1

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

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

 @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}));
});