2018移動端頁面適配-自適應最新方案直接寫px--------通過gulp工作流搭建一體化的移動端開發環境

1.開始

在flexible的GitHub上面寫著

由於viewport單位得到眾多瀏覽器的相容，lib-flexible這個過渡方案已經可以放棄使用，不管是現在的版本還是以前的版本，都存有一定的問題。建議大家開始使用viewport來替代此方案。vw的相容方案可以參閱《如何在Vue專案中使用vw實現移動端適配》一文。

1. vm是什麼? ---

vw：是Viewport's width的簡寫,1vw等於window.innerWidth的1%

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佈局及使用的圖片參考自大漠老師的博文: 《再聊移動端頁面的適配》