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"
  }
}