[grunt] grunt 配置babel es6转码

╰半橙微兮° 2022-06-04 04:27 360阅读 0赞

我们的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' } } }