grunt的使用

ゝ一纸荒年。 2022-06-11 08:40 175阅读 0赞

使用grunt来压缩js代码，这可是前台开发必须的利器啊。  
第一步 安装grunt-cli，该文件安装到全局的：

cnpm install -g grunt-cli

第二步安装grunt以及相关的插件

cnpm install grunt --save-dev

安装相关插件

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

第三步：在跟目录下添加Gruntfile.js

文件的目录结构如下：  
![这里写图片描述][SouthEast]

Gruntfile.js文件内容如下：

module.exports = function(grunt) { 
    
        var sassStyle = 'expanded';
    
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
            concat: {
                options: {
                    separator: '',
                },
                dist: {
                    src: ['./src/goingUtils.js'],
                    dest: './goingUtils.js'
                },
            },
            uglify: {
                compressjs: {
                    files: {
                        './goingUtils.min.js': ['./goingUtils.js']
                    }
                }
            },
            jshint: {
                all: ['./goingUtils.js']
            }
        });
    
        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-jshint');
        grunt.loadNpmTasks('grunt-contrib-uglify');
    
        grunt.registerTask('outputcss',['sass']);
        grunt.registerTask('concatjs',['concat']);
        grunt.registerTask('compressjs',['concat','jshint','uglify']);
        grunt.registerTask('default');
    
    };

里面的细节就不讲解咯，我刚开始执行是报错误的,缺少了相关的依赖，我把下面的命令执行了一遍就ok了

cnpm install grunt-karma karma karma-phantomjs-launcher karma-jasmine jasmine-core phantomjs-prebuilt --save-dev

执行该命令来进行压缩、代码检查操作

grunt compressjs

压缩的效果：  
![这里写图片描述][SouthEast 1]

网上找了个比较全的grunt.js文件内容，供后期查看：

module.exports = function(grunt) {
    
      var sassStyle = 'expanded';
    
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
          output : {
            options: {
              style: sassStyle
            },
            files: {
              './style.css': './scss/style.scss'
            }
          }
        },
        concat: {
          dist: {
            src: ['./src/plugin.js', './src/plugin2.js'],
            dest: './global.js',
          },
        },
        uglify: {
          compressjs: {
            files: {
              './global.min.js': ['./global.js']
            }
          }
        },
        jshint: {
          all: ['./global.js']
        },
        watch: {
          scripts: {
            files: ['./src/plugin.js','./src/plugin2.js'],
            tasks: ['concat','jshint','uglify']
          },
          sass: {
            files: ['./scss/style.scss'],
            tasks: ['sass']
          },
          livereload: {
              options: {
                  livereload: '<%= connect.options.livereload %>'
              },
              files: [
                  'index.html',
                  'style.css',
                  'js/global.min.js'
              ]
          }
        },
        connect: {
          options: {
              port: 9000,
              open: true,
              livereload: 35729,
              // Change this to '0.0.0.0' to access the server from outside
              hostname: 'localhost'
          },
          server: {
            options: {
              port: 9001,
              base: './'
            }
          }
        }
      });
    
      grunt.loadNpmTasks('grunt-contrib-sass');
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-contrib-connect');
    
      grunt.registerTask('outputcss',['sass']);
      grunt.registerTask('concatjs',['concat']);
      grunt.registerTask('compressjs',['concat','jshint','uglify']);
      grunt.registerTask('watchit',['sass','concat','jshint','uglify','connect','watch']);
      grunt.registerTask('default');
    
    };

[SouthEast]: /images/20220611/3461769bf7e046a4aa2821a8ab56a0fe.png
[SouthEast 1]: /images/20220611/82bd0a5ac6434a08b51a419e56a2bb9f.png