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