Grunt 新手指南

导言

做为一个正在准备从java 后端转大前端,一直都有想着,在js 的世界里面有没有相似于maven或者gradle 的东西..而后,就找到了grunt 这玩意

Grunt是用来干什么的

诸如ant,maven,gradle,make 之流的,那么咱们为何要学这么一个工具了,咱们用IDE编程不是好好的吗,要让人去学这么一个工具,那么必然要有这个工具可以为咱们搞定什么的缘由.

选择Grunt缘由

1. 管理咱们的文件依赖
2. 为所欲为的批处理任务
3. 整合经常使用的前端工具,js混淆,文件合并压缩.

说了这么多,上面就是咱们为何要选择grunt.js 做为咱们项目构建的工具,若是你没有任何项目构建的概念,我建议了就不要看有关grunt的任何资料了,包括本文.由于,你看不懂我接下来我要写东西,也看不懂任何有关grunt相关资料,因此,就不要浪费时间了.

让Grunt 干活

若是,你以前有接触过构建工具,或者你如今有项目构建的概念,那么任务(tasks)这个概念想必理解起来不会有太大的难度了.

建立咱们第一个任务

只要在咱们的Gruntfile.js 文件写上这么几句

module.exports = function (grunt) {
    grunt.registerTask('test', 'my first tasks', function () {
        grunt.log.write('Hello World!').ok();
    });
}

接着咱们只要在当前目录运行 grunt test

就能看到控制台输出

Hello World.

接下来我们有个node 环境就能够想干吗的就干吗了..停住!若是只是这样,这跟咱们写个shell脚本有什么区别呢?实际上grunt跟shell 脚本没什么区别,只是grunt有一个node 运行环境,能够比写shell脚本简单那么一些,若是你已是shell脚本达人,我以为没有再学grunt必要了.

任务的任务

有时候,咱们有不少任务,不过这里任务,均可以归类为一中,咱们就须要注册一个多任务来处理这种状况,例如,文件的操做就有,建立,打开,重命名,这些任务均可以归类为文件操做任务

module.exports = function (grunt) {
  grunt.initConfig({
    file: {
      create: 'source file',
      open: 'open file',
      delete: 'delete file'
    }
});
  grunt.registerMultiTask('file', 'Log stuff.', function () {
    grunt.log.writeln(this.target + ': ' + this.data);
  });
}

这个时候咱们运行的时候,就会看到以下接口

grunt file:create

create: ‘source file’

grunt file:open

open: ‘open file’

grunt file:delete

delete: ‘delete file’

那么在咱们自定义多任务的时候,能够经过this.target 得到当前任务命令,而后经过this.data 获取到咱们的配置值,接下来就是发挥你的想象力的时候了.

总结

实际上grunt不是什么神奇的时候,它最不过是一个运行在node的一个命令行工具,能够方便咱们用js写脚本而已.

插件推荐

1. grunt-contrib-watch
   • 监听文件修改
2. grunt-curl
   • 想curl 下载远程js
3. grunt-contrib-clean
   • 文件清理工具
4. grunt-contrib-cssmin
   • css压缩工具
5. grunt-contrib-copy
   • 文件复杂工具

generated by haroopad