使用grunt0.4进行js代码混淆

1.grunt是基于node，node需要>=0.8.0的稳定版本(奇数是开发版，偶数是稳定版)

2.安装grunt脚手架（mac电脑需要权限在前面加上 sudo）

npm install -g grunt-cli

验证grunt-cli是否安装成功

　　这样的情况表示安装成功了！

3.在根目录下创建Gruntfile.js 文件，文件内容如下

    module.exports = function(grunt) {
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            concat: {
                options: {
                    separator: ';'
                },
                dist: {
                    src: ['src/**/*.js'],
                    dest: 'dist/<%= pkg.name %>.js'
                }
            },
            uglify: {
                options: {
                    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
                },
                buildall: {
                    options: {
                        mangle: true,
                        compress: {
                            drop_console: true
                        },
                        report: "min" //输出压缩率,可选值有false(不输出)
                    },
                    files: [{
                        expand: true,
                        cwd: 'src', //js目录下
                        src: '**/*.js', //所有js文件
                        ext: '.min.js', //压缩后的文件后缀名称
                        dest: 'dist' //输出到此目录下
                    }]
                }
                //    dist: {
                //      files: {
                //        'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
                //      }
                //    }
            },
            qunit: {
                files: ['test/**/*.html']
            },
            jshint: {
                files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
                options: {
                    //这里是覆盖JSHint默认配置的选项
                    globals: {
                        jQuery: true,
                        console: true,
                        module: true,
                        document: true
                    }
                }
            },
            watch: {
                // files: ['<%= jshint.files %>'],
                // tasks: ['jshint', 'qunit']
                scripts: {
                    files: ['src/**/*.js'],
                    tasks: ['minall'],
                    options: {
                        spawn: true,
                        interrupt: true
                    }
                }
            }
        });
        grunt.loadNpmTasks('grunt-contrib-uglify');
        // grunt.loadNpmTasks('grunt-contrib-jshint');
        // grunt.loadNpmTasks('grunt-contrib-qunit');
        // grunt.loadNpmTasks('grunt-contrib-watch');
        // grunt.loadNpmTasks('grunt-contrib-concat');

        grunt.registerTask('minall', ['uglify:buildall']);
        grunt.registerTask('default', ['jshint', 'qunit', 'uglify', 'concat']);

    };

4.安装依赖

　　通过npm init创建package.json文件(有了就忽略)，并写入json文件(按照顺序安装)

　　npm install grunt --save-dev

　　npm install grunt-contrib-uglify --save-dev

　　npm install grunt-contrib-qunit --save-dev

　　npm install grunt-contrib-concat --save-dev

　　npm install grunt-contrib-jshint --save-dev

　　npm install grunt-contrib-watch --save-dev

5.运行grunt uglify

-------------------------假装是个分割线----------------

我以为到这里就是已经结束了，然而并不是，如果用到了ES6的语法的js文件混淆的时候可(肯)能(定)会报错

uglify默认的配置貌似不支持ES6的语法，

所以吧。。。

使用grunt0.4进行js代码混淆

猜你喜欢