Browserify Transform to require less files
Browserify transform to
and output the compiled css into a file.
The rest of Css and Less Browserify transforms point to
headappendChild'<style>' + your_css + '</style>';
This transform will generate a stream with your compiled css and an interface to piping transforms into it so you can do what every you like.
/* style.less */
will generate a separate bundle file
/* compiled.css */
- Works with both
- You still have complete less and css functionality like
- It will create a stream that contains the compiled css and then you can do whatever you like with it! (see
This is my recommended way of outputing the compiled css into a file, but you can also use
fs.createWriteStream('path/compiled.css') and of course any other analogues.
var gulp = require'gulp';var source = require'vinyl-source-stream';var require_less = require'require-less'pipe:source'bundle.css'gulpdest'./test';
In the preceding example the
vinyl-source-stream library is being used to turn
the regular stream to something gulp can handle.
This illustrates that you can use the pipe attribute to pipe any stream transform providing complete freedom for what you want to do.
test/test_case_3.js is a test using a 2 gulp plugins:
It will return a transform function ready to be used by browserify.
var require_less = require'require_less'optionsbrowserifybrowserify_optstransformrequire_less;
browserify_optsits just regular browserify opts
Options will host all the regular less parser options plus some useful attributes as detailed below.
This attribute provides an interface to deal with the css stream as you will regularly
The pipe array will be executed in order in the following way:
Provide a callback that will be executed at the end of the stream transform process.
Checkout travis.ci badge, or run locally the tests by
cd path/to/repo/rootnpm test
- This transform will not work when setting
package.jsondue to its nature.
- This transform does not work with Watchify yet, pull request welcome.
The following are links to sources of inspiration and conflict solving when I was working on this Transform. I have copied pieces of code from them so they are contributors.