Stylus插件开发教程

因为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里面是导入你要与处理CSS的styl文件。

@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 文件在stylus的use参数对象使用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'

关注公众号