首页 > 代码库 > Grunt操作指南

Grunt操作指南

2024-07-07 23:43:46   227人阅读

首先，在项目的根目录下，创建一个文本文件package.json，指定当前项目所需的模块。下面就是一个例子。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "family": "ms",
  "version": "1.0.0",
  "name": "zhe800",
  "spm": {
    "alias": {
        "zepto": "zepto"
    }
  },
  "devDependencies": {
    "grunt": "~0.4.3",
    "grunt-cmd-transport": "~0.4.1",
    "grunt-cmd-concat": "~0.2.7",
    "grunt-contrib-uglify": "~0.4.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-cssmin": "~0.6.2",
    "grunt-contrib-clean": "~0.5.0"
  }
}

　　

 

模块安装完以后，下一步在项目的根目录下，新建脚本文件Gruntfile.js。它是grunt的配置文件。如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
module.exports = function (grunt) {
    // 配置Grunt各种模块的参数
    // 四个模块：jshint（检查语法错误）、concat（合并文件）、uglify（压缩代码）和watch（自动执行）。
    grunt.initConfig({
        pkg : grunt.file.readJSON("package.json"),
        //对SeaJS定义的模块进行依赖提取等任务
        transport : {
            options : {
                paths : [‘.‘],
                alias: ‘<%= pkg.spm.alias %>‘
            },
            test : {
                options : {
                    idleading : ‘dist/‘
                },
                files : [
                    {
                        expand:true,
                        cwd : ‘static‘,
                        src : ‘test/**/*.js‘,
                        filter : ‘isFile‘,
                        dest : ‘.temp‘
                    }
                ]
            }
        },
        //concat用来合并同类文件，它不仅可以合并JavaScript文件，还可以合并CSS文件。
        concat : {
            options : {
                paths : [‘.‘],
                include : ‘relative‘
            },
            test : {
                files: [
                    {
                        expand: true,
                        cwd: ‘.temp/‘,
                        src: ‘test/**/*.js‘,
                        dest: ‘dist/‘
                    }
                ]
            }
        },
        //watch模块用来在后台运行，监听指定事件，然后自动运行指定的任务。
//        watch:{
//            css:{
//                files:[‘static/demo/**/*.css‘],
//                tasks:[‘cssmin:demo‘],
//                options:{
//                    livereload:true
//                }
//            }
//        },
        //uglify模块用来压缩代码，减小文件体积。
        uglify : {
            test : {
                files: [
                    {
                        expand: true,
                        cwd: ‘dist/‘,
                        src: [‘test/**/*.js‘,‘!test/**/*-debug.js‘],
                        dest: ‘dist/‘
                    }
                ]
            }
        },
        //压缩以及合并CSS文件。
        cssmin : {
            test : {
                files: [
                    {
                        expand: true,
                        cwd : ‘static‘,
                        src : ‘test/**/*.css‘,
                        dest: ‘dist/‘
                    }
                ]
            }
        },
        //copy模块用于复制文件与目录。
        copy : {
            test : {
                files:[
                    {
                        expand: true,
                        filter: ‘isFile‘,
                        cwd:‘static/test/img/‘,
                        src: [‘**/*‘],
                        dest: ‘dist/test/img/‘
                    }
                ]
            }
        },
        clean : {
            spm : [‘.temp‘]
        }
    });
 
 
    // 从node_modules目录加载模块文件
    grunt.loadNpmTasks(‘grunt-cmd-transport‘);
    grunt.loadNpmTasks(‘grunt-cmd-concat‘);
    grunt.loadNpmTasks(‘grunt-contrib-clean‘);
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
    grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);
    grunt.loadNpmTasks(‘grunt-contrib-copy‘);
    grunt.loadNpmTasks(‘grunt-contrib-watch‘);
 
    // 每行registerTask定义一个任务。定义具体的任务。第一个参数为任务名，第二个参数是一个数组，表示该任务需要依次使用的模块。
    grunt.registerTask(‘build-test‘, [‘transport:test‘,‘concat:test‘,‘uglify:test‘,‘cssmin:test‘,‘copy:test‘,‘clean‘]);
};

　　

常见标签

expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
cwd：需要处理的文件（input）所在的目录。
src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。
dest：表示处理后的文件名或所在目录。
ext：表示处理后的文件后缀名。
filter：一个返回布尔值的函数，用于过滤文件名。只有返回值为true的文件，才会被grunt处理。
dot：是否匹配以点号（.）开头的系统文件。
makeBase：如果设置为true，就只匹配文件路径的最后一部分。比如，a?b可以匹配/xyz/123/acb，而不匹配/xyz/acb/123。
*：匹配任意数量的字符，不包括/。
?：匹配单个字符，不包括/。
**：匹配任意数量的字符，包括/。
{}：允许使用逗号分隔的列表，表示“or”（或）关系。
!：用于模式的开头，表示只返回不匹配的情况。
比如，foo/*.js匹配foo目录下面的文件名以.js结尾的文件，foo/**/*.js匹配foo目录和它的所有子目录下面的文件名以.js结尾的文件，!*.css表示匹配所有后缀名不为“.css”的文件。


联系
我们