Stylus外掛開發教程

小弟調調™發表於2016-09-18

由於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'複製程式碼

相關文章