Grunt——自动化任务处理工具框架

Posted 2020-09-26

学习文章，详细原文链接：http://yujiangshui.com/grunt-basic-tutorial/

1.　　grunt是一个javascript任务运行器，自动化任务处理工具，是一个工具框架。

2.　　grunt基于node.js，用js开发。

3.　　安装grunt

　　（1）安装Node.js　　

　　（2）npm install -g grunt-cil   （注意：安装的并不是Grunt，而是Grunt-cil，即命令行的Grunt，这样可以使用Grunt命令来执行某个项目中的Gruntfile.js中定义的task。Grunt-cil只是一个命令行工具，用来执行，而不是Grunt工具本　身。）

　　（3）生成package.json文件：在项目根目录下运行npm init。

　　（4）安装grunt到当前项目：

　　　　项目根目录下运行：npm install grunt --save-dev（表示把安装的东西添加到package.），这样，当前项目就依赖grunt，如果安装时没有添加--save-dev参数，需要自行添加信息到package.json。

4.　　安装grunt插件：

　　npm install --save-dev grunt-contrib-concat grunt-contrib-jshint..........

　　安装后项目中的node_modules文件下会出现相应的插件文件夹。注意：项目中的node_modules文件夹不需要上传，因为package.json文件记录了项目中依赖的插件信息。下载后，在项目文件夹下面输入命令 npm install，NPM会自动读取package.json，将grunt和有关的插件下载。

5.　　配置Gruntfile.js文件

1 module.exports=function(grunt){
2     .......
3    （1）任务配置代码
4    （2）插件加载代码
5    （3）任务注册代码
6 };

　　用grunt来注册的一个task从而根据任务配置代码调用需要的插件来执行相应的操作。

6.　　具体实例学习详见原文作者github项目。（感激作者）

7.　　实例：

　　（1）一般模板

　　

 1 module.exports=function(grunt){
 2 
 3 //任务配置代码:以对象的格式放在grunt.initConfig函数里面
 4 grunt.initConfig({
 5     pkg:grunt.file.readJSON(‘package.json‘),//读取package.json文件，并把里面的信息获取出来
 6     uglify:{//在Uglift插件下面，有一个buile任务，内容是把xx.js压缩输出到xx.min.js里面
 7         options:{
 8             banner:‘/*!<%=pkg.name%><%=grunt.template.today("yyyy-mm-dd")%>*/\n‘
 9         },
10         build:{
11             src:‘src/<%=pkg.name%>.js‘,
12             dest:‘build/<%=pkg.name%>.min.js‘
13         }
14     }
15 });
16 
17 
18 //插件加载代码
19 grunt.loadNpmTasks(‘grunt-contrib-uglifg‘);
20 
21 //任务注册代码:zai default上满注册了一个Uglify任务，default就是别名，
22 //默认的task，当我们在项目目录中执行grunt命令的时候，它会执行注册到default上面的任务。
23 grunt.registerTask(‘default‘,[‘uglify‘]);
24 
25 
26 /*eg:注册其他的task
27     grunt.registerTask(‘compress‘,[‘uglify:bulid‘]);
28 
29     需要输入grunt compress 命令来执行这条task，而这条task任务是uglify下面的build任务，
30     也就是说只会执行uglify里面的bulid定义的任务，而不会执行uglify里面定义的其他任务。
31 */
32 
33 
34 
35 /*需要注意的是：
36     task的命名不能与后面的任务配置同名，也就是说这里的comperss不能命名为uglify，这样会报错或是产生意外情况。
37 */
38 
39 
40 };

　　（2）作者实例

 1 module.exports = function(grunt) {
 2 
 3   var sassStyle = ‘expanded‘;
 4 
 5   grunt.initConfig({
 6     pkg: grunt.file.readJSON(‘package.json‘),
 7     sass: {
 8         output:{
 9             options:{
10                 style:sassStyle
11             },
12             files:{
13                 ‘./style.css‘:‘./scss/style.scss‘/*将 ./scss/style.scss这个文件以sassStyl变量存储的方式编译成根目录下面的style.css*/
14             }
15         }
16     },
17 
18     concat:{
19         options:{
20             // separator:‘;‘,/*该参数本来是为了防止两个文件之间相互干扰设置的，结果无法被jshint验证通过，可以*/
21         },
22         dist:{
23             src:[‘./src/plugin.js‘,‘./src/plugin2.js‘],
24             dest:‘./global.js‘,
25         },
26     },
27 
28     uglify:{
29         compressjs:{
30             files:{
31                 ‘./global.min.js‘:[‘./global.js‘]
32             }
33         }
34     },
35 
36     jshint:{
37         all:[‘./global.js‘]
38     },
39     watch:{
40         script:{
41             files:[‘./src/plugin.js‘,‘/src/plugin2.js‘],
42             tasks:[‘concat‘,‘jshint‘,‘uglity‘]
43         },
44         sass:{
45             files:[‘./scss/style.scss‘],
46             tasks:[‘concat‘,‘jshint‘,‘uglify‘]
47         },
48         liverload:{
49             options:{
50                 liverload:‘<%=concat.options.liverload%>‘
51             },
52             files:[
53                 ‘index.html‘,
54                 ‘style.css‘,
55                 ‘js/global.min.js‘
56             ]
57         }
58     },
59     connect:{
60         options:{
61             port:9000,
62             open:true,
63             liverload:35729,
64             hostname:‘localhost‘
65         },
66         srver:{
67             options:{
68                 port:9001,
69                 base:‘./‘
70             }
71         }
72     }
73 
74   });
75 
76   grunt.loadNpmTasks(‘grunt-contrib-sass‘);
77   grunt.loadNpmTasks(‘grunt-contrib-concat‘);
78   grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
79   grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
80   grunt.loadNpmTasks(‘grunt-contrib-watch‘);
81   grunt.loadNpmTasks(‘grunt-contrib-concat‘);
82 
83   grunt.registerTask(‘outputcss‘,[‘sass‘]);
84   grunt.registerTask(‘concatjs‘,[‘concat‘]);
85   grunt.registerTask(‘compressjs‘,[‘concat‘,‘jshint‘,‘uglify‘]);
86   grunt.registerTask(‘watchit‘,[‘sass‘,‘concat‘,‘jshint‘,‘uglify‘,‘connect‘,‘watch‘]);
87   grunt.registerTask(‘default‘);
88 
89 };

注意：以上例子在本地运行时，因为本地环境问题，有部分功能不能实现，希望在后面继续深入了解。