Question

我们有CSS和SCSS文件的组合。这是因为我们在SCSS中编写自己的样式，并且一些样式库也提供了SCSS文件，但我们也只有CSS文件，其中库供应商没有提供SCSS文件（例如，它们只提供CSS文件或LESS文件））

以下是我们用于SCSS文件的gulpfile.js任务：

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
  { path: 'product-list', component: ProductList },
  { path: 'product-details/:id', component: ProductDetails,
    children: [
      { path: '', redirectTo: 'overview', pathMatch: 'full' },
      { path: 'overview', component: Overview },
      { path: 'specs', component: Specs }
    ]
  }
];

无论如何，这似乎给了我们奇怪的行为，例如创建一个＆＃34; bower_components＆＃34; dist /目录中的目录。我们如何编译CSS文件和SCSS文件？

Answer 1

我遇到了同样的问题，基本上gulp不喜欢src中的各种文件夹路径，你必须使用2个不同的任务来处理这个你想要的。

我发现解决此问题的唯一简单方法是使用此实用程序：npm-gulp-rename

用这样的一行：

var rename = require("gulp-rename");

.pipe(rename(function (path) { return path.dirname = "./"; }))

这样做是在拥有数据后删除流中的额外文件夹信息，以便在输出文件时删除额外的文件夹信息。

我的代码中的代码：

gulp.src([
        'bower_components/simple/simple.css',
        //... more CSS files

        'src/scss/app.scss'
        ],
        {base: '.'})
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write())
    .pipe(rename(function (path) { return path.dirname = "./"; }))
    .pipe(gulp.dest('dist/css'));

更新（根据您的评论）：

就个人而言，我会以不同的方式解决这个问题：

从bower_components中复制所需的文件。
将文件放在名为vendor的新文件夹中（忽略GIT中的文件夹）。
然后我正常构建SCSS。

在我的头顶，它会像这样工作：

gulp.task("copy", function () {
    return gulp.src([
        'bower_components/simple1/simple1.css'
        'bower_components/simple2/simple2.css'
    ], {base: '.'})
    .pipe(rename(function (path) { return path.dirname = './'; }))
    .pipe(gulp.dest('vendor')
)};

gulp.task("scss", ["copy"], function () {
    return gulp.src([ 'src/scss/app.scss' ], {base: '.'})
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist/css')
)};

现在转到重要部分，您可以在没有我个人建议的情况下进行。

您需要使用直接支持@import的CSS files将app.scss添加到其他CSS文件中：

@import "../../vendor/simple1.css";

你也可以直接从bower_components文件夹中使用@import，从而跳过我的复制任务：

@import "../../bower_components/simple1/simple1.css";

第二个任务是你运行的任务，它将创建所有连接的CSS文件。

如果您不想在app.scss中使用@import，那么您可以添加另一个常见的gulp广告gulp-concat。如果您希望我扩展如何使用它，请给我留言。

需要考虑的一些事项：

连接可能会使您的源地图不正确。
将文件从bower_components文件夹复制到供应商文件夹将使您的网络服务器上的文件可用，以便您的源地图更有意义。

Answer 2

以下是您可以尝试的一些事项

<强> 1。使用gulp passthrough

此功能可能是最简单的，但需要注意的是需要gulp版本4

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var bower_files = require('main-bower-files');
var sourcemaps = require('gulp-sourcemaps');
var filter = require('gulp-filter');
var merge = require('merge2');

gulp.task('styles', function () {
    var glob = bower_files('**/*.scss') // select the sass bower files
    glob.push('app/**/*.scss')          // select your projects sass files

    return gulp.src(glob)
      .pipe(sourcemaps.init())
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.src(bower_files('**/*.css'), {passthrough: true} )) // add bower css files to stream
      .pipe(concat('main.css'))
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('dist'));
});

这里的工作流程是您选择所有初始sass文件，这些文件将来自bower组件目录以及您的项目目录。然后将它们传递给sass编译器。之后我们可以使用另一个gulp.src方法选择所有下载的bower文件，并将 passthrough 选项传递给方法，我们将这些文件添加到已经编译的文件中并执行其他必要的操作。

<强> 2。使用合并流

此选项不需要gulp版本4，可能是更好的选项，因为它允许您对不同的流执行多个操作。

gulp.task('styles', function () {
    var scss_stream = bower_files('**/*.scss')
    scss_stream.push('app/**/*.scss')

    scss_stream = gulp.src(scss_stream)
      .pipe(sass().on('error', sass.logError));

    var css_stream = gulp.src(bower_files('**/*.css'))

    return merge(scss_stream, css_stream)
      .pipe(concat('main-one.css'))
      .pipe(gulp.dest('dist'));
})

通过分别选择不同类型的文件并使它们成为自己的流，我们可以对不同的流执行多个操作。在第一个流中，我们选择了项目和bowers scss文件，并将它们传递给gulp sass插件。在第二个流中，我们选择了所有css个文件。然后，我们将两个流合并在一起，并执行两个不唯一的操作（concatenation和writing to destination）

我强烈建议您使用main-bower-files插件从bower_components

中选择文件

如果选择的文件顺序很重要，也要小心。您可能不得不求助于以正确的顺序实际选择文件。您可以使用stream queue插件和gulp-filter插件。

我希望这会有所帮助

编译* .css文件以及* .scss文件

2 个答案: