There are a few common problem we want to solve when developing custom Inuit themes using its new modular approach with Bower.
- Import the modular sections in order: you would usually need to maintain an
index.scss
that imports all the.scss
files from your bower modules, like it is recommended - Customizing variables defined by all those modules you are depending on.
These common problems (and common solutions) are not only tedious, but also problem-prone (think: copying a new variable for customization after upgrading an Inuit module). This gulp plugin is designed to specifically fill these gaps.
- The primary function of
gulp-inuit
takes a vinyl stream and generate a virtualindex.scss
on the fly, importing all.scss
files from all bower dependencies, in order. You can then pipe it togulp-sass
to get your css output. Simply put, you would never need to manually maintain aindex.scss
any more. - The secondary function of
gulp-inuit
(exported asvariables
) will take a vinyl stream and translate that into a stream of files (vinyl objects) with the variables extracted from those in the original stream.
First, install gulp-inuit
as a development dependency:
npm install --save-dev gulp-inuit
Primary usage
var sass = require('gulp-sass');
var mainBowerFiles = require('main-bower-files');
var inuit = require("gulp-inuit");
// it is not necessary to read in the content
var sassFileStream = gulp.src(mainBowerFiles().concat('**/*.scss'), {read: false});
inuit(sassFileStream)
.pipe(sass())
.pipe(gulp.dest("./dist"));
Type: String
Default: index
The file name of the resulting vinyl object.
var sassFileStream = gulp.src(mainBowerFiles().concat('**/*.scss'), {read: false});
// this will generate a file './dist/main.css', instead of './dist/index.css'
inuit(sassFileStream, { name: 'main' })
.pipe(sass())
.pipe(gulp.dest("./dist"));
Type: Array
Default: [ 'settings', 'tools', 'generic', 'base', 'objects', 'components', 'trumps' ]
The array of section names, in their expected import order. The default values is as documented on Inuit's getting started guide.
You may never have to change any of the following options.
Type: String
Default: //= {{name}}:{{ext}}
gulp-inuit
uses gulp-inject internally to create a centralized index.scss
file that imports all modular .scss
files in order. This option is in fact the starttag option from that plugin.
Type: String
Default: //= endinject
Same reason as options.starttag
, this is simply endtag option from gulp-inject
.
Type: String
Default: scss
Inuit uses .scss
syntax, this option allows the plugin to work with any potential porting to other css preprocessing languages.
Secondary usage
var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');
var conflict = require('gulp-conflit');
var inuit = require("gulp-inuit");
gulp.task('customize-variales', function () {
// you must NOT set { read: faslse }, the plugin needs to read into the content for variable extraction.
return gulp.src(mainBowerFiles())
.pipe(inuit.variables())
.pipe(conflict('./app/styles/customize'))
.pipe(gulp.dest('./app/styles/customize'));
});
You can run this gulp task every time when you add/remove/update your bower dependencies. The task will generate a list of .scss
files that captures the variables declared in those bower packages, and put the files in app/styles/customize
directory. The conflict()
gulp plugin shown in example should help you navigate through the changes before you apply them.
Type: Array
Default: [ 'settings', 'tools', 'generic', 'base', 'objects', 'components', 'trumps' ]
The array of section names, in their expected import order. The default values is as documented on Inuit's getting started guide. Only files with a name that follows the inuit file naming convention would be processed for variable extraction.
Type: String
Default: scss
Inuit uses .scss
syntax, this option allows the plugin to work with any potential porting to other css preprocessing languages.