项目css兼容性处理以及js文件es6转es5_css grid兼容 babel处理-优快云博客

css兼容性处理使用插件babel-cli
js转码使用插件grunt-autoprefixer
使用js插件安装
npm install babel-cli -g
npm install babel-preset-es2015 --save-dev
使用css转码插件安装
npm install grunt --save-dev
npm install -g grunt-cli
npm install grunt-autoprefixer --save-dev
如果需要配置监听安装：
npm install grunt-contrib-watch --save-dev

package.json文件如下：

{
  "name": "es6",
  "version": "1.0.0",
  "description": "es6转es5",
  "main": "index.js",
  "scripts": {
    "build": "babel source --out-dir dist",  //js转码入口文件夹和输出文件夹配置
    "css": "grunt autoprefixer"
  },
  "author": "zhulei",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "grunt": "^1.4.1",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-contrib-watch": "^1.1.0"
  }
}

js转换babel插件的使用
创建.babelrc文件，配置如下：

{
    "presets": [
        "es2015"
    ],
    "plugins": []
}

执行npm run build就可以把source里面的js文件转换到dist文件夹

css转换grunt-autoprefixer插件的使用
创建Gruntfile.js文件，配置如下：

module.exports = function (grunt) {
    grunt.initConfig({
        autoprefixer: {
            options: {
                browsers: ['last 10 Chrome versions', "> 1%", 'last 5 Firefox versions', 'Safari >= 6', 'ie >= 8']
              },
              mutiple_files: {
                expand: true,
                flatten: true,//是否取代原先文件名
                src: 'source/*.css',  // 需要转换的文件/文件夹
                dest: 'dist/css' //目标文件
            }
        }
    });
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

执行npm run css就可以把source文件夹下的所有css文件转码到dist下的css文件夹下