移动端页面适配-自适应最新方案直接写px--------通过gulp工作流搭建一体化的移动

1.开始

在flexible的GitHub上面写着

由于

viewport

单位得到众多浏览器的兼容，

lib-flexible

这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用

viewport

来替代此方案。

vw

的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》一文。

vw：是Viewport's width的简写,1vw等于window.innerWidth的1%

100vw = 750px | 即1vw = 7.5px

2.代码

var gulp = require('gulp');var jshint = require('gulp-jshint'); // 引入检测js文件模块var uglify = require('gulp-uglify'); // 引入js压缩模块var concat = require('gulp-concat'); // 引入合并文件模块var minhtml = require('gulp-minify-html'); // 引入html压缩模块var minify = require('gulp-minify-css'); // 引入压缩css的模块var imagemin = require('gulp-imagemin'); // 引入压缩图片插件var postcss = require('gulp-postcss'); //JavaScript 代码来转换CSS 中的样式var autoprefixer = require('autoprefixer'); //自动加上浏览器前缀var postcsswritesvg = require('postcss-write-svg') // 解决1px方案// UI设计稿750px宽，那么100vw = 750px，即1vw = 7.5pxvar pxtoviewport = require('postcss-px-to-viewport'); // 代码中写px编译后转化成vmvar browserSync = require('browser-sync')var opn = require('opn')//静态服务器// 1.处理js文件gulp.task('js', function () {return gulp.src('js/*.js').pipe(jshint()) //检测js.pipe(uglify()) //压缩js.pipe(concat('index.js')) //合并js文件并命名为'index.js'.pipe(gulp.dest('build/js')); //将合并后的js文件输出到build文件夹下});// 2.处理cssgulp.task('css', function () {var processors = [pxtoviewport({viewportWidth: 750,viewportHeight: 1334,unitPrecision: 5,viewportUnit: 'vw',selectorBlackList: [],minPixelValue: 1,mediaQuery: false})];return gulp.src('css/*.css') // 指定css文件夹下的所有后缀为.css的文件.pipe(postcss([ autoprefixer() ])) //自动加上浏览器前缀.pipe(postcss(processors))//.pipe(minify()) //使用minify模块进行css 压缩.pipe(gulp.dest('build/css')) // 最终将压缩的文件输出到minicss文件下 })// 3.压缩imggulp.task('img', function () {gulp.src('images/*.{png,jpg,gif,ico}').pipe(imagemin({progressive: true, //Boolean类型 默认:false 无损压缩图片optimizationLevel: 5, //number类型 默认:3 取值范围:0-7(优化等级)interlced: true, //Boolean类型 默认false 隔行扫描gif进行渲染multipass: true //Boolean类型 默认false 多次优化svg直到完全优化})).pipe(gulp.dest('build/images')) //输入到build文件夹下的images文件夹下 })// 4.压缩htmlgulp.task('html', function () {gulp.src('*.html') //指定当前文件夹下的所有html文件.pipe(minhtml()) //进行压缩.pipe(gulp.dest('build')) //将压缩后的文件输出到build文件夹下.pipe(browserSync.stream()); //自动打开浏览器})// 定义pathvar path = {css: './css/*.css',js: './js/*.js',html: './*.html',src: './build' };// 命令行输入gulp或者 gulp default的时候就会执行gulp.task('default', function(){//把任务串联起来gulp.start('js', 'css', 'img', 'html');//打开静态服务器browserSync.init({server:{baseDir: path.src},port:3000,open:false}, function(){var homepage = 'http://localhost:3000/';opn(homepage);});//监听文件的变化实时编译 然后刷新gulp.watch([path.html, path.js, path.css]).on("change", function() {gulp.start('js', 'css', 'img', 'html'); browserSync.reload();});});

3.效果

4.github项目源代码

/zhalice/gulp-postcss

附:vm布局及使用的图片参考自大漠老师的博文: 《再聊移动端页面的适配》

移动端页面适配-自适应最新方案直接写px--------通过gulp工作流搭建一体化的移动端开发环境