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

Gulp cwd 到项目根目录

Gulp cwd to project root

javascript

laravel

gulp