前端自动化工具 -- Grunt 使用简介

布满荆棘的人生 2023-06-01 03:19 2阅读 0赞

grunt是什么，grunt就是个东西..

grunt作为一个前端构建工具，有资源压缩，代码检查，文件合并等功能。

下面就简单了解grunt的使用。

**一、环境配置**

grunt是基于nodejs的，所以需要一个 [nodejs][] 环境，未了解的可以 [来这看看][Link 1]

还是在windows下，

首先要保证grunt命令可以使用，所以要先使用npm安装对应CLI

npm install -g grunt-cli

安装完成可以命令行中输入“grunt”测试是否安装成功

安装成功后

**二、用法说明**

grunt需要package.json文件描述，很多操作都直接通过这个json文件访问，

需要Gruntfile.js文件，这是一个入口文件，grunt将从这里开始，实现你的意图。

所以，首先新建一个工程目录grunt,再里头新建这两个文件。

package.json需要严格的json格式，随便写入几个key-value如：

{
      "name": "grunt_test",
      "version": "1.0.0"
    }

Gruntfile.js 可以初始成这个形式：

![复制代码][copycode.gif]

module.exports = function(grunt){ 
        grunt.initConfig({ 
            pkg: grunt.file.readJSON('package.json')
            
        });
        //grunt.registerTask('default',[]);
    };

![复制代码][copycode.gif]

这时我们命令行到工程目录里头，npm安装好grunt支持，后面的参数--dev-save表示将此grunt支持添加到依赖中去

![221546564591936.png][]

什么叫添加到依赖中去？安装好后，看看 package.json里头，是不是多了这个东西~

![复制代码][copycode.gif]

{
      "name": "grunt_test",
      "version": "1.0.0",
      "devDependencies": {
        "grunt": "^0.4.5"
      }
    }

![复制代码][copycode.gif]

好这时，我们用grunt命令执行一下，果然出现了没有default这货，看了它是需要这货的，那就把上头那个注释去掉，再试试

![221551088817719.png][]

其实到这里为止已经是最基本的流程了。

**三、各插件使用**

而一般常用方法是使用提供的 [插件][Link 2]，进一步作处理

**1）比如代码压缩：**

html压缩：[htmlmin][]

css压缩： [cssmin][]

js压缩：[uglify][]

官方提供了充足的介绍，当然了，初次接触，也很容易被各种繁杂的配置项搞混。

既然要压缩代码，这里就在./static/script/目录下新建一个test.js文件，随便写入几句

![复制代码][copycode.gif]

function firstLetterToUp(str){ 
        return String(str).replace('^\s*|\s*$')
                    .replace(/\b\w+\b/g,function(word){ 
                        word = word.toLowerCase();
                        return word[0].toUpperCase() + word.substring(1);
                    });
    }
    
    var s = firstLetterToUp('  aBCDE Bda erew');
    console.log(s);

![复制代码][copycode.gif]

js代码压缩需要一个很常用的插件  grunt-contrib-uglify ,同理先npm安装支持

![221555116627181.png][]

可以看到package.json也更新了

![复制代码][copycode.gif]

{
      "name": "grunt_test",
      "version": "1.0.0",
      "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-contrib-uglify": "^0.9.1"
      }
    }

![复制代码][copycode.gif]

类似的方法，html的安装 grunt-contrib-htmlmin ,css的安装 grunt-contrib-cssmin

安装完后，接下来就是对Gruntfile.js更新配置项

grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。  
grunt.loadNpmTasks：加载完成任务所需的模块。  
grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块。

各设置项都有一般用法，特殊的需要自行到官网查看说明，例如

*  **expand**：如果设为true，就表示下面文件名的占位符（即\*号）都要扩展成具体的文件名。
 *  **cwd**：需要处理的文件（input）所在的目录。
 *  **src**：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。
 *  **dest**：表示处理后的文件名或所在目录。
 *  **ext**：表示处理后的文件后缀名。

