We need Slim in version 3.0.2 or greater. If you don't have Slim installed, please install Ruby (and RubyGems) first and run
gem install slim -v '>= 3.0.2'
If you already have Slim installed, make sure you are using the latest version:
gem update slim
Finally, install gulp-slim
:
npm install gulp-slim --save-dev
var gulp = require("gulp");
var slim = require("gulp-slim");
gulp.task('slim', function(){
gulp.src("./src/slim/*.slim")
.pipe(slim({
pretty: true
}))
.pipe(gulp.dest("./dist/html/"));
});
or write it in CoffeeScript.
gulp = require 'gulp'
slim = require 'gulp-slim'
gulp.task 'slim', ->
gulp.src './src/slim/*.slim'
.pipe slim pretty: true
.pipe gulp.dest './dist/html/'
The options are the same as what's supported by slimrb
.
pretty: true
erb: true
compile: true
rails: true
translator: true
logicLess: true
include: true
Set bundler: true
to invoke slimrb
via bundler.
Set chdir: true
to invoke slimrb
in the same directory as the file currently being processed (for including files in the same directory).
You can require one of the plug-ins available with Slim with the require
key. Value can be string
or array
.
slim({
require: 'slim/include'
options: 'include_dirs=[".", "common/includes", "./includes"]'
})
slim({
require: ['slim/include', 'slim/logic_less']
})
Note that when using slim/include you will likely need to use the 'include_dirs' option (as outlined above). See the tests on how to configure include directories with the inclulde partials plugin.
You can also add custom options with options
key. Value can be string
or array
.
slim({
pretty: true,
options: 'attr_quote="\'"'
})
slim({
pretty: true,
options: ['attr_quote="\'"', 'js_wrapper=:cdata']
})
slim({
include: true,
options: 'include_dirs="[\'test/fixtures\']"'
})
You can also add any other console options for custom slimrb run options. For example:
slim({
prerry: true,
environment: {
cwd: process.cwd(),
env: {
'LC_CTYPE':'ru_RU.UTF-8'
}
}
})
If you want to compile such a source.
doctype html
html ng-app="app"
head
body ng-controller="YourController as ctrl"
p {{ desc }}
p
| {{ something }}
a ng-href="https://github.com/{{ user }}"
You need to specify a attr_list_delims
. (or attr_delims
if you use slimrb previous to 2.1.0)
var gulp = require("gulp");
var slim = require("gulp-slim");
gulp.task('slim', function(){
gulp.src("./src/slim/*.slim")
.pipe(slim({
pretty: true,
options: "attr_list_delims={'(' => ')', '[' => ']'}"
}))
.pipe(gulp.dest("./dist/html/"));
});
For example, if slimrb
's default is US-ASCII
but you want to compile a source in utf-8
, then use encoding
option.
var gulp = require("gulp");
var slim = require("gulp-slim");
gulp.task('slim', function(){
gulp.src("./src/slim/*.slim")
.pipe(slim({
pretty: true,
options: "encoding='utf-8'"
}))
.pipe(gulp.dest("./dist/html/"));
});
Suppose you have the following template:
doctype html
html
head
title = title
body
h1 = title
ul
- for u in users
li = u.name
You can fill in the variables by passing a plain old JavaScript object
as data
option into the slim
plugin:
slim({
data: {
title: "Just a list of usernames",
users: [
{ name: "Fred" },
{ name: "Bill" },
{ name: "Harry" }
]
}
})
- add support slim require #26
- add environment option for spawn process #33
Special thanks to @dmke !! See here.
- add
data
option to inject data into the template
- add logging of errors and fail if a compile error happens with slimrb
- support Windows