gulp 加css前綴

  • 先下載node.js
  • 而後經過npm下載插件

  利用cmd找到根目錄  //如 f:[回車] cd webbg[回車]css

  而後npm init  //建立的一個工程目錄node

    npm install -g bower  //下載bowerweb

    npm i -g gulp     //下載gulpnpm

    npm i pump      //下載pumpgulp

    npm i gule-autoprefixer  //下載gule-autoprefixer插件 用於給css加前綴網站

  • 編寫gulpfile.js,用於gulp調用,完成css前綴的自動添加  

    var gulp=require('gulp');      //調用gulp軟件,理解爲網站後期自動化處理軟件
    var pump=require('pump');    //調用pump軟件,理解爲管道,隊列?一種容器?
    var prefixer=require('gulp-autoprefixer');  調用gulp-autoprefixer插件,爲自動化處理css前綴的.ui

    gulp.task('prefixer',function(cb){      //作一個gulp的任務
      pump([               //添加任務到管道,排隊
        gulp.src('./styles/*.css'),      //這是查找css的路徑
        prefixer({            //這是自動處理的參數
          borwsers:["last 2 versions"],    //針對遊覽器
          remove:true           
        }),gulp.dest('./web/test')      //這是輸出css的路徑,若是該文件夾沒有,那就自動建立
      ],cb)                ////cb跟蹤的參數,監控用的.
    })插件

  • gulp prefixer 調用

     在cmd根文件下輸入 gulp prefixer.  //這裏的prefixer  gulp.task('prefixer',function(cb){} 中的對應,且能夠隨意命名.隊列

相關文章
相關標籤/搜索