javascript - Gulp 处理文件名

Question

我如何使用 gulp.src 中的文件名，假设基于这些文件名在内存中创建文件，并将该流通过管道传输到其他内容？

假设我想获取所有 *.styl 文件并将找到的每个文件路径推送到以 @import 为前缀的内存文件中，然后将其通过管道传输流入手写笔编译器。像这样:

gulp.src('./src/**/*.styl',{read:false})
.pipe(function(filename){
      return "@import '"+filename+"'"
 })
 .pipe(streamify())
 .pipe(stylus())
 .pipe( gulp.dest('./bin/combined.css'));

我找不到任何让您阅读和合并手写笔文件的好包，所以我想也许我可以以某种方式解决这个问题？

可能我最终会遇到范围界定、样式优先级和破坏的特异性规则方面的问题，但我需要将我的样式合并到一个文件中

Answer 1

我使用以下代码创建了一个 github 存储库来提供帮助。 https://github.com/stevelacy/gulp-mix-test

gulpfile.js

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var mixer = require('./mixer');  // our local gulp-plugin


gulp.task('mix', function(){
  gulp.src('./src/**/*.styl')
  .pipe(mixer("outfile"))  // the out file name, no extension
  .pipe(stylus())
  .pipe(gulp.dest('./out'));  // the out folder
});

为我们将制作的混合 gulp-plugin 创建一个新文件(为了代码的清晰度)。

mixer.js 是本地 gulp-plugin，用于获取文件名，然后将这些名称连接到一个 Vinyl 文件中，我们将把该文件向下发送到 stylus。

mixer.js

var through = require('through2');
var gutil = require('gulp-util');


module.exports = function(outname){
  var paths = '';  // where we will push the path names with the @import

  var write = function (file, enc, cb){
    if (file.path != "undefined"){
      paths =  paths + '\n' + '@import "' + file.path + '"';
    }
    cb();
  };

  var flush = function(cb){  // flush occurs at the end of the concating from write()
    gutil.log(gutil.colors.cyan(paths));  // log it

    var newFile = new gutil.File({  // create a new file
      base: __dirname,
      cwd: __dirname,
      path: __dirname + '/' + outname + '.styl',
      contents: new Buffer(paths)  // set the contents to the paths we created
    });

    this.push(newFile);  // push the new file to gulp's stream
    cb();
  };

  return through.obj(write, flush);  // return it
};

最后，我正在考虑将它移动到一个完整的 gulp 插件中，如果它会被使用的话。