目前的Gruntfile.js配置：

![复制代码][copycode.gif]

module.exports = function(grunt){ 
        grunt.initConfig({ 
            //获取到package.json各项
            pkg: grunt.file.readJSON('package.json'),
            //js压缩
            uglify: { 
                //使用options这个名声
                options: { 
                    //为true表示允许添加头部信息
                    stripBanners: true,
                    //在头部添加 js文件名和时间的注释
                    banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd") %> */\n'
                },
                //files名称任意，比如下方的build 关键是src-dest要指示好
                files: { 
                    src: './static/script/test.js',
                    dest: 'build/static/script/<%=pkg.name%>-<%=pkg.version%>.min.js'
                }
            },
            //css 压缩
            cssmin: { 
                options:{ 
                    report:'gzip'
                },
                build: { 
                    expand: true,
                    cwd: './static/style',
                    src: ['test.css'],
                    dest: './build/static/style'
                }
            },
            //html 压缩
            htmlmin: { 
                options: { 
                removeComments: true,
                removeCommentsFromCDATA: true,
                collapseWhitespace: true,
                collapseBooleanAttributes: true,
                removeAttributeQuotes: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeOptionalTags: true
                },
                build:{ 
                    expand: true,
                    cwd: './',
                    src: ['*.html'],
                    dest: './'
                }
            }
        });
        
    
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-htmlmin');
        
        grunt.registerTask('default',[
            'uglify',
            'cssmin',
            'htmlmin'
            ]);
    };

![复制代码][copycode.gif]

命令行执行看效果

![221659220534732.png][]

![221700463652240.png][]

![221701021317257.png][]

![221701126312450.png][]

当然了，还有图片的压缩 [imagemin  ][imagemin]也可以去试试

**2）jshint 代码检查**

js代码的检查可以使用[ jshint插件][jshint]

同理，先 装好 grunt-contrib-jshint

检查的规则见 [DOCS][]

如

**curly**: 大括号包裹

**eqeqeq**: 对于简单类型，使用===和!==，而不是==和!=

**newcap**: 对于首字母大写的函数（声明的类），强制使用new

**noarg**: 禁用arguments.caller和arguments.callee

**sub**: 对于属性使用aaa.bbb而不是aaa\['bbb'\]

**undef**: 查找所有未定义变量

**boss**: 查找类似与if(a = 0)这样的代码

**node**: 指定运行环境为node.js

在Gruntfile.js中配置相关项：

![复制代码][copycode.gif]

module.exports = function(grunt){ 
        grunt.initConfig({ 
            //获取到package.json各项
            pkg: grunt.file.readJSON('package.json'),
            //js压缩
            //... 省略
            },
            jshint: { 
                options: {
                    curly: true,
                    eqeqeq: true,
                    newcap: true,
                    noarg: true,
                    sub: true,
                    undef: true,
                    boss: true,
                    node: true,
                    globals: {
                        exports: true,
                        jQuery: true
                    }
                },
                files:['./static/script/test.js']
            }
        });
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-contrib-cssmin');
        grunt.loadNpmTasks('grunt-contrib-htmlmin');
        grunt.loadNpmTasks('grunt-contrib-jshint');
    
        grunt.registerTask('default',[
            'jshint',
            'uglify',
            'cssmin',
            'htmlmin'
            ]);
    };

![复制代码][copycode.gif]

修改个，再执行grunt,可以看到出错信息，且grunt不再继续执行

![221724315068852.png][]

同理，[csslint][] 也可作css的语法检查，可以去试试

**3）使用 grunt-contrib-watch 插件**

watch的使用会自动监听修改，并grunt自动构建

同理，config中增添watch配置项

files表示要监听的文件，可以是单个值或数组；tasks表示监听有改动后要执行什么任务

![复制代码][copycode.gif]

watch: { 
                build: { 
                    files: ['./static/style/*.css'],
                    tasks: ['cssmin'],
                    options:{ 
                        spawn: false
                    }
                }
            }

