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

回答

相關問題