一些比較小的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之類的，一起加油加油撒花??
這個是筆者自己寫的小工具，歡迎大家打賞，窩愛你們～

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