0.3.2 • Published 9 years ago

gulp-riot-css v0.3.2

Weekly downloads
1
License
MIT
Repository
github
Last release
9 years ago

gulp-riot-css

项目起因

riot模板中css样式会被直接添加到head中,容易造成污染,比如说两个模块中都有h1标签,那么同时使用这两个模块的话就会相互影响。 解决方法: 给模块内样式选择器添加范围限定,比如说,属性选择器riot-tag=tagName或者标签选择器tagName。 使用gulp-riot-css可以自动给riot模块内css样式选择器添加范围限定。 并且可以将外部的css引入到模块内,单独加载模块时无需另外加载样式文件

项目说明

  • 拆分riot中sytle标签,包裹在属性选择器riot-tag=**或者标签选择器中输出
  • 可以生成单独的css和js,也可以只生成js文件(css样式部分在js内部),还可以引入外部的css
  • 分别生成单独的scs和js文件,可以分别定义输出文件目录
  • ie7已经支持属性选择器,riot使用h5和es5插件可以兼容到ie8
  • 该方式适用与某一模块的单独样式,对通用样式,建议不要写在模块内

使用方式

首先你需要安装gulp-riot-css和gulp npm install -d gulp-riot-css npm install -d gulp

var gulp = require('gulp');
var riot_css = require('gulp-riot-css');

gulp.task('riot_css', function () {
    gulp.src(['./*.html'])
        .pipe(riot_css({css: 'css/riot_tag.css', js: 'js/riot_tag.js'}))
        .pipe(gulp.dest('./output'));
});

gulp.task('default', ["riot_css"]);

gulp调用时参数说明

参数类型默认值说明
jsstring'riot_tag.js'指定生成的js存放位置及文件名
cssstring''指定生成的css存放位置及文件名扩展名为scss或sass或less时,直接将style包裹在属性标签内部;当为空时,则不单独生成style,直接将style包含在tag模板内
typestring'all'指定输出css限定范围使用属性选择器还是标签选择器。'all'同时输出两种模式,'attr'输出属性选择器,'tagName'输出标签选择器
definebooleanfalse是否使用define标签包裹,便于requirejs引用

模块内引入外部css

在模块内增加style节点,将会自动引入test.css文件并增加样式范围限定。参考test/test3.html

参数说明
src引入的css文件位置
addtagcss中样式选择器是否增加范围限定

示例(参考test目录下文件)

<test>
    <style>
        h1 {
            color: green;
        }
        .content {
            color: blue;
        }
    </style>
    <h1>This is a test file</h1>
    <div class="content">{content}</div>
    <script>
        this.content = 'This is content;';
    </script>
</test>

将生成

/**这是gulp-riot-model根据riot模板生成的文件.如需修改,请修改riot模板后重新编译*/
[riot-tag=test] h1,test h1
{
  color: green;
}
[riot-tag=test] .content,test .content
{
  color: blue;
}

/** ----- created by gulp-riot-css -----*/
riot.tag('test', '<h1>This is a test file</h1> <div class="content">{content}</div>', function(opts) {
        this.content = 'This is content;';

});

todo

  • 修改引入的图片文件路径

版本更新

  • 0.3.2 修复引入文件bug
  • 0.3.1 引入外部css文件
  • 0.3.0 修复@media媒体选择器bug
  • 0.2.9 修复范围限定词bug
  • 0.2.8 删除注释;减少体积,根据参数只使用一种选择器样式
  • 0.2.7 修复.root和.self bug
  • 0.2.6 判断是否存在重复文件,重复时提示错误
  • 0.2.5 修改define生成方式,改为tag外部,不包裹riot.tag内容;空文件时不生成内容
  • 0.2.4 修复错误:多重条件选择时(例如:.__self.cls) 转换时不能增加空格
  • 0.2.3 增加define参数,便于requirejs引用:define值为string或true,为string时,define代表标签前缀,例如define='tag_',则生成define('tag_tagName',function(){});
  • 0.2.2 不指定js文件名时,将按照tag名称输出js文件
  • 0.2.1 style在tag内部时,可以包含.root和.self
  • 0.2.0 当没有css路径参数时,style样式保存到tag内部,不单独生成css文件
  • 0.1.9 修复riot升级后无法编译错误(固定版本为2.2.4)
  • 0.1.9 样式增加节点名称选择器
  • 0.1.8 生成less和scss时,将.__root替换为@at-root(跳出选择器范围)
  • 0.1.7 生成less和scss时,将.__self替换为&(指定本节点属性)
  • 0.1.6 修复部分错误
  • 0.1.5 根据css扩展名(sass,scss,less) 直接将style用标签包裹,便于之后sass或less编译
0.3.2

9 years ago

0.3.1

9 years ago

0.2.9

9 years ago

0.2.8

10 years ago

0.2.7

10 years ago

0.2.0

10 years ago

0.1.9

10 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago