gulp自动编译为css的vw单位

通过屡次测试与思考，在webpack与gulp之间的选型，因项目而决定，

不该该盲目使用，好比一个多页面应用，若是使用webpack会发现

webpack.config.js里的代码很难编写，但在gulp就不同，由于gulp

使用的流的形式，也能够说是任务的形式，一个任务只会对一个目标

路径下的文件进行编译，不存在什么入口文件与出口文件的一说，因此

实现起来很简单，而通过一段网上查询，也发现网上不多那种webpack

编译多页面的例子，因此这就体现了，wenpack最适合单页面的应用使用，

而gulp就能够说对多页面比较适合，而单页面也适合，只是如今脚手架的

盛行，因此webpack在这方面颇有优点，不是本身手写一个webpack配置

是要学习比较高的成本的，而在这方面，gulp就不同，它简单不少，只是

性能上可能没有webpack那么好，并且webpack社区也很强大。

 

若是没有什么特殊，并且是多页面，选gulp是最好的，而若是是单页面那么webpack必定

是首选。

 

postcss 实现px转vw；

资料连接

如今rem对适配方面没有vw好，并且还原设计稿使用vw单位也是不错的。

gulpfile.js

var gulp = require("gulp");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var pxtoviewport = require('postcss-px-to-viewport');

gulp.task('styles',function(){

    //pxtoviewport配置，viewportWidth与viewportHeight为设计稿的宽高
    //这样就能够直接使用设计稿的宽高直接开发项目而不须要本身计算一遍
    var processors = pxtoviewport({
          viewportWidth: 375,
          viewportHeight: 667,
          viewportUnit: 'vw'
        });

    return gulp.src('src/*.css')
            .pipe(postcss([autoprefixer,processors]))
            .pipe(gulp.dest('dest/'));
});


gulp.task('default',['styles']);

//监听文件变化，自动编译
var watcher = gulp.watch('src/*.css',['default']);

watcher.on('change',function(ev){
    console.log("File:"+ev.path+" was "+ev.type+" ,running tasks...");
});

{
  "name": "postcss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.3.0",
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.1",
    "postcss-px-to-viewport": "^0.0.3"
  }
}