转载

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'

原文 https://segmentfault.com/a/1190000004941693

正文到此结束