[grunt] grunt 配置babel es6轉碼

我們的project是test-web.
安裝

Step 1: 進入根目錄路徑

cd test-web

Step 2: 安裝 grunt

npm install –save-dev grunt

Step 3: 安裝 load-grunt-tasks

npm install –save-dev load-grunt-tasks

Step 4: 安裝 grunt-babel

npm install –save-dev grunt-babel

Step 5: 最後, 啓動

grunt

輸出結果應該是:

Running “babel:dist” (babel) task

Done, without errors.

將代碼轉化爲es6. 你的 gruntfile.js 應該是這樣的:

module.exports = function (grunt)
{
    require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks

    grunt.initConfig({
        "babel": {
            options: {
                sourceMap: true,
                presets: ['es2015']
            },
            dist: {
                files: {
                    "dist/app.js": "src/app.js"
                }
            }
        }
    });

    grunt.registerTask("default", ["babel"]);
};

在angularjs+express項目中，用grunt來將所有的前端js文件concat,壓縮，watch觀看所有的更新以方便開發。所以這裏我的思路是：

1. babel轉碼。` babel: {
   options: {
   sourceMap: false,
   presets: [‘babel-preset-es2015’]

          },
          dist: {
              files: [{
                 expand:true,
   
                 src:['app/js/**/*.js'], //所有js文件
                 dest:'build/'  //輸出到此目錄下
               }]
          }
      },
      `
   

2.將轉化爲es5的代碼concat/壓縮/watch：

concat: {
            options: {
                //separator: ';'
            },
            allInOne: { //所有JS文件全部合併成一份文件
                src: ['build/**/*.js'],//這時經過轉碼之後的js文件
                dest: 'app/javascript/<%= pkg.name %>.js'
            }
        },

        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            dist: {
              files: {
                'app/javascript/<%=pkg.name %>.min.js': ['<%= concat.allInOne.dest %>']
              }
            }
        },
        watch: {

            javascript: {
                files: ['app/js/**/*.js'],
                tasks: ['babel:dist','concat:allInOne', 'uglify:dist'],//這裏是每次js文件有改動的時候，grunt會自動做的工作，即轉碼，concat,壓縮
                options: {
                   livereload:true,

                    interrupt: true
                },
           babel:{
              files:'build/js/**/*.js',
              tasks:['babel']
              }
            },
            express: {
              files: ['main.js'],
              options: {
                spawn: false
              }
            }
        }

3.通過express進入主文件並啓動項目:

 express: {
          options: {

          },
          dev: {
            options: {
              script: 'main.js'
            }
          }
        }