grunt 使用

63 阅读 0 评论 42 点赞

我是靠谱客的博主笨笨歌曲，最近开发中收集的这篇文章主要介绍grunt 使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.Grunt和 Grunt 插件是通过 npm 安装并管理的。

2.在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。

3.你需要先将Grunt命令行（CLI）安装到全局环境中。但是不等于安装grunt。npm install -g grunt-cli。允许你在同一个系统上同时安装多个版本的 Grunt。运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。

4.npm init 生产package.json，在项目的根目录，同gruntfile.js。

5.npm install –save-dev命令安装grunt插件。此命令不光安装了，还会自动将其添加到devDependencies 配置段中。
.npm install grunt –save–only=dev
.npm install grunt-contrib-jshint –save–only=dev
.npm install grunt-contrib-uglify –save–only=dev
6.Gruntfile由以下几部分构成：grunt-init
“wrapper” 函数

module.exports = function(grunt) {
// Do grunt-related things in here
};

项目与任务配置

object内，并传递给grunt.initConfig 方法.grunt.file.readJSON('package.json') 将存储在package.json文件中的JSON元数据引入到grunt config中
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});

加载grunt插件和任务

只要在 package.json 文件中被列为dependency（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用：
// 加载能够提供"uglify"任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
注意： grunt --help 命令将列出所有可用的任务。

可以dos grunt –help 查看，前提安装了grunt cli grunt.
通过定义 default 任务，可以让Grunt默认执行一个或多个任务.
grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）。

// Default task(s).
grunt.registerTask(‘default’, [‘uglify’]);
如果Grunt插件中的任务（task）不能满足你的项目需求，你还可以在Gruntfile中自定义任务（task）。例如，在下面的 Gruntfile 中自定义了一个default 任务，并且他甚至不依赖任务配置：

module.exports = function(grunt) {

// A very basic default task.
grunt.registerTask(‘default’, ‘Log some stuff.’, function() {
grunt.log.write(‘Logging some stuff…’).ok();
});

};
特定于项目的任务不必在 Gruntfile 中定义。他们可以定义在外部.js 文件中，并通过grunt.loadTasks 方法加载。
6.设置多任务

grunt.initConfig({
concat: {//任务
foo: {//目标
// concat task "foo" target options and files go here.
},
bar: {
// concat task "bar" target options and files go here.
},
},
uglify: {
bar: {
// uglify task "bar" target options and files go here.
},
},
});

7.设置目标和任务的options
在一个任务配置中，options属性可以用来指定覆盖内置属性的默认值。此外，每一个目标（target）中还可以拥有一个专门针对此目标（target）的options属性。目标（target）级的平options将会覆盖任务级的options。
options对象是可选的，如果不需要，可以忽略。

grunt.initConfig({
concat: {
options: {
// 这里是任务级的Options，覆盖默认值
},
foo: {
options: {
// "foo" target options may go here, overriding task-level options.
},
},
bar: {
// No options specified; this target will use task-level options.
},
},
});

8.允许每个目标对应一个src-dest文件映射。单不能额外为每个目标映射制定属性。

grunt.initConfig({
jshint: {
foo: {
src: ['src/aa.js', 'src/aaa.js']
},
},
concat: {
bar: {
src: ['src/bb.js', 'src/bbb.js'],
dest: 'dest/b.js',
},
},
});
推荐下方：
grunt.initConfig({
concat: {
foo: {
files: [
{src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
{src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
],
},
bar: {
files: [
{src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b/', nonull: true},
{src: ['src/bb1.js', 'src/bbb1.js'], dest: 'dest/b1/', filter: 'isFile'},
],
},
},
});

9.启用相对路径：

grunt.initConfig({
uglify: {
static_mappings: {
// Because these src-dest file mappings are manually specified, every
// time a new file is added or removed, the Gruntfile has to be updated.
files: [
{src: 'lib/a.js', dest: 'build/a.min.js'},
{src: 'lib/b.js', dest: 'build/b.min.js'},
{src: 'lib/subdir/c.js', dest: 'build/subdir/c.min.js'},
{src: 'lib/subdir/d.js', dest: 'build/subdir/d.min.js'},
],
},
dynamic_mappings: {
// Grunt will search for "**/*.js" under "lib/" when the "uglify" task
// runs and build the appropriate src-dest file mappings then, so you
// don't need to update the Gruntfile when files are added or removed.
files: [
{
expand: true,
// Enable dynamic expansion.
cwd: 'lib/',
// Src matches are relative to this path.
src: ['**/*.js'], // Actual pattern(s) to match.
dest: 'build/',
// Destination path prefix.
ext: '.min.js',
// Dest filepaths will have this extension.
extDot: 'first'
// Extensions in filenames begin after the first dot
},
],
},
},
});

10.grunt 两个版本，一个是cli 客户端，一个是服务端。Gruntfile.js本质上是一个函数，而且他的参数是grunt。
11.写好package.json,项目目录下npm install 即可，安装依赖。
12.grunt.initConfig中添加如下代码，grunt.loadNpmTasks(‘grunt-task-name’)不用每行都写了，一句搞定：


"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-cssmin":"*",
"grunt-contrib-sass":"*",
"grunt-contrib-watch":"*",
"grunt-cssc":"*",
"grunt-htmlhint":"*",
"matchdep":"*"
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);