守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 338|回复: 0

[Stylus] Stylus插件开发教程

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51789
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-15 11:57:50 | 显示全部楼层 |阅读模式

    来源:http://div.io/topic/1688

    由于Stylus的强大,它支持SCSS LESS 灵活的书写方式,然后它不用像SCSS安装Ruby,不是特别出名,流行的工具没有使用它,只是在小的圈子里面挺火滴。它的强大不用赘述了,我正在使用了它开始吧:最近为了方便自己将px转换成rem写了一个基于Stylus的插件,我就以它为例子吧,源码在此stylus-px2rem

    准备工作

    你本机需要安装node,现在我假设你已经安装好了node,建立好你的文件,这个是我的文件目录,我将插件stylus-px2rem项目放在我本机的这个位置~/git/stylus-px2rem

    stylus-px2rem # 项目根目录
    ├── README.md
    ├── index.styl # px2rem入口文件
    ├── lib
       ├── px2rem.js # 这个很重要下面详细描述
       ├── stylus-px2rem # Stylus插件需要的文件
          ├── mixins.styl
          ├── padding.styl
          ├── width.styl
          ....
       └── stylus-px2rem.styl # 同样是px2rem的入口文件
    ├── node_modules # 依赖包其实可以啥包也不用
    └── package.json # 配置文件

    添加基础的文件

    添加配置文件

    你可以通过npm init 一路Enter生成package.json基本标准的配置文件。你还需安装一个Stylus依赖,告诉使用者,你这个是基于Stylus哪个版本开发的,当然你可以不安装这个依赖,那只能自己用了。

    {
      "name": "stylus-px2rem",
      "version": "1.0.4",
      "description": "Stylus convert px to rem in css files with optional fallback to px.",
      "main": "lib/px2rem.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "https://github.com/jaywcjlove/stylus-px2rem"
      },
      "keywords": [],
      "author": "kenny wang <398188662@qq.com>",
      "license": "MIT",
      "dependencies": {
        "stylus": "^0.54.2"
      }
    }

    这个配置文件package.json要注意添加一个 "main": "lib/px2rem.js" 这个很重要它指明你在使用这个包的一个根目录,这个是在你使用Stylus的use方法必须要的js文件方便你找到你的styl文件。lib/px2rem.js 代码

    var plugin = module.exports = function plugin () {
        'use strict';
        return function (style) {
          style.include(__dirname);
        };
    };
    plugin.path    = __dirname;
    plugin.version = require(__dirname + '/../package.json').version;

    添加了这个js文件,你放在什么目录在你使用这个插件,在styl文件中引入的路径就变更了,你使用@import 'stylus-px2rem' 的最终路径是px2rem.js所在的项目绝对路径,因为我是放在lib目录中,所以路径为绝对路径/stylus-px2rem/lib/stylus-px2rem.styl。如果你不需要这个js文件很多时候会因为找不到你引入的styl文件而报错。

    添加预处理文件

    我们将预处理文件全部放到./lib/stylus-px2rem目录下名字跟包名字一样,这样方便你引入这个styl处理工具的时候保持一模一样的名字。同样你还需要建立一个stylus-px2rem.styl文件,其实这个是一个类似于软链接一样的,跟放在根目录的index.styl文件是一样的。

    index.styl 里面的类容是导入lib文件夹中的stylus-px2rem.styl 文件

    @import 'lib/stylus-px2rem.styl'
    

    stylus-px2rem.styl里面是导入你要与处理CSSstyl文件。

    @import 'stylus-px2rem/mixins'
    @import 'stylus-px2rem/font-size'
    //...
    

    文件建立好之后你就可以很方便的使用stylus-px2rem 工具了。

    开发调试

    stylus-px2rem根目录中运行npm link在本机全局为stylus-px2rem做一个软链接,如果你移动了stylus-px2rem目录你得重新做软链接。输出下面内容你就可以在你的项目中调试使用了。

    /usr/local/lib/node_modules/stylus-px2rem -> 
    ~/git/stylus-px2rem

    你只需在你需要使用的项目中运行npm link stylus-px2rem在你的项目只再做一次软链你就可以编辑你的插件,在你的项目中调试了。

    项目中使用

    在 Gulp 中使用

    新建 gulpfile.js 文件在stylususe参数对象使用stylus-px2rem工具

    var gulp = require('gulp');
    var stylus = require('gulp-stylus');
    var px2rem = require('stylus-px2rem');
    gulp.task('stylus',function(){ 
      gulp.src('./styl/*.styl')
        .pipe(stylus({
            use:[px2rem()],
            compress:true
        }))
        .pipe(gulp.dest('./build')); 
    })

    在index.styl 中使用

    @import 'stylus-px2rem'
    .banner{
        height 140px
        font-size 24px
    }
    

    在你做好配置之后你就可以跑你建立的gulp任务命令:gulp stylus

    在 npm script 构建使用

    首先安装 Stylus 工具,再安装stylus-px2rem

    $ npm install stylus --save

    如果没有发布调试过程,或者不打算发布,确定安装上面步骤做好全局软链了,你只需要在你使用的项目中做一次软链就可以了。

    $ npm link stylus-px2rem

    如果你不需要调试,直接将stylus-px2rem发布到npmjs.org上面了就运行下面命令。

    $ npm install stylus-px2rem --save

    然后在你的package.json中添加scripts 就可以了

    {
      "scripts": {
        "build": "stylus -u stylus-px2rem index.styl -o css/ -c",
        "watch": "stylus -u stylus-px2rem -w \"index.styl\" -o css/ -c "
      },
      "dependencies": {
        "stylus": "^0.54.2",
        "stylus-px2rem": "^1.0.4"
      }
    }
    

    然后在你的styl文件中引用即可,因为你上面的命令中使用了-u stylus-px2rem工具,所以你只需在index.styl中简单倒入即可。

    @import 'stylus-px2rem'

    因为你在前面添加了lib/px2rem.js文件事实上@import导入的文件是~/git/stylus-px2rem/lib/stylus-px2rem.styl

    在你的项目中添加好了之后你可以运行命令编译或者监控自动编译。

    # 监控文件实时编译CSS文件
    $ npm run watch
    # 直接编译生成CSS文件
    $ npm run build

    最简单的使用

    假设你stylus工具是全局安装的

    npm install -g stylus # 全局安装stylus
    npm link stylus-px2rem # 调试的方法安装到当前目录

    建立你的index.styl文件并使用stylus-px2rem

    /* 这种引用方式是你在目录lib/px2rem.js指向了lib目录,所以直接引用的是stylus-px2rem.styl文件 */
    @import "stylus-px2rem"
    /* 这种方式是lib/px2rem.js指向了这个目录,你引用stylus-px2rem目录中的styl文件 */
    @import 'stylus-px2rem/mixins'
    @import 'stylus-px2rem/font-size'
    @import 'stylus-px2rem/border'
    @import 'stylus-px2rem/margin'
    div{
      width:30px
    }
    

    运行命令输出CSS文件:

    $ stylus -u stylus-px2rem index.styl
    

    你的styl可以这样引用stylus-px2rem处理文件

    @import 'node_modules/stylus-px2rem/lib/stylus-px2rem'
    

    也可以一个一个的引用

    @import 'node_modules/stylus-px2rem/lib/stylus-px2rem/mixins'
    @import 'node_modules/stylus-px2rem/lib/stylus-px2rem/font-size'
    @import 'node_modules/stylus-px2rem/lib/stylus-px2rem/border'
    @import 'node_modules/stylus-px2rem/lib/stylus-px2rem/margin'
    @import 'node_modules/stylus-px2rem/lib/stylus-px2rem/padding'
    @import 'node_modules/stylus-px2rem/lib/stylus-px2rem/width'
    @import 'node_modules/stylus-px2rem/lib/stylus-px2rem/height'
    @import 'node_modules/stylus-px2rem/lib/stylus-px2rem/line-height'
    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-11-19 02:32 , Processed in 0.046241 second(s), 37 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表