grunt里集成babel-grunt

最新推荐文章于 2024-09-09 09:51:29 发布

原创最新推荐文章于 2024-09-09 09:51:29 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#grunt

grunt 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用Grunt进行自动化构建的实际案例，包括如何利用Grunt进行ES6转ES5、Less转CSS，并进行代码压缩等工作流程。文章还解决了在构建过程中遇到的jshint代码检查问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近这俩天在写个测试项目，使用grunt来进行转义和压缩。

首先需要执行下

cnpm install grunt-babel --save-dev

就是通过es6来写js，通过less来写样式，但发布调用却不能直接调用es6的js和less，而是通过babel-grunt将es6转成es5，通过lessc将less文件转成css，然后再压缩成压缩文件供html界面调用。
grunt的配置文件内容如下

module.exports = function (grunt) {

    var sassStyle = 'expanded';

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        babel: {
            options: {
                sourceMap: false,
                presets: ['babel-preset-es2015']
            },
            dist: {
                files: [{
                    expand: true,
                    cwd: './goingOA/login/js/', //js目录下
                    src: ['**/Login.js'], //所有js文件
                    dest: './dest/'  //输出到此目录下
                }]
            }
        },
        less:{
            page: {
                options: {
                    //配置项
                    compress: true  //CSS 压缩
                },
                files: {
                    //目标文件，将 page.less 文件编译压缩后，生成 page.css 文件
                    './goingOA/login/css/Login.css' : './goingOA/login/less/Login.less'
                }
            }
        },
        concat: {
            options: {
                separator: '',
                stripBanners: true
            },
            dist: {
                src: ['./dest/Login.js'],
                dest: './dest/LoginTemp.js'
            },
        },
        uglify: {
            compressjs: {
                files: {
                    './goingOA/login/js/Login.min.js': ['./dest/LoginTemp.js']
                }
            }
        },
        jshint: {
            all: ['./dest/LoginTemp.js'],
            options: {
                globals: {
                    document: false,
                    window: false
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-babel');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.registerTask('lessDev', ['less']);
    grunt.registerTask('default', ['babel']);
    grunt.registerTask('outputcss', ['sass']);
    grunt.registerTask('concatjs', ['concat']);
    grunt.registerTask('compressjs', ['babel', 'concat', 'jshint', 'uglify','less:page']);
    grunt.registerTask('default');

};

以为一切ok，执行时，始终在jshint代码检查的地方过不去，错误内容如下：

Running "jshint:all" (jshint) task

   ./dest/LoginTemp.js
      1 |"use strict";
         ^ Use the function form of "use strict".
     13 |var vueObj = new Vue({
                          ^ 'Vue' is not defined.
     17 |        loginBtnLabel: i18nMap.get("loginBtnLabel"), //登登录录按按钮钮的的label
                                ^ 'i18nMap' is not defined.
     18 |        findPswLabel: i18nMap.get("findPswLabel"), //找找回回密密码码的的label
                               ^ 'i18nMap' is not defined.
     19 |        i18nSelLabel: i18nMap.get("i18nSelLabel"), //选选则则语语言言的的label
                               ^ 'i18nMap' is not defined.
     20 |        loginInfo: i18nMap.get("loginInfo"), //信信息息展展示示的的label
                            ^ 'i18nMap' is not defined.
     32 |                var curTime = setTimeout(function () {
                                       ^ 'setTimeout' is not defined.

打开代码发现就是js头上多了"use strict"造成的。

然后就是到处找度娘，最终才搞定，就是在.babelrc文件中需要添加一个插件。
修改前

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

修改后

{
  presets: [
      [ "es2015", { "modules": false } ]
  ],
  "plugins": ["transform-remove-strict-mode"]
}

注明了插件当然要安装插件咯

cnpm install babel-plugin-transform-remove-strict-mode

这下就ok了，大功告成。