Processing file names with Gulp

Question

Processing file names with Gulp

Is there a way to use the filenames retrieved from gulp.src, create in-memory files based on those names, and then pipe that stream to another destination?

For example, I am looking to gather all *.styl files and add each file path to an in-memory file with the prefix @import. Afterwards, I would like to pass this stream to a stylus compiler. Here is what I have in mind:

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

I haven't come across any suitable packages for reading and combining stylus files, so I thought of tackling this challenge differently.

I understand that issues may arise related to scoping, style precedence, and specificity rules when merging styles into one file, but it's a necessity for me.

javascript concatenation gulp stylus

Answer 1

Answer №1

To help out, I have put together a github repository containing the code mentioned. https://github.com/stevelacy/gulp-mix-test

gulpfile.js

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var mixer = require('./mixer');  // a custom gulp plugin we've created


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

In order to maintain clarity in the code, let's create a separate file for our custom gulp plugin.

mixer.js serves as the local gulp plugin responsible for extracting file names and combining them into a Vinyl file that will be passed down the stream to stylus.

mixer.js

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


module.exports = function(outname){
  var paths = '';  // storing the path names with @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 concatenation from write()
    gutil.log(gutil.colors.cyan(paths));  // logging it

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

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

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

Upon completion, I am contemplating transforming this into a complete gulp plugin, if necessary.

Answer 2

To help out, I have put together a github repository containing the code mentioned. https://github.com/stevelacy/gulp-mix-test

gulpfile.js

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var mixer = require('./mixer');  // a custom gulp plugin we've created


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

In order to maintain clarity in the code, let's create a separate file for our custom gulp plugin.

mixer.js serves as the local gulp plugin responsible for extracting file names and combining them into a Vinyl file that will be passed down the stream to stylus.

mixer.js

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


module.exports = function(outname){
  var paths = '';  // storing the path names with @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 concatenation from write()
    gutil.log(gutil.colors.cyan(paths));  // logging it

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

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

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

Upon completion, I am contemplating transforming this into a complete gulp plugin, if necessary.

Processing file names with Gulp

Answer №1

Similar questions

Using jQuery or Javascript to enclose every character in a given string with an HTML tag

JavaScript and CSS content, when compared, showcase varying characteristics and functionality

Is it possible to utilize a computed property for dynamically styling a table row based on certain conditions?

Retrieve the Multer file name and/or file path

Unable to include Authenticated Routes in react router dom

Tips for launching a colorbox within a specific div container

Guide to Rolling a Set of 5 Dice

Retrieving objects from Firebase in a loop using promises

Having trouble serving compressed files efficiently with Express

Tips for increasing a cell in AG Grid React table:

The edit functionality in jqGrid does not function properly if custom search parameters are designated

Express.js continues to retrieve outdated query results that have already been removed from the database

Retrieve a specific value from a JavaScript object

Ways to conceal an item by considering the size of a different element

Enhance the display in Angular2

Tips for extracting data from a JQuery table with Python

Having trouble initiating a "curl:localhost:3000" connection, receiving a URI Error message

Encountering the following error: Exceeded maximum call stack size limit

"Implementing a comment system using Node.js and MySQL: A comprehensive guide

Challenge with scroll function in Internet Explorer JavaScript