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'

關注公衆號