关于使用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之类的，一起加油加油撒花