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

cazzer/gulp-selectors: Catalog all of your selectors and do fun stuff with them.

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

开源软件名称(OpenSource Name):

cazzer/gulp-selectors

开源软件地址(OpenSource Url):

https://github.com/cazzer/gulp-selectors

开源编程语言(OpenSource Language):

JavaScript 98.3%

开源软件介绍(OpenSource Introduction):

This project is looking for a maintainer

I am no longer maintaining this repository and would be happy to transfer it to someone who still actively uses it. Respond to the maintainer issue if you are interested in taking ownership. In case you are interested, I use css-modules now instead.

gulp-selectors

Build Status Code Climate Test Coverage NPM Version

Minify those pesky selector names down to nothing with this fancy gulp plugin. Minified selectors will be applied consistently across all files piped into it.

Input Output
.class-name { ... } .a { ... }
.another-class { ... } .b { ... }
#an-id { ... } #a { ... }
<div class="class-name"> ... </div> <div class="a"> ... </div>

You're like: .some-super-descriptive-selector-name {...}, and it's like: .a {...}

Usage

First and foremost: npm install gulp-selectors

var gulp	= require('gulp');
var gs		= require('gulp-selectors');

gulp.src(['src/**/*.css', 'src/**/*.html'])
    .pipe(gs.run())
    .pipe(gulp.dest('dist'));

You can also pass some options into run:

gs.run(processors, ignores)

CSS and HTML files are processed well by default, just pass in your glob of files and all classes and IDs will be reduced to a minified form. Of course you can use it for some more specific functions if you like. See the included sample gulpfile for a full example of how to effectively use gulp-selectors in your gulp workflow.

Defaults

All arguments are optional. If omitted, processors will default to css and html and ignores will be empty:

gs.run({
    'css': ['css'],
    'html': ['html']
  }, {
  });

Advanced Usage

var processors = {
        'css':  ['scss', 'css'],        // run the css processor on .scss and .css files
        'html': ['haml'],               // run the html processor on .haml files
        'js-strings':   ['js']          // run the js-strings plugin on js files
    },
    ignores = {
        classes: ['hidden', 'active']   // ignore these class selectors,
        ids: '*'                        // ignore all IDs
    };

gs.run(processors, ignores);

Two processors are built in for your convenience: css and html are stable but js-strings and remove-unused are beta and may be moved to their own repositories.

  • css: matches .selectors and #selectors
  • html: matches id="selector"s, class="selector"s, and for="selector"s
  • js: matches exact strings by looping through the library, which is dangerous if you use common words as selectors
  • remove-unused: should be run last, and only on stylesheets - it removes all declarations present in the library which haven't been used

If a processor is listed which isn't built in, gulp-selectors will attempt to require it.

How gulp-selectors works

Calling gs.run() builds a library which persists for all processors used in the call. Processors are run on all associated files and all selectors, besides those that have been ignored, will be minified.

Processors

{
    'css': ['css', 'scss'],
    'html': ['html', 'tpl.js'],
    'js-strings': ['js', '!tpl.js'],
    'your-custom-processor': ['.ext']
}

css and html are built in. Additional processors referenced will be injected where needed so it is important to ensure all are installed. Processors are used like this:

processor(file, classLibrary, idLibrary)

File is the string containing the file contents. Each of the two libraries exposes the following API:

  • set(selectorName): returns a minified selector name
  • has(selectorName): tests if the name exists
  • get(selectorName, [dontCount]): ...
libraries

Ignores

{
    ids: ['content', 'target'],
    classes: ['hidden', 'active']
}



鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
lin-xin/gulp-plugins: gulp 常用插件功能和用法的详细使用说明发布时间:2022-06-21
下一篇:
coderiver/gulp发布时间: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