スタイラス プラグイン開発チュートリアル_html/css_WEB-ITnose

Stylus の能力により、SCSS LESS の柔軟な書き込み方法をサポートしており、SCSS のように Ruby をインストールする必要はありません。特に有名なツールではありません。しかし、小さなサークルでは非常に人気があります。私が現在使用しているその機能について詳しく説明する必要はありません。私は最近、px から rem への変換を容易にするために Stylus に基づいたプラグインを作成しました。ソースコードはここにあります stylus-px2rem

準備

ここで、ノードをインストールし、ファイルを作成する必要があります。これが私のファイルディレクトリです。プラグイン 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 を使用してパッケージを生成できます。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 の使用方法では、styl ファイルを見つけるために js ファイルが必要です。 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 ディレクトリに置きます。これにより、保管しやすくなります。このスタイル処理ツールを導入したときとまったく同じ名前です。また、stylus-px2rem.styl ファイルを作成する必要もあります。実際、これはソフト リンクに似ており、ルート ディレクトリに配置されるindex.styl ファイルと同じです。

index.styl のクラスの内容は、lib フォルダー内の stylus-px2rem.styl ファイルをインポートします。

@import 'lib/stylus-px2rem.styl'

stylus-px2rem.styl のクラスの内容は、CSS をインポートします。スタイルファイルを処理したいとします。

@import 'stylus-px2rem/mixins'@import 'stylus-px2rem/font-size'//...

ファイルを作成したら、stylus-px2rem ツールを簡単に使用できます。

開発とデバッグ

stylus-px2rem ルート ディレクトリで npm リンクを実行し、このマシン上で stylus-px2rem のソフト リンクを作成します。stylus-px2rem ディレクトリを移動すると、次のようになります。ソフトリンクをやり直します。次の内容を出力すると、それをデバッグしてプロジェクトで使用できます。

/usr/local/lib/node_modules/stylus-px2rem -> ~/git/stylus-px2rem

使用する必要があるプロジェクトで npm link stylus-px2rem を実行するだけで、プロジェクト内でソフト リンクを再度作成するだけで、プロジェクト内でプラグインを編集してデバッグできます。 。

プロジェクトで使用します

Gulp で使用します

新しい gulpfile.js ファイルを作成し、スタイラスの 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 で

を使用します。スクリプトのビルド まず Stylus ツールをインストールし、次に stylus-px2rem をインストールします

$ npm install stylus --save

デバッグ プロセスをリリースしていない場合、またはリリースする予定がない場合は、必ず上記の手順をインストールして、グローバルソフトリンクは、使用しているプロジェクトに一度インストールするだけで済みます。

$ npm link stylus-px2rem

デバッグが必要ない場合は、stylus-px2rem を npmjs.org に直接公開し、次のコマンドを実行します。

$ npm install stylus-px2rem --save

次に、package.json にスクリプトを追加します。

{  "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"  }}

次に、上記のコマンド -u stylus-px2rem ツールで使用したため、styl ファイル内でそれを引用するだけです。 , そのため、単にindex.stylを注ぎ込むことができます。

@import 'stylus-px2rem'

先ほど lib/px2rem.js ファイルを追加したため、実際には @import によってインポートされたファイルは ~/git/stylus-px2rem/lib/stylus-px2rem.styl です。

プロジェクトに追加した後、コマンドを実行してコンパイルまたは自動コンパイルを監視できます。

# 监控文件实时编译CSS文件$ npm run watch# 直接编译生成CSS文件$ npm run build

最も使いやすい

スタイラス ツールがグローバルにインストールされていると仮定します

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

スタイルは次のように stylus-px2rem 処理ファイルを参照できます

@import 'node_modules/stylus-px2rem/lib/stylus-px2rem'

それらも 1 つずつ参照してください

@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'