關於使用vw單位適配H5項目（二）

一些比較小的H5頁面，我以爲全沒有必要必定要使用框架的，好比vue和react之類的，我以爲原生的js,html5也能夠寫好移動端。
最近恰好要趕10多個h5頁面，適配移動端的，各類手機型號都要適配，筆者想起了本身的之前寫過的一個轉換小工具,
你們能夠看以前個人文章和我一塊兒使用postcss+gulp進行vw單位的移動端的適配
老實說，筆者根據以前的記錄，根本就沒有還原出小工具，實在是汗顏。不過，在筆者實在沒法精確還原工具以後，筆者找到了以前練習的demo.
筆者一會兒就搞定了。
先給你們看下項目的目錄：

筆者吃虧就是吃虧在項目目錄最後還原的時候沒有對應上。
通常的話，對於工程化的項目其實知道了package.json文件，整個項目的核心其實已經出來了。

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-cssnano": "^2.1.3",
    "gulp-postcss": "^7.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "postcss-assets": "^5.0.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-px-to-viewport": "^0.0.3",
    "postcss-short": "^4.1.0",
    "postcss-short-color": "^3.0.0",
    "postcss-viewport-units": "^0.1.6",
    "postcss-write-svg": "github:jonathantneal/postcss-write-svg"
  },
  "dependencies": {
    "autoprefixer": "^9.4.10",
    "postcss-aspect-ratio-mini": "^0.0.2"
  }
}

var gulp=require('gulp');
var postcss=require('gulp-postcss');
var sass=require('gulp-sass');
var shortColor = require('postcss-short-color');
var autoprefixer = require('autoprefixer');
var cssnext = require('postcss-cssnext');
var shortcss = require('postcss-short');
var pxtoviewport = require('postcss-px-to-viewport');
var sourcemaps=require('gulp-sourcemaps');
var rename=require('gulp-rename');
var cssnano=require('gulp-cssnano');
gulp.task('css',function(){
    var processors=[
        require('postcss-short-color'),
        shortcss,
        cssnext,
        autoprefixer({browsers: ['> 1%'], cascade: false}),
         pxtoviewport({
            viewportWidth: 750, // 視窗的寬度，對應的是咱們設計稿的寬度，通常是750 
            //viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，通常指定1334，也能夠不配置 
            unitPrecision: 3, // 指定`px`轉換爲視窗單位值的小數位數（不少時候沒法整除）
            viewportUnit: 'vw', // 指定須要轉換成的視窗單位，建議使用vw 
            selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉換爲視窗單位的類，能夠自定義，能夠無限添加,建議定義一至兩個通用的類名 
            minPixelValue: 1, // 小於或等於`1px`不轉換爲視窗單位，你也能夠設置爲你想要的值 
            mediaQuery: false // 容許在媒體查詢中轉換`px`著做權歸做者全部。
        }),
        require('postcss-write-svg'),
        require('postcss-aspect-ratio-mini'),
        require('postcss-viewport-units'),
    ];
    return gulp.src('./src/css/*.scss').pipe(sass().on('error',sass.logError))
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});
 gulp.task('rename',['css'],function(){
    return gulp.src('dest/style.css')
            .pipe(postcss([cssnano]))
            .pipe(rename('style.min.css'))
            .pipe(sourcemaps.init())
            .pipe(sourcemaps.write('maps/'))
            .pipe(gulp.dest('./dest'))
    });
gulp.task('default',['css','rename']);
// 監聽功能
var watcher=gulp.watch('src/*.css',['default']);
watcher.on('change',function(event){
    console.log('File'+event.path+'was'+event.type+',running tasking ...');
});

我稍微把項目運行了一下

完整項目的地址
https://github.com/JserJser/dailyPush/blob/master/daily5/toolsForH5.rar
其實你們分析個人項目就會發現，就是一個很簡單很普通可是確實很方便的h5適配方法
你們運行過程當中什麼插件沒有安裝上去你們就安裝，有問題就刪nodejs包，這個是個出淺的存在不少問題可是能夠解決問題的小工具
你們能夠放心使用的，以前有使用這個，項目成功上線過的
這個工具我打算好好作起來了，這個是初版本，但願時時努力，別拋棄別放棄,後續會添加 webpack之類的，一塊兒加油加油撒花🎉
這個是筆者本身寫的小工具，歡迎你們打賞，窩愛大家～