0
点赞
收藏
分享

微信扫一扫

grunt 使用指南

前端王祖蓝 2021-09-24 阅读 119

请确保自己会使用 node 和 npm 且电脑上已经安装这两个工具。

先来比较一下 grunt 和 gulp 的 logo 和它们本质的不同之处:

grunt:


gulp:


通过对比我们发现 grunt 的网站开门注也就是它的优点:JavaScript 任务运行器。而和它类似的 gulp 的在 npm 上的开门注是:流式构建系统。这说明什么那?就是说 gulp 除了具有 grunt 的自动化处理的特点,更重要的是 gulp 底层是用 stream(流)处理文件,不是想 grunt 那样简单的读写文件,所以 gulp 保护硬盘杠杠的。用哪个还用讲吗,至于为什么还要学 grunt,脑子抽风。。。

不扯了,现在来学习直接进入项目学习。

一、less 转化成 css

桌面新建 grunt_study 文件,进入文件 npm init 创建 package.json 文件。

现在全局安装 grunt-cli

npm install -g grunt-cli

在项目里面安装:

npm install --save grunt

因为的翻译 less 所以还的装一个插件,grunt-contrib-less 任然是项目目录里面安装:

npm install --save grunt-contrib-less

在 grunt_study 文件夹里面新建 Gruntfile.js 文件(首字母大写小写都行)。文件里面的内容配置来自:

// 默认暴露一个函数
// 因为在全局安装了grunt-cli
// 当我们在项目目录输入命令 grunt 的时候
// 这个Gruntfile.js 文件会自动执行
// 这部分官网叫做"wrapper(包裹的意思)"函数,它里面需要封装繁琐的配置。
module.exports = function(grunt) {
    // 插件配置项通过grunt.initConfig来初始化
    grunt.initConfig({
        less: {
            development: {
                // less.less 这个文件翻译后到path/to/result.css
                files: {
                    'path/to/result.css': 'less.less'
                }
            }
        }
    });
    // 插件安装之后,通过grunt.loadNpmTasks启用(加载)这个插件
    grunt.loadNpmTasks('grunt-contrib-less');

    // register是注册的意思
    // 注册一个task,用来执行你配置的任务。
    // 本段我们在default上注册了一个less任务
    grunt.registerTask('default', ['less']);
};

我们就在 grunt_study 文件夹里面新建一个 less.less 文件,并书写文件内容:

body{
    width: 100px;
    height: 100px;
    @w:900px;
    @color:#456;
    div{
        width: @w;
        background-color: @color;
    }
}

此时,打开 CMD 窗口,直接输入 grunt :

C:\Users\Administrator\Desktop\grunt_study\>grunt
Running "less:development" (less) task
>> 1 stylesheet created.

Done.

C:\Users\Administrator\Desktop\grunt\node_modules\.bin>

找到生成的 result.css 文件查看内容:

body {
  width: 100px;
  height: 100px;
}
body div {
  width: 900px;
  background-color: #456;
}

顺利把 less 变成了 css。下面来详细的了解一下整个过程。

二、深入学习 grunt

只要上面的项目跑起来基本,就知道的差不多了。

代码的基本组成情况:

  • 默认暴露一个包装函数
module.exports = function(grunt) {
  //所有的代码都必须写在这里
};
  • 任务(task)配置和目标(target)
grunt.initConfig({
 //配置/插件代码
});

以 grunt-contrib-less 的示例代码为例:

grunt.initConfig({
    // less 这是一个task
    // task里面有两个target
    less: {
        // 一个target是development
        development: {
           ...
        },
        // 一个target是production
        production: {
            ...
        }
    }
});
  • registerTask 注册执行
grunt.registerTask('default', ['less']);

如果注册到 default 上面,那么运行的时候直接 grunt 就行,如果随便起个名字,例如:

grunt.registerTask('lessTocss', ['less']);

