编译* .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插件。

我希望这可以帮助