Pages

▼

Thursday, 23 February 2017

Grunt.js 在前端项目中的实战

Grunt是一个基于JavaScript的任务运行工具。
为什么要使用Grunt，简而言之是为了“自动”，用工具自动完成压缩、编译、单元测试、拼写检查等重复性工作。
Grunt的社区壮大非常快，现在支持的模块有：CoffeeScript、 handlerbars、 jade、 JSHint、 Less、 RequireJS、 Sass、 stylus等。

Grunt基本配置

Grunt及其插件都是用npm管理的，npm是Node.js的包管理程序，所以在使用Grunt之前，你需要先安装NodeJS。

安装CLI

首先需要在全局环境中安装Grunt command line interface (CLI)，在Mac等系统中需要sudo来执行下面的命令：
    

  1. npm install -g grunt-cli
    2.
这会将grunt命令安装在系统path中，这样就可以从任何目录执行了。需要注意的是，安装了grunt-cli并没有安装任务管理工具。CLI的职责很简单，就是运行Gruntfile中定义的Grunt版本，这样你就可以在一台机器运行多个版本的Grunt。
如果从0.3版本升级，需要先卸载旧版：
    

  1. npm uninstall -g grunt
    2.

已存在Grunt的项目

对于已经使用了Grunt的项目，搭建本地环境是非常方便的，只需要切换到该项目目录，然后执行：
    

  1. npm install
    2.
再使用grunt命令运行Grunt即可。

新建Grunt项目

最基本的步骤就是给项目添加两个文件package.json和Gruntfile。
  • package.json：在这个文件里你可以列出项目所需的Grunt插件，npm会自动下载。
  • Grunfile：这个文件命名为Gruntfile.js或者Gruntfile.coffee，用来描述你所需要的grunt任务。

package.json

package.json文件需要放置在项目的根目录，和代码一起提交。运行npm install命令，会安装package.json中列出的依赖插件的正确版本。
创建package.json有以下几种办法：
  • 大部分grunt-init模板，会创建项目相关的package.json文件
  • npm init命令会创建基本的package.json文件
  • 也可以下面这个范本创建，更多用法可以看specification
    

  1. {
    2. 

  2.     "name": "my-project-name",
    3. 

  3.     "version": "0.1.0",
    4. 

  4.     "devDependencies": {
    5. 

  5.         "grunt": "~0.4.1",
    6. 

  6.         "grunt-contrib-jshint": "~0.6.0",
    7. 

  7.         "grunt-contrib-nodeunit": "~0.2.0",
    8. 

  8.         "grunt-contrib-uglify": "~0.2.2"
    9. 

  9.     }
    10. 

  10. }
    11.

安装Grunt和插件

对于已存在package.json文件的项目，最简单的安装方法就是npm install <module> --save-dev，例如：
    

  1. npm install grunt --save-dev
    2.
这个命令会安装最新版的grunt，并且把对这个插件的依赖写入package.json。很方便。

Gruntfile

和package.json文件一样，Gruntfile.js或者Gruntfile.coffee需要放在根目录下和源码一起提交。
Gruntfile由以下几个部分组成：
  • wrapper函数
  • 项目和任务配置
  • 加载Grunt插件和任务
  • 自定义任务

示例Gruntfile

在下面这个例子中，项目信息引自package.json，grunt-contrib-uglify插件的uglify任务用来压缩js文件，并且根据项目的metadata生成一条注释。当grunt运行时，uglify任务会默认执行。
    

  1. module.exports = function(grunt) {
    2. 

  2. 

    3. 

  3.   // Project configuration.
    4. 

  4.   grunt.initConfig({
    5. 

  5.     pkg: grunt.file.readJSON('package.json'),
    6. 

  6.     uglify: {
    7. 

  7.       options: {
    8. 

  8.         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    9. 

  9.       },
    10. 

  10.       build: {
    11. 

  11.         src: 'src/<%= pkg.name %>.js',
    12. 

  12.         dest: 'build/<%= pkg.name %>.min.js'
    13. 

  13.       }
    14. 

  14.     }
    15. 

  15.   });
    16. 

  16. 

    17. 

  17.   // Load the plugin that provides the "uglify" task.
    18. 

  18.   grunt.loadNpmTasks('grunt-contrib-uglify');
    19. 

  19. 

    20. 

  20.   // Default task(s).
    21. 

  21.   grunt.registerTask('default', ['uglify']);
    22. 

  22. 

    23. 

  23. };
    24.
