• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

cognitom/gulp-slim: Slim plugin for gulp

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

cognitom/gulp-slim

开源软件地址(OpenSource Url):

https://github.com/cognitom/gulp-slim

开源编程语言(OpenSource Language):

CoffeeScript 75.6%

开源软件介绍(OpenSource Introduction):

gulp-slim Build Status

A Slim plugin for gulp.

Install

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

Usage

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/'

Options

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'
      }
	}
})

Some Scenarios

With AngularJS

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/"));
});

With Another Encoding

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/"));
});

Passing Data into the Template

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" }
    ]
  }
})

Changelog

0.3.0

  • add support slim require #26

0.2.0

  • add environment option for spawn process #33

0.1.0

Special thanks to @dmke !! See here.

  • add data option to inject data into the template

0.0.11

  • add logging of errors and fail if a compile error happens with slimrb

0.0.8

  • support Windows



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
nkt/gulp-serve: Provide connect-server functionality发布时间:2022-06-21
下一篇:
angular-gettext - Super-simple translation support for Angular发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap