2020-10-27

最近项目需要使用grunt 压缩、混淆、打包js文件，并需要在内网运行。 内网无法使用npm install -g ***** 。

百度了一堆例子后，发现有一些坑，甚至有些博主故意挖坑，就是不给一个简单且能直接运行的demo。

写个小demo给新入坑的同行：

外网电脑上局部安装grunt-cli 等一堆东西,然后丢到内网中。

第一步：安装node，不多说；

第二步：拷贝pakage.json，npm install一下;

{
  "name": "demo",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "grunt": "~0.4.1",
    "grunt-babel": "^8.0.0",
    "grunt-cli": "^1.3.2",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-strip": "~0.2.1",
    "webpack": "^5.2.0"
  },
  "dependencies": {
    "express": "3.x",
    "grunt-babel": "^7.0.0"
  }
}

第三步:

创建Gruntfile.js，与package.js同级

module.exports = function(grunt) {  
    //配置参数  
  grunt.initConfig({  
      pkg: grunt.file.readJSON('package.json'),      
      watch: {
         js: {
          files:['src/**/*.js'],
          tasks:['default'],
          options: {livereload:false}
        },
        babel:{
            files:'src/**/*.js',
            tasks:['babel']
        }
      },
      jshint:{
          build:['src/**/*.js'],
          options:{
              jshintrc:'.jshintrc' //检测JS代码错误要根据此文件的设置规范进行检测，可以自己修改规则
          }
      }, 
      copy: {
        main: {
          expand: true,
          cwd: 'src',
          src: '**',
          dest: 'dist/',
        },
      },
      
      babel: {
          options: {
              sourceMap: false,
              presets: ['env']
              
          },
          dist: {
              files: [{
                 expand:true,
                 cwd:'dist/', //js目录下
                 src:['**/*.js'], //所有js文件
                 dest:'dist/'  //输出到此目录下
               }] 
          }
      },
      uglify: {  
          options: {
           mangle: true, //混淆变量名
           comments: 'false' //false（删除全部注释），some（保留@preserve @license @cc_on等注释）
          },
          build: {
            src: 'dest/capolBim.js',
            dest: 'dest/capolBim.min.js'
          }
      },
      concat: {
        options: {
          separator: ';'
        },
        dist: {
            src: ['dist/**/*.js'],
            dest: 'dest/capolBim.js'
        }
      },
  });  
    
    //载入uglify插件，压缩js 
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-babel');
    //grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify'); 
    grunt.loadNpmTasks('grunt-contrib-concat'); 
    grunt.loadNpmTasks('grunt-contrib-watch');
    //注册任务  
    grunt.registerTask('default', ['copy','babel','concat','uglify']);
    grunt.registerTask('watcher',['watch']);
  }  

第四步:

在package.json同目录下创建src文件夹,里面丢一些es6的js文件。

第五步：

在package.json同目录下创建grunt.bat文件,;名字也可以自己定

cd node_modules/.bin
grunt.cmd

第六步:

双击grunt.bat文件，或者命令行执行grunt。能看到创建了新的dist以及dest文件夹。dest文件夹下有压缩好的js文件。

然后就可以把这整个文件夹打包发到内网中。打包压缩我们的项目了。

demo成功运行后，就可以在这个基础上，丰满一下功能。