Gulp：使用纯CSS编译Stylus和concat

我在'./styles/stylus/**.styl'中有一堆Stylus文件和'./styles/css/**.css'中的一堆CSS文件。Gulp：使用纯CSS编译Stylus和concat

如何使用Gulp编译Stylus文件，将结果与所有CSS文件连接并输出到'./styles/out.css'？

2014-09-11 damd

您可以使用gulp-filter，如：

var gulp = require('gulp'); 
var stylus = require('gulp-stylus'); 
var concat = require('gulp-concat'); 
var Filter = require('gulp-filter'); 

gulp.task('css', function() { 

    var filter = Filter('**/*.styl', { restore: true }); 

    return gulp.src([ 
      './styles/stylus/**.styl', 
      './styles/css/**.css' 
     ]) 
     .pipe(filter) 
     .pipe(stylus()) 
     .pipe(filter.restore) 
     .pipe(concat('out.css')) 
     .pipe(gulp.dest('./styles')); 
});

来源

2014-09-11 21:51:13 coma

您应该能够创建文件的两个独立的数据流，并与event-stream合并它们：

var es = require('event-stream'); 

gulp.task('styles', function() { 
    var stylusStream = gulp.src('./styles/stylus/**.styl') 
    .pipe(stylus()); 

    return es.merge(stylusStream, gulp.src('./styles/css/**.css')) 
    .pipe(concat('out.css')) 
    .pipe(gulp.dest('./styles')); 
});

来源

2014-09-11 16:43:44 Ben

这是最好的解决方案，当你需要连接很多传统的css样式表时，只需使用'@require legacy/*'将不起作用，因为globbing导入仅适用于**。styl **源文件。 – 2016-11-21 15:27:03

在手写笔的文件，你可以@require CSS文件：

@require 'something.css'

The n在Gulp中不需要串联或任何其他复杂性，并且您的文件加载顺序在.styl文件中明确设置。

来源

2015-05-26 00:25:25

这应该遵循。在某些情况下我们可能需要上述解决方案 – Yash 2015-06-24 10:12:22

你可以请扩展一下吗？我不清楚这是如何解决这个问题的......？ http://stackoverflow.com/users/223225/geoffrey-booth – MaxRocket 2016-01-14 16:21:35

如果最终结果是包含源.css和.styl文件的一个CSS文件，则可以使用Stylus文件来包含这两个文件。这样，只有一个构建路径：编译Stylus，而不必稍后连接/合并文件。 – 2016-01-14 22:21:03

我刚刚发现了一个很好的解决方案：在您的main.styl文件中为每个其他.styl文件使用@require，并且只是观看gulp.src（'src/css/main.styl'）

来源

2016-01-14 16:32:00 MaxRocket

Gulp：使用纯CSS编译Stylus和concat

回答

相关问题