編譯* .css文件和* .scss文件

Question

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

下面是我們爲gulpfile.js SCSS文件的任務：

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

UPDATE（基於您的評論）：

個人而言，我會去了解這個以不同的方式：

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

我們，你可以沒有我的個人建議做的重要組成部分。

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

@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.使用一飲而盡直通

此功能可能是最簡單的，但需要注意的是，它需要一飲而盡版本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')); 
}); 

這裏的工作流程是，您將選擇所有來自bower組件目錄以及項目目錄的初始sass文件。然後將它們傳遞給sass編譯器。之後，我們可以使用另一個gulp.src方法，並通過將傳遞選項，選擇所有的涼亭下載的CSS文件，我們將這些文件添加到我們已經sass編譯的文件，並執行其他必要的操作。

2.使用合併流

此選項不要求大口版本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插件。

我希望這可以幫助