2018移动端页面适配最新方案直接写px-通过gulp搭建一体化的移动端开发环境
2018-02-07 18:38
615 查看
1.开始
在flexible的GitHub上面写着由于
viewport单位得到众多浏览器的兼容,
lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用
viewport来替代此方案。
vw的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》一文。
vm是什么? —
vw:是Viewport’s width的简写,1vw等于window.innerWidth的1%
UI给的设计稿,一般都是宽为750px的,那么就是
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.5px var pxtoviewport = require('postcss-px-to-viewport'); // 代码中写px编译后转化成vm var 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.处理css gulp.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.压缩img gulp.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.压缩html gulp.task('html', function () { gulp.src('*.html') //指定当前文件夹下的所有html文件 .pipe(minhtml()) //进行压缩 .pipe(gulp.dest('build')) //将压缩后的文件输出到build文件夹下 .pipe(browserSync.stream()); //自动打开浏览器 }) // 定义path var 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源代码
https://github.com/zhalice2011/gulp-postcss附:vm布局及使用的图片参考自大漠老师的博文:
《再聊移动端页面的适配》
相关文章推荐
- 利用Gulp搭建最新版React.js16.0版本开发环境
- [010]移动web页面开发适配基础环境搭建
- 最新Android 4.x 搭建开发环境
- 最新基于adt-bundle-windows-x86的android开发环境搭建
- Android中间件开发----Windows下Android环境搭建(最新最方便)
- 最新基于adt-bundle-windows-x86的android开发环境搭建
- mini6410基于linux2.6.36内核通过NFS启动根文件系统总结(一搭建开发环境——建立tftp服务器)
- Android SDK 2.3与Eclipse最新版开发环境搭建(五)
- Android SDK 2.3与Eclipse最新版开发环境搭建
- 最新android开发环境搭建
- android开发环境搭建最新方法
- 最新Android 4.x 搭建开发环境
- 移动端页面通过js自动适配
- Android开发实战一之搭建开发环境(最新版本)
- 手把手教你搭建智能合约测试环境、开发、编译、部署以及如何通过JS调用合约方法
- Android SDK 2.3与Eclipse最新版开发环境搭建(四)
- 直接通过User Control生成HTML-asp.net页面的换皮肤方案
- React多页面应用1(webpack开发环境搭建,包括Babel、热更新等)