时间:2021-07-01 10:21:17 帮助过:32人阅读
你本机需要安装 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在你的项目只再做一次软链你就可以编辑你的插件,在你的项目中调试了。
新建 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
首先安装 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 # 全局安装stylusnpm 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'