grunt常用插件具体用法（中）

最新推荐文章于 2020-05-31 19:00:27 发布

Luffy_ying

最新推荐文章于 2020-05-31 19:00:27 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Luffy_ying/article/details/52215499

本文介绍了Grunt中五个常用插件的配置与使用方法，包括Sass编译、文件合并、文件复制、CSS压缩及文件监听等核心功能。

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

我们就常用的几个grunt插件来详细说明下：

1.grunt-contrib-sass

module.exports = function(grunt){
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.initConfig({
    sass:{
        dist:{
        option:{
          style:'expanded'
        },
        files:{
          'mycss/main.css':'mysass/a.scss',
          'mycss/b.css':'mysass/b.scss'
        }
      }
    }
  });
  grunt.registerTask('default',['sass']);
  
};

module.exports = function(grunt){
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.initConfig({
     sass:{
      css:{
        src:'mysass/a.scss',
        dest:'mycss/style.css'
      }
    }
    
  });
  grunt.registerTask('default',['sass']);
};

 sass:{
      dist:{
        files:[{
          expand:true,
          cwd:'mysass/',
          src:'*.scss',
          dest:'mycss',
          ext:'.css'
        }]
      }
    }
  });

前面两段代码是两种写法，简单明了，后面的扩展功能是批量处理，当然了，运行的命令在此，grunt sass 或者grunt sass:css 或者还有其他任务grunt sass:test2......

2.grunt-contrib-concat

module.exports = function(grunt){
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.initConfig({
    concat:{
      css:{
        src:['mycss/b.css','mycss/style.css','mycss/main.css'],
        dest:'mycss/comm.css'
      }
    } 
  });
  grunt.registerTask('a',['concat']);
};

起到合并的作用

3grunt-contrib-copy

module.exports = function(grunt){
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.initConfig({
    copy:{
        html:{
         src:'html/index.html',
         dest:'dist/index.html'
      }
  }
  });
  grunt.registerTask('b',['copy']);
};

4 grunt-contrib-cssmin

module.exports = function(grunt){
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.initConfig({
     cssmin:{
     dist:{
      src:'mycss/a.css',
      dest:'mycss/am.css'
     }
   }
  grunt.registerTask('default','cssmin');
 
};

module.exports = function(grunt){
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.initConfig({
     cssmin:{
     target:{
      files:{
        'mycss/output.css':['mycss/a.css','mycss/b.css']
      }
     }
   }
  grunt.registerTask('default','cssmin');
 
};

 grunt.initConfig({
        cssmin: {
          target: {
            files: [{
              expand: true,
              cwd: 'release/css',
              src: ['*.css', '!*.min.css'],
              dest: 'release/css',
              ext: '.min.css'
            }]
  }

如上三种写法，最后面的一个是批量操作，用于压缩css文件。

5 grunt-contrib-watch

 copy:{
      html:{
        src: "dist/index.html",
        dest: "mycss/index.html"
      }
    },
    watch:{
       html:{
        files:'mycss/index.html',
        tasks:'copy',
        options:{
          liverload:true
        }
       }
    }

这个插件重要起到监听的作用，只要监听的事件发生变化，则对应的task所做的操作就将执行。

6 grunt-contrib-connect

 connect:{
      server:{
        options:{
          port:8000,
          base:'mycss/',
          liverload:true
        }
      }
    },
    copy:{
      html:{
        src: "dist/index.html",
        dest: "mycss/index.html"
      }
    },
    watch:{
       html:{
        files:'mycss/index.html',
        tasks:'copy',
        options:{
          liverload:true
        }
       }
    }

它主要配合其他插件一起使用，可以实现网页的实时刷新。