这时候运行就不能直接运行 grunt 了,而是 grunt lessTocss。grunt 两个执行的方法和 gulp 的 export 特别的像。但是我要说但是了,与 gulp 不同的是 grunt task 里面还有 target 。当我们使用 default 注册的时候,使用 grunt 运行程序的时候,你会发现程序默认执行的是:

C:\Users\Administrator\Desktop\grunt_study\>grunt
Running "less:development" (less) task
>> 1 stylesheet created.

Done.

C:\Users\Administrator\Desktop\grunt\node_modules\.bin>

Running "less:development" (less) task 运行的是 less:development 也就是 task 里面的 target(development)。这样的话我们就可以让它去执行第二个 target(production),方法两种:

  1. 直接改源代码
grunt.registerTask('default', ['less']);

改为;

grunt.registerTask('default', ['less:production']);

2.在命令行使用内置的 API

    let target = grunt.option('target') || 'development';
    grunt.registerTask('default', ['less:' + target]);

命令行里面不是简单的输入 grunt 而是执行:

grunt default --target=production

grunt.option('target') 的核心技能就是能够得到我们在CMD窗口输入的值也就是 target 等于号后面的内容。同时let target = grunt.option('target') || 'development'; 使用了 或 运算,防止我们不输入,程序可以自动执行第一项,防止出错。

这就是 grunt 和 gulp 在执行任务时候的稍稍不同。

  • loadNpmTasks 加载插件

这个 API 没啥好解释的,插件要用首先的加载。

grunt.loadNpmTasks('grunt-contrib-less');
  • options 属性
    官网说是:在一个任务配置中,options 属性可以用来指定覆盖内置属性的默认值。其实就是插件的个性化设置,就比如我们的 less 转 css 插件,如果不设置 options ,我们转化完成的结果发现,文件的格式不变,没有压缩空格缩进。
development: {
    options: {
        compress: true
    },
    files: {
        'path/to/result.css': 'less.less'
    }
}

我们只需要在 options 里面加入 compress: true 转化的文件就变成了压缩格式,不在保留空格和缩进。如下:

body{width:100px;height:100px}body div{width:900px;background-color:#456}

这个 options 还像变量一样分全局和局部。基本和变量概念差不多。没啥意思。

  • files 路径问题
    files 十个对象,对象里面有 k:v 对,v 是读取要处理的文件,多个还可以用数组给组合在一起,k 是经过处理的文件处理完成放的路径和重命名的文件名。
files: {
    'path/to/result.css': 'less.less'
}

最后来看看我整合以上知识点在对 grunt-contrib-less 插件进行配置的代码,能看懂就说明你真的全部懂了,恭喜!:

module.exports = function(grunt) {

    grunt.initConfig({
        less: {
            // 开发环境
            development: {
                options: {
                    // 处理过得文件去掉缩进是压缩版的
                    compress : true,
                    paths: ["assets/css"] // @import 加载文件的路径
                },
                files: {
                    "path/to/result.css": "path/to/source.less" // 将path/to/source.less编译为path/to/result.css
                }
            },
            // 线上环境
            production: {
                options: {
                    paths: ["assets/css"], // @import 加载文件的路径
                    cleancss: true, // 压缩css文件
                    modifyVars: { // 重新定义全局变量
                        imgPath: '"http://mycdn.com/path/to/images"',
                        bgColor: 'red'
                    }
                },
                files: {
                    "path/to/result.css": "path/to/source.less"
                }
            }
        }
    });
    // 插件使用前加载
    grunt.loadNpmTasks('grunt-contrib-less');


    // 开发环境 CMD 窗口请使用 grunt lessDev
    grunt.registerTask('lessDev', ['less:development']);
    // 线上环境 CMD 窗口请使用 grunt lessPro
    grunt.registerTask('lessPro', ['less:production']);

};

这里就没有使用更多的插件演示了,一个就够了。而且 gulp 这么好用,谁去用 grunt 。

请看:gulp 使用指南

举报

相关推荐

0 条评论