GRUNT:任务运行管理器

文章目录

使用缘由

作为一个前端攻城师,最近的一年的接触的新东西,比我大学四年加上来还要多。多列一下:

1.LESS、2.SASS、3.JSHint、4.CSSLint、5.Github、6.图片压缩、7.CSS压缩、8.异步加载JS(Required JS/Seajs)、9.CSS文件合并、10.JS文件合并、11.图片雪碧等。

作为一个前沿意识的全端工程师,要安装和使用东西真的挺多的。那么有没有一个工具能够能够更好的运行和管理呢?

其实在Sublime Text2里面上面提到的大部分都可以解决了。只需要下载对应的插件就行了。

今天要讲的这个工具更加的强大和智能,虽然新手配置有些麻烦,不过越多人使用,不懂的地方也可以向别人请教。

介绍Grunt

Grunt是一个自动化的项目构建工具。如果你需要重复的执行像压缩,编译,单元测试,代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务,你所需要做的只是配置好Grunt,这样能很大程度的简化你的工作。

从描述可以看出,这个工具更加智能,而且省事,不要重复的进行,在一个大的项目里面,只需要配置好要做的任务,那么对于前端工作是比较惬意的。

Grunt有很多自动化工具可以帮你处理,像上面提到的这些都有相应的插件。

开始使用Grunt

1.安装node.js,然后运行以下命令

sudo npm install grunt-cli -g

grunt-cli表示安装的是grunt的命令行界面,参数g表示全局安装。

Grunt使用模块结构,除了安装命令行界面以外,还要根据需要安装相应的模块。这些模块应该采用局部安装,因为不同项目可能需要同一个模块的不同版本。

然后再项目根目录创建文本文件package.JSON,指定当前项目所需的模块。下面是范例:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "author": "Your Name",
  "devDependencies": {
    "grunt": "0.x.x",
    "grunt-contrib-jshint": "*",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.0",
    "grunt-contrib-watch": "~0.1.4"
  }
}

然后,在项目的根目录下运行下面的命令,这些插件就会被自动安装在node_modules子目录。

npm install

上面这种方法是针对已有package.json的情况。如果想要自动生成package.json文件,可以使用npm init命令,按照屏幕提示回答所需模块的名称和版本即可。

npm init

如果已有的package.json文件不包括Grunt模块,可以在直接安装Grunt模块的时候,加上--save-dev参数,该模块就会自动被加入package.json文件。

npm install <module> --save-dev

比如,对应上面package.json文件指定的模块,需要运行以下npm命令。

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

命令脚本文件Gruntfile.js

模块安装完以后,下一步在项目的根目录下,新建脚本文件Gruntfile.js。它是grunt的配置文件,就好像package.json是npm的配置文件一样。Gruntfile.js就是一般的Node.js模块的写法。

module.exports = function(grunt) {

  // 配置Grunt各种模块的参数
  grunt.initConfig({
    jshint: { /* jshint的参数 */ },
    concat: { /* concat的参数 */ },
    uglify: { /* uglify的参数 */ },
    watch:  { /* watch的参数 */ }
  });

  // 从node_modules目录加载模块文件
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 每行registerTask定义一个任务
  grunt.registerTask('default', ['jshint', 'concat', 'uglify']);
  grunt.registerTask('check', ['jshint']);

};

上面的代码用到了grunt代码的三个方法:

  • grunt.initConfig:定义各种模块的参数,每一个成员项对应一个同名模块。
  • grunt.loadNpmTasks:加载完成任务所需的模块。
  • grunt.registerTask:定义具体的任务。第一个参数为任务名,第二个参数是一个数组,表示该任务需要依次使用的模块。default任务名表示,如果直接输入grunt命令,后面不跟任何参数,这时所调用的模块(该例为jshint,concat和uglify);该例的check任务则表示使用jshint插件对代码进行语法检查。

上面的代码一共加载了四个模块:jshint(检查语法错误)、concat(合并文件)、uglify(压缩代码)和watch(自动执行)。接下来,有两种使用方法。

(1)命令行执行某个模块,比如

grunt jshint

上面代码表示运行jshint模块。

(2)命令行执行某个任务。比如

grunt check

上面代码表示运行check任务。如果运行成功,就会显示“Done, without errors.”。

如果没有给出任务名,只键入grunt,就表示执行默认的default任务。

Gruntfile.js实例:grunt-contrib-cssmin模块

下面通过cssmin模块,演示如何编写Gruntfile.js文件。cssmin模块的作用是最小化CSS文件。

首先,在项目的根目录下安装该模块。

npm install grunt-contrib-cssmin --save-dev

然后,新建文件Gruntfile.js。

module.exports = function(grunt) {

  grunt.initConfig({
    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.loadNpmTasks('grunt-contrib-cssmin');

  grunt.registerTask('default', ['cssmin:minify','cssmin:combine']);

};

下面详细解释上面代码中的三个方法,下面一个个来看。

常用模块设置

grunt的模块已经超过了2000个,且还在快速增加。下面是一些常用的模块(按字母排序)。

  • grunt-contrib-clean:删除文件。
  • grunt-contrib-compass:使用compass编译sass文件。
  • grunt-contrib-concat:合并文件。
  • grunt-contrib-copy:复制文件。
  • grunt-contrib-cssmin:压缩以及合并CSS文件。
  • grunt-contrib-imagemin:图像压缩模块。
  • grunt-contrib-jshint:检查JavaScript语法。
  • grunt-contrib-uglify:压缩以及合并JavaScript文件。
  • grunt-contrib-watch:监视文件变动,做出相应动作。

grunt-contrib-jshint

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

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

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

grunt-contrib-concat

concat用来合并同类文件,它不仅可以合并JavaScript文件,还可以合并CSS文件。

concat: {
  js: {
    src: ['lib/module1.js', 'lib/module2.js', 'lib/plugin.js'],
    dest: 'dist/script.js'
  }
  css: {
    src: ['style/normalize.css', 'style/base.css', 'style/theme.css'],
    dest: 'dist/screen.css'
  }
},

js目标用于合并JavaScript文件,css目标用语合并CSS文件。两者的src属性指定需要合并的文件(input),dest属性指定输出的目标文件(output)。

文章使用介绍更多请参考阮一峰博客:Grunt:任务自动管理工具

这篇文章是我见过的介绍使用Grunt工具最有用的文章了。阮一峰的思路非常的清晰,从浅到深,推荐你到原文了解,然后自己动手操作一下。

阮一峰的Javascript参考教程写的真棒,收藏,有时间一定要认真拜读一番。

原创文章:GRUNT:任务运行管理器 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/grunt.html)
评论已关闭。