关于使用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之类的，一块儿加油加油撒花🎉
这个是笔者本身写的小工具，欢迎你们打赏，窝爱大家～