这就是一个完整的Gruntfile，我们仔细研究下。

wrapper函数

每个Gruntfile（包括插件）使用这个默认的格式，你的所有的Grunt代码也必须写在这个函数中：
    

  1. module.export = function(grunt){
    2. 

  2.     //Do grunt-related things in here
    3. 

  3. };
    4.

项目和任务配置

大多Grunt的任务依赖于grunt.initConfig方法中定义的配置。
在这个例子中，Grunt通过grunt.file.readJSON('package.json')引入了package.json中定义的Grunt配置。因为<% %>模板变量可以引用任何配置，所以像文件路径、文件列表这些内容应该存储在变量中，以减少重复。
和其他任务一样，任务的配置需要和任务名字一样的变量，具体的参数可以查询各任务的文档。
    

  1. // Project configuration.
    2. 

  2. grunt.initConfig({
    3. 

  3.   pkg: grunt.file.readJSON('package.json'),
    4. 

  4.   uglify: {
    5. 

  5.     options: {
    6. 

  6.       banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    7. 

  7.     },
    8. 

  8.     build: {
    9. 

  9.       src: 'src/<%= pkg.name %>.js',
    10. 

  10.       dest: 'build/<%= pkg.name %>.min.js'
    11. 

  11.     }
    12. 

  12.   }
    13. 

  13. });
    14.

加载Grunt的插件和任务

很多常用的任务比如concatenation、 minification、 linting都有Grung插件。只要在package.json中声明，然后通过npm install安装，就可以在Gruntfile中配置使用了。
    

  1. // Load the plugin that provides the "uglify" task.
    2. 

  2. grunt.loadNpmTasks('grunt-contrib-uglify');
    3.
grunt --help可以查看所有可用的任务。

自定义任务

你可以配置让Grunt运行一个或多个默认任务。在例子中，运行grunt不带任何参数就会执行uglify任务。这和grunt uglify或者grunt default是一样的效果。数组的长度任意。
    

  1. // Default task(s).
    2. 

  2. grunt.registerTask('default', ['uglify']);
    3.
如果你需要的任务并没有插件提供，那么也可以自定义，自定义的任务可以不写任务配置
    

  1. module.exports = function(grunt) {
    2. 

  2. 

    3. 

  3.   // A very basic default task.
    4. 

  4.   grunt.registerTask('default', 'Log some stuff.', function() {
    5. 

  5.     grunt.log.write('Logging some stuff...').ok();
    6. 

  6.   });
    7. 

  7. 

    8. 

  8. };
    9.
自定义的任务也不必一定写在Gruntfile中，也可以定义在外部的.js文件中，然后通过grunt.loadTasks来加载。

实战

grunt插件中有contrib前缀的是Grunt团队自行开发的插件，也是推荐使用的，下面挑选几个在前端项目中必用的插件，在实际例子中介绍一下使用方法。

grunt-contrib-compass

Compass是SASS的一个框架，就像jQuery之于Javascript、Rails之于Ruby。具体的用法可以参考阮一峰的这两篇Blog:
首先，安装grunt-contrib-compass
    

  1. npm install grunt-contrib-compass --save-dev
    2.
如前所述，--save-dev可以在安装插件的过程中，将对这个插件的依赖自动写入package.json文件中，方便。
Compass并没有暴露所有的设置给Grunt，如果有别的需要，可以在config里面指定config.rb给Compass编译使用。看一个配置的例子：
    

  1. module.exports = function(grunt){
    2. 

  2.     grunt.initConfig({
    3. 

  3.       compass: {                  // compass任务
    4. 

  4.         dist: {                   // 一个子任务
    5. 

  5.           options: {              // 任务的设置
    6. 

  6.             sassDir: 'sass',
    7. 

  7.             cssDir: 'css',
    8. 

  8.             environment: 'production'
    9. 

  9.           }
    10. 

  10.         },
    11. 

  11.         dev: {                    // 另一个子任务
    12. 

  12.           options: {
    13. 

  13.             sassDir: 'sass',
    14. 

  14.             cssDir: 'style'
    15. 

  15.           }
    16. 

  16.         }
    17. 

  17.       }
    18. 

  18.     });
    19. 

  19. 

    20. 

  20.     grunt.loadNpmTasks('grunt-contrib-compass');
    21. 

  21. 

    22. 

  22.     grunt.registerTask('default', ['compass']);
    23. 

  23. }
    24.
