編譯* .css文件以及* .scss文件

Question

我們有CSS和SCSS文件的組合。 這是因為我們在SCSS中編寫了自己的樣式，並且某些樣式庫也提供了SCSS文件，但是我們也只有CSS文件，而庫供應商沒有提供SCSS文件（例如，它們僅提供CSS文件或LESS文件） ）

以下是我們針對SCSS文件的gulpfile.js任務：

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

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

無論如何，這似乎在給我們帶來奇怪的行為，例如在dist /目錄中創建“ bower_components”目錄。 我們如何將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'));

更新（根據您的評論）：

就我個人而言，我將以另一種方式進行處理：

1. 從bower_components中復制所需的文件。
2. 將文件放在一個名為vendor的新文件夾中（忽略GIT中的文件夾）。
3. 然后，我通常會構建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')
)};

現在進入重要部分，您可以在沒有我個人建議的情況下進行操作。

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

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

您也可以直接從bower_components文件夾使用@import，從而跳過我的復制任務：

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

第二項任務是您運行的任務，它將創建所有串聯的CSS文件。

如果您不想在app.scss中使用@import，則可以在gulp -concat中添加另一個常見的gulp廣告。 如果您希望我擴展使用方法，請給我留言。

需要考慮的幾件事：

1. 串聯可能會使您的源映射不正確。
2. 將文件從bower_components文件夾復制到供應商文件夾將使這些文件在Web服務器上可用，從而使源映射更有意義。

Answer 2

這是您可以嘗試的幾件事

1.使用gulp直通

此功能可能是最簡單的，但需要注意的是它需要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方法選擇所有gulp.src下載的css文件，並通過將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文件，並將它們傳遞給scss sass插件。 在第二個流中，我們選擇了所有的css文件。 然后，我們將兩個流合並在一起，並執行了兩個流都不唯一的操作（ concatenation和writing to destination ）

我強烈建議使用main-bower-files插件從bower_components選擇文件

如果選擇的文件順序很重要，也要小心。 您可能必須求助於以正確的順序實際選擇文件。 您可以將流隊列插件與gulp-filter插件一起使用。

我希望這有幫助