gulp-sass-separate-vendors v0.0.6
Gulp Sass Separate Vendors
Separate sass vendors which import by @import
to another file in gulp pipe line.
Install
npm install --save-dev gulp-sass-separate-vendors
Usage
import SeparateVendors from 'gulp-sass-separate-vendors'
var separator = SeparateVendors()
gulp.src('test.scss')
.pipe(separator.init())
.pipe(sass())
.pipe(separator.compile())
.pipe(separator.combine())
.pipe(gulp.dest('.'))
The previous code will help to get two css files, one contains only vendors style and the other one contains the source style without vendors.
Notice: one separator
can be called in only one pipe line, do not reuse it in another pipe line.
Notice: @import "some-module";
should be at the first place in a scss text line, and do not put it at the begin of a line in comments.
Options
You can pass options
into the generator function like previous example code.
{
vendors: ['bootstrap-sass', '_settings.scss', './my-styles.scss'],
extract: -1|0|1,
}
vendors
boolean or array
Which modules do you want to put in vendors.css file.
If vendors is undefined
or true
, all modules will be contained in vendors.
It is a little difficult to understand: if you set vendors to be true or undefined, all imported modules will be treated as vendors. For example:
// main.scss
@import "bootstrap-sass";
@import "settings"; // _settings.scss
@import "colors.scss";
@import "../a.scss";
...
All of those modules will be treated as vendors. However, in fact, you want to keep ../a.scss as internal style in output bundle css file. At this time, you should have to set vendors as an array:
{
"vendors": ["bootstrap-sass", "settings", "colors.scss"]
// Notice:
// 1. name of modules should be same
// 2. do not input "../a.scss" into vendors, so that "../a.scss" will compile into internal style css file
}
Now, let look into '../a.scss'. Sometimes, you will import some other modules in ../a.scss:
// a.scss
@import "google-font";
...
You want to put "google-font" into vendors bundle file as a vendor. You should input "google-font" into vendors array, or it will be compile into internal style file because a.scss being treated as an internal module.
extract
number
1: only vendors.css file. 0 or false or undefined: vendors in vendors file, and internal styles in single file, two output files. -1: only styles without vendors.
Methods/API
.init(vendors)
Should be called before sass compiler. It will record scss modules.
Set vendors here if you have not set options.vendors
.
.compile()
Should be called after sass compiler. It will re-organize output files.
.combine()
Should be called after .compile()
. Both vendors bundle file and style bundle file will be created.
If you do not call .extract
after .combine
, both these bundle files will be output.
.extract(which)
Should be called after .combine()
. You use this to determine which bundle file to output only.
Set which
to be 1 if you want to get .vendors.css only. If you want to get style bundle file only, set which
to be -1.
If you do not set which
, it will use options.extract
instead.
import SeparateVendors from 'gulp-sass-separate-vendors'
var separator = SeparateVendors()
gulp.src('test.scss')
.pipe(separator.init(['bootstrap-sass', 'google-font']))
.pipe(sass())
.pipe(separator.compile())
.pipe(separator.combine())
.pipe(separator.extract(1)) // get only vendors bundle file
.pipe(gulp.dest('.'))
Generator
This package is generated by componer. If you want to modify the source code, do like this:
# install componer
npm i -g componer
# get from registry
git clone https://github.com/componer/gulp-sass-separate-vendors.git
# install dependencies
cd gulp-sass-separate-vendors && cpon install
# build this package
cpon build
To learn more about componer, read this.