使用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

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

我以为到这里就是已经结束了，然而并不是，uglify默认的配置貌似不支持ES7的async语法，

所以吧。。。又用了bebel转了一次，感觉很麻烦,

1.安装babel-cli

npm install --save-dev babel-cli

2.presets 字段设定转码规则

npm install babel-preset-env --save-dev

npm install --save-dev babel-plugin-transform-runtime //对于es7 async的支持，否则会报错ReferenceError: regeneratorRuntime is not defined".

3.创建.bebalrec文件

{

  "presets": ["env"],

  "plugins": [[ 
  "transform-runtime", { 
　　　　"helpers": false,
　　　　"polyfill": false, 
　　　　"regenerator": true, 
　　　　"moduleName": "babel-runtime" 
　　} 
]]

4.package.json 中添加

"scripts": {

    "build": "babel src -d dist"      //src现在资源目录 。dist转换后的目录

  },

5.npm run build　　

巴特西

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

最新文章

热门文章