![复制代码][copycode.gif]

**4)使用 [grunt-contrib-sass][] 插件**

这个插件可以自动将sass编译成css文件，再配合其他插件的使用。美哉~

装好支持依赖后，在config配置中增加：

![复制代码][copycode.gif]

sass:{ 
                dist:{ 
                    options:{ 
                        //还记得这个不？这就是sass编译时候四种style中的
                        style: 'expanded'
                    },
                    files:{ 
                        './static/style/test.css':'./static/style/test.scss'
                    }
                }
            }

![复制代码][copycode.gif]

files中就定义为  dest : src 的形式

通过watch的辅助，执行命令后，scss文件的每次改动，都能自动构建出新css

![221751445842438.png][] ![221751542719043.png][]

**5）[concat插件][concat] 文件合并 **

可以使用类似这种方式实现

![复制代码][copycode.gif]

grunt.initConfig({
      concat: {
        options: {
          separator: ';',
        },
        dist: {
          src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
          dest: 'dist/built.js',
        },
      },
    });

![复制代码][copycode.gif]

当然还有很多插件经常被使用，比如clean copy 等等。这些都可以在grunt的 [插件中心][Link 2] 找到，带contrib字样的表示是官方提供的。

插件具体的用法，多种多样，还是自个去相应站点，好好读一读

其实grunt这构建工具使用起来很简单，主要就是配置+一大堆配置。初期可能会对各配置项头痛，但经常实践，终会了然于胸的。

\[-\_-\]眼睛累了吧，注意劳逸结合呀\[-\_-\]

![688270-20181006233143351-198585778.png][]

转载于:https://www.cnblogs.com/Jeely/p/11269655.html

[nodejs]: https://nodejs.org/
[Link 1]: http://www.cnblogs.com/imwtr/p/4350282.html
[copycode.gif]: /images/20230601/17d0707bca9f4fb8bf3cdaff22f11e62.png
[221546564591936.png]: /images/20230601/539449abc47e483e892d027b56bde541.png
[221551088817719.png]: /images/20230601/a8d364942a6e4c7f9f1a22bc011f9a14.png
[Link 2]: http://www.gruntjs.net/plugins
[htmlmin]: https://www.npmjs.com/package/grunt-contrib-htmlmin
[cssmin]: https://www.npmjs.com/package/grunt-contrib-cssmin
[uglify]: https://www.npmjs.com/package/grunt-contrib-uglify
[221555116627181.png]: /images/20230601/7ff77e26f000432cbfde7155f1fca251.png
[221659220534732.png]: /images/20230601/5be9b9f664fe4c19a70ed7c3b270c49f.png
[221700463652240.png]: /images/20230601/9fa2208d2ef548608ee4f9a54dbc35f9.png
[221701021317257.png]: /images/20230601/03cb795e31dc4b5d8400977c3c6513a6.png
[221701126312450.png]: /images/20230601/e8739e865f394e4eb32269aac81fdc6e.png
[imagemin]: https://www.npmjs.com/package/grunt-contrib-imagemin
[jshint]: https://www.npmjs.com/package/grunt-contrib-jshint
[DOCS]: http://jshint.com/docs/
[221724315068852.png]: /images/20230601/f883d44dae7b459dbb0e8818caf62d5e.png
[csslint]: https://www.npmjs.com/package/grunt-contrib-csslint
[grunt-contrib-sass]: https://www.npmjs.com/package/grunt-contrib-sass
[221751445842438.png]: https://images0.cnblogs.com/blog2015/688270/201507/221751445842438.png
[221751542719043.png]: /images/20230601/2b4f35282bc5434e83e1aa41153ab051.png
[concat]: https://www.npmjs.com/package/grunt-contrib-concat
[688270-20181006233143351-198585778.png]: /images/20230601/54ab495d8e034546bec802b9d5608062.png