告别重复劳动之javascript任务运行器(三) - Grunt常用插件

自从用了GRUNT以后腰不疼了,腿不酸了,前端打包都自动化了,省去了不少的重复手工操作。GRUNT给人的感觉就是各种高端、牛逼、好使呀,下面我就来介绍一下GRUNT常用的一些插件grunt-contrib-unglify   用于javascript文件的压缩和合并的,在第一篇我们讲过grunt-contrib-concat   用于合并js代码,在第二篇讲过

grunt-contrib-jshint   用于检测文件中的js语法问题

jshint用来检查语法错误,比如分号的使用是否正确、有没有忘记写括号等等。它在grunt.initConfig方法里面的配置代码如下。


jshint: {
    options: {
        eqeqeq: true,
        trailing: true
    },
    files: ['Gruntfile.js', 'lib/**/*.js']
},

上面代码先指定jshint的检查项目,eqeqeq表示要用严格相等运算符取代相等运算符,trailing表示行尾不得有多余的空格。然后,指定files属性,表示检查目标是Gruntfile.js文件,以及lib目录的所有子目录下面的JavaScript文件。

grunt-contrib-copy   用于复制文件到你想要的文件夹处


copy: {
  main: {
    src: 'src/*',
    dest: 'dest/',
  },
},
 

上面代码将src子目录(只包含它下面的第一层文件和子目录),拷贝到dest子目录下面(即dest/src目录)。如果要更准确控制拷贝行为,比如只拷贝文件、不拷贝目录、不保持目录结构,可以写成下面这样:


copy: {
  main: {
    expand: true,
    cwd: 'src/',
    src: '**',
    dest: 'dest/',
    flatten: true,
    filter: 'isFile',
  },
},
 

grunt-contrib-clean  用于删除文件或目录的插件


clean: {  
  build: {  
    src: ["path/to/dir/one","path/to/dir/two"]  
  }  
}  
 

grunt-contrib-watch 用来在后台运行,监听指定事件,然后自动运行指定的任务。


watch: {
   scripts: {
    files: '**/*.js',
    tasks: 'jshint',
    options: {
      livereload: true,
    },
   },
   css: {
    files: '**/*.sass',
    tasks: ['sass'],
    options: {
      livereload: true,
    },
   },
},

grunt-contrib-cssmin  用于压缩CSS文件


  cssmin: {
      minify: {
        expand: true,
        cwd: 'css/',
        src: ['*.css', '!*.min.css'],
        dest: 'css/',
        ext: '.min.css'
      },
      combine: {
        files: {
          'css/out.min.css': ['css/part1.min.css', 'css/part2.min.css']
        }
      }
需要查询更多的grunt插件,请猛击这里,不过以上几款插件应该能解决大部分前端人员的打包问题

火龙果开发官方微信
更多干货!欢迎扫描上方二维码关注官方微信公众号(火龙果开发)
发表新评论