如果要使用外部文件的配置：
    

  1. grunt.initConfig({
    2. 

  2.   compass: {
    3. 

  3.     dist: {
    4. 

  4.       options: {
    5. 

  5.         config: 'config/config.rb'
    6. 

  6.       }
    7. 

  7.     }
    8. 

  8.   }
    9. 

  9. });
    10.

grunt-contrib-concat

grunt-contrib-concat是一个合并文件的插件，可以将多个css或js文件合并为一个，以节省链接数。同样的，安装：
    

  1. npm install grunt-contrib-concat --save-dev
    2.
这个插件有一下几个常用配置：
  • seperator：被合并的文件会用这个参数来join，例如你在合并压缩后的js文件时，可以加个;防止出错
  • banner：在合并后的文件头部加一些额外信息
  • footer：在合并后的文件尾部加一些额外信息
再看一下用法：
    

  1. grunt.initConfig({
    2. 

  2.   pkg: grunt.file.readJSON('package.json'),
    3. 

  3.   concat: {
    4. 

  4.     options: {                                                      //配置
    5. 

  5.       stripBanners: true,
    6. 

  6.       banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +      //添加自定义的banner
    7. 

  7.         '<%= grunt.template.today("yyyy-mm-dd") %> */'
    8. 

  8.     },
    9. 

  9.     dist: {                                                         //任务
    10. 

  10.         src: ['src/intro.js', 'src/project.js', 'src/outro.js'],    //源目录文件
    11. 

  11.         dest: 'dist/built.js'                                       //合并后的文件
    12. 

  12.     },
    13. 

  13.     basic_and_extras: {                                             //另一个任务
    14. 

  14.         files: {                                                    //另一种更简便的写法
    15. 

  15.             'dist/basic.js': ['src/main.js'],
    16. 

  16.             'dist/with_extras.js': ['src/main.js', 'src/extras.js']
    17. 

  17.         }
    18. 

  18.     }
    19. 

  19.   }
    20. 

  20. });
    21. 

  21. 

    22. 

  22. grunt.loadNpmTasks('grunt-contrib-concat');
    23.
最后在default事件中添加concat就会默认执行了。

grunt-contrib-uglify

grunt-contrib-uglify用来压缩js文件，用法与concat类似，先安装：
    

  1. npm install grunt-contrib-uglify --save-dev
    2.
然后写入相应的配置：
    

  1. grunt.initConfig({
    2. 

  2.   uglify: {
    3. 

  3.     options: {
    4. 

  4.       banner: '/*! This is uglify test - ' +
    5. 

  5.         '<%= grunt.template.today("yyyy-mm-dd") %> */'
    6. 

  6.     },
    7. 

  7.     app_task: {
    8. 

  8.       files: {
    9. 

  9.         'dist/app.min.js': ['js/app.js', 'js/render.js']
    10. 

  10.       }
    11. 

  11.     }
    12. 

  12.   }
    13. 

  13. });
    14. 

  14. 

    15. 

  15. grunt.loadNpmTasks('grunt-contrib-uglify');
    16.
恩，经过如此处理，你的js代码已经丑陋到无法直视了。

grunt-contrib-watch

grunt-contrib-watch是开发必备插件，用来监控文件的修改，然后自动运行grunt任务，省去一遍遍手动执行Grunt命令，安装照旧：
    

  1. npm install grunt-contrib-watch --save-dev
    2.
使用watch插件时，需要注意一点，被watch的文件，可以分开写，这样可以提高watch的性能，不用每次把没修改的文件也执行一遍任务，看看例子：
    

  1. grunt.initConfig({
    2. 

  2.   watch: {
    3. 

  3.     css: {
    4. 

  4.       files: ['public/scss/*.scss'],
    5. 

  5.       tasks: ['compass'],
    6. 

  6.       options: {
    7. 

  7.         // Start a live reload server on the default port 35729
    8. 

  8.         livereload: true,
    9. 

  9.       },
    10. 

  10.     },
    11. 

  11.     another: {
    12. 

  12.       files: ['lib/*.js'],
    13. 

  13.       tasks: ['anothertask'],
    14. 

  14.       options: {
    15. 

  15.         // Start another live reload server on port 1337
    16. 

  16.         livereload: 1337,
    17. 

  17.       },
    18. 

  18.     }
    19. 

  19.   }
    20. 

  20. });
    21. 

  21. 

    22. 

  22. grunt.loadNpmTasks('grunt-contrib-watch');
    23.
