https://github.com/anthinkingcoder/gulp-viewport-units
Automatically append content property for viewport-units-buggyfill
https://github.com/anthinkingcoder/gulp-viewport-units
Last synced: about 1 month ago
JSON representation
Automatically append content property for viewport-units-buggyfill
- Host: GitHub
- URL: https://github.com/anthinkingcoder/gulp-viewport-units
- Owner: anthinkingcoder
- License: mit
- Created: 2018-07-17T09:47:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-18T08:41:05.000Z (over 7 years ago)
- Last Synced: 2025-03-31T14:45:45.762Z (8 months ago)
- Language: JavaScript
- Size: 149 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-viewport-units
A gulp plugin, Automatically append content property for viewport-units-buggyfill.See [viewport-units-buggyfill](https://github.com/rodneyrehm/viewport-units-buggyfill)
# Install
```
npm install gulp-viewport-units --save-dev
```
# Basic Usage
```javascript
'use strict';
const gulp = require('gulp');
const viewportUnits = require('gulp-viewport-units')
gulp.task('css', function () {
gulp.src('./css/**/*.css')
.pipe(viewportUnits())
.pipe(gulp.dest('./css/dist'));
});
```
if only progress calc
```javascript
gulp.task('css', function () {
gulp.src('./css/**/*.css')
.pipe(viewportUnits({onlyCalc:true}))
.pipe(gulp.dest('./css/dist'));
});
```
You can choose to deal with the specified viewport units
```javascript
gulp.task('css', function () {
gulp.src('./css/**/*.css')
.pipe(viewportUnits({viewportUnits:['vw']}))
.pipe(gulp.dest('./css/dist'));
});
```
You can filter out selectors that do not need to be processed,like blacklist.
```javascript
gulp.task('css', function () {
gulp.src('./css/**/*.css')
.pipe(viewportUnits({selectorBlackList:['.notSelector']}))
.pipe(gulp.dest('./css/dist'));
});
```
examples:
```css
/*before transform*/
.notSelector {
width: 20vw;
}
.demo,.demo1 .notSelector{
background-color: red;
margin: 10vw;
}
.notSelector .demo1 {
padding: 10vw;
}
/*after transform*/
.notSelector {
width: 20vw;
}
.demo, .demo1 .notSelector {
background-color: red;
margin: 10vw;
}
.demo {
content: "viewport-units-buggyfill;margin:10vw";
}
.notSelector .demo1 {
padding: 10vw;
content: "viewport-units-buggyfill;padding:10vw";
}
```
## options
```javascript
var defalutOptions = {
onlyCalc: false, //if true,only progress calc()
viewportUnits: ['vw', 'vh', 'vmax', 'vmin'], //viewport units array what viewport units can be progress
selectorBlackList: [] //An Selector array that will not be processed
}
```