然后运行grunt watch命令，修改文件，就会看到设定的任务执行了。

源码

Grunt的基本使用就是这些了，当然还有一些搭建脚手架等等的功能，等待你自己去学习使用吧，更多的Grunt 插件也等待你去发现。
贴出来源码，整体看一下：

package.json

    

  1. {
    2. 

  2.   "name": "Grunt-in-action",
    3. 

  3.   "devDependencies": {
    4. 

  4.     "grunt": "~0.4.1",
    5. 

  5.     "grunt-contrib-compass": "~0.3.0",
    6. 

  6.     "grunt-contrib-watch": "~0.4.4",
    7. 

  7.     "grunt-contrib-concat": "~0.3.0",
    8. 

  8.     "grunt-contrib-uglify": "~0.2.2"
    9. 

  9.   }
    10. 

  10. }
    11.

Gruntfile.js

    

  1. module.exports = function(grunt){
    2. 

  2.     grunt.initConfig({
    3. 

  3.         compass: {                  // Task
    4. 

  4.             dist: {                   // Target
    5. 

  5.                 options: {              // Target options
    6. 

  6.                     sassDir: 'sass',
    7. 

  7.                     cssDir: 'css',
    8. 

  8.                     environment: 'production'
    9. 

  9.                 }
    10. 

  10.             },
    11. 

  11.             dev: {                    // Another target
    12. 

  12.                 options: {
    13. 

  13.                     sassDir: 'sass',
    14. 

  14.                     cssDir: 'style'
    15. 

  15.                 }
    16. 

  16.             }
    17. 

  17.         },
    18. 

  18. 

    19. 

  19.         concat: {
    20. 

  20.             options: {                                       //配置
    21. 

  21.                 stripBanners:true,
    22. 

  22.                 banner: '/*! This is the grunt test ' +      //添加自定义的banner
    23. 

  23.                 '<%= grunt.template.today("yyyy-mm-dd") %> */'
    24. 

  24.             },
    25. 

  25.             basic: {                                         //另一个任务
    26. 

  26.                 files: {                                     //另一种更简便的写法
    27. 

  27.                     'dist/style.css': ['style/screen.css','style/ie.css','style/print.css']
    28. 

  28.                 }
    29. 

  29.             }
    30. 

  30.         },
    31. 

  31. 

    32. 

  32.         uglify: {
    33. 

  33.             options: {
    34. 

  34.                 banner: '/*! This is uglify test - ' +
    35. 

  35.                 '<%= grunt.template.today("yyyy-mm-dd") %> */'
    36. 

  36.             },
    37. 

  37.             app_task: {
    38. 

  38.                 files: {
    39. 

  39.                     'dist/app.min.js': ['js/app.js', 'js/render.js']
    40. 

  40.                 }
    41. 

  41.             }
    42. 

  42.         },
    43. 

  43. 

    44. 

  44.         watch: {
    45. 

  45.             css: {
    46. 

  46.                 files: ['sass/*.scss'],
    47. 

  47.                 tasks: ['compass', 'concat']
    48. 

  48.             },
    49. 

  49.             another: {
    50. 

  50.                 files: ['js/*.js'],
    51. 

  51.                 tasks: ['uglify']
    52. 

  52.             }
    53. 

  53.         }
    54. 

  54.     });
    55. 

  55. 

    56. 

  56.     grunt.loadNpmTasks('grunt-contrib-compass');
    57. 

  57.     grunt.loadNpmTasks('grunt-contrib-concat');
    58. 

  58.     grunt.loadNpmTasks('grunt-contrib-uglify');
    59. 

  59.     grunt.loadNpmTasks('grunt-contrib-watch');
    60. 

  60. 

    61. 

  61.     grunt.registerTask('default', ['compass','concat', 'uglify']);
    62. 

  62. }
    63.
at

No comments:

Post a Comment