专栏首页xingoo, 一个梦想做发明家的程序员Grunt-cli的执行过程以及Grunt加载原理

Grunt-cli的执行过程以及Grunt加载原理

通过本篇你可以了解到:

  • 1 grunt-cli的执行原理
  • 2 nodeJS中模块的加载过程

Grunt-cli原理

grunt-cli其实也是Node模块,它可以帮助我们在控制台中直接运行grunt命令。因此当你使用grunt的时候,往往都是先安装grunt-cli,再安装grunt

如果你使用的是npm install -g grunt-cli命令,那么安装地址如下:

windows:
C:\\Users\\neusoft\\AppData\\Roaming\\npm\\node_modules\\grunt-cli
linux:
/nodejs/node_modules/grunt-cli

在这里可以直接看到编译后的代码。

当执行grunt命令时,会默认先去全局的grunt-cli下找grunt-cli模块,而不会先走当前目录下的node_modulesgrunt-cli。 加载相应的代码后,grunt-cli做了下面的工作:

  • 1 设置控制台的名称
  • 2 获取打开控制台的目录
  • 3 执行completion或者version或者help命令
  • 4 查找grunt,执行相应的命令
  • 5 调用grunt.cli(),继续分析参数,执行相应的任务

源码初探

首先Node的模块都会有一个特点,就是先去读取package.json,通过里面的main或者bin来确定主程序的位置,比如grunt-cli在package.json中可以看到主程序位于:

  "bin": {
    "grunt": "bin/grunt"
  }

找到主程序,下面就看一下它都做了什么:

首先加载必备的模块:

// 与查找和路径解析有关
var findup = require('findup-sync');
var resolve = require('resolve').sync;

//供grunt-cli使用
var options = require('../lib/cli').options;
var completion = require('../lib/completion');
var info = require('../lib/info');

//操作路径
var path = require('path');

然后就是判断下当前的参数,比如如果输入grunt --version,则会同时输出grunt-cli和grunt的版本:

//根据参数的不同,操作不同
if ('completion' in options) {
  completion.print(options.completion);
} else if (options.version) {
  //如果是grunt --version,则进入到这个模块。
  //调用info的version方法
  info.version();
} else if (options.base && !options.gruntfile) {
  basedir = path.resolve(options.base);
} else if (options.gruntfile) {
  basedir = path.resolve(path.dirname(options.gruntfile));
}

其中,cli定义了当前指令参数的别名,没什么关键作用。 info则是相关的信息。

然后才是真正的核心代码!

查找grunt

var basedir = process.cwd();
var gruntpath;
...
try {
  console.log("寻找grunt");
  gruntpath = resolve('grunt', {basedir: basedir});
  console.log("找到grunt,位置在:"+gruntpath);
} catch (ex) {
  gruntpath = findup('lib/grunt.js');
  // No grunt install found!
  if (!gruntpath) {
    if (options.version) { process.exit(); }
    if (options.help) { info.help(); }
    info.fatal('Unable to find local grunt.', 99);
  }
}

可以看到它传入控制台开启的目录,即process.cwd(); 然后通过resolve方法解析grunt的路径。

最后调用grunt.cli()方法

require(gruntpath).cli();

查找grunt

这部分内容,可以广泛的理解到其他的模块加载机制。 resolve是grunt-cli依赖的模块:

var core = require('./lib/core');
exports = module.exports = require('./lib/async');
exports.core = core;
exports.isCore = function (x) { return core[x] };
exports.sync = require('./lib/sync');

其中async为异步的加载方案,sync为同步的加载方案。看grunt-cli程序的最上面,可以发现grunt-cli是通过同步的方式查找grunt的。

sync就是标准的node模块了:

var core = require('./core');
var fs = require('fs');
var path = require('path');

module.exports = function (x, opts) {};

主要看看内部的加载机制吧!

首先判断加载的模块是否是核心模块:

if (core[x]) return x;

core其实是个判断方法:

module.exports = require('./core.json').reduce(function (acc, x) {
    acc[x] = true;//如果是核心模块,则返回该json。
    return acc;
}, {});

核心模块有下面这些:

[
    "assert",
    "buffer_ieee754",
    "buffer",
    "child_process",
    "cluster",
    "console",
    "constants",
    "crypto",
    "_debugger",
    "dgram",
    "dns",
    "domain",
    "events",
    "freelist",
    "fs",
    "http",
    "https",
    "_linklist",
    "module",
    "net",
    "os",
    "path",
    "punycode",
    "querystring",
    "readline",
    "repl",
    "stream",
    "string_decoder",
    "sys",
    "timers",
    "tls",
    "tty",
    "url",
    "util",
    "vm",
    "zlib"
]

回到sync.js中,继续定义了两个方法:

//判断是否为文件
var isFile = opts.isFile || function (file) {
        console.log("查询文件:"+file);
        try { 
            var stat = fs.statSync(file) 
        }catch (err) { 
            if (err && err.code === 'ENOENT') 
                return false 
        }
        console.log("stat.isFile:"+stat.isFile());
        console.log("stat.isFIFO:"+stat.isFIFO());
        return stat.isFile() || stat.isFIFO();
    };

//定义加载的方法
var readFileSync = opts.readFileSync || fs.readFileSync;

//定义扩展策略,默认是添加.js,因此如果模块的名称为grunt.js,可以直接写成grunt
var extensions = opts.extensions || [ '.js' ];

//定义控制台开启的路径
var y = opts.basedir || path.dirname(require.cache[__filename].parent.filename);

至此,会得到两个变量:

  • y 代表控制台开启的路径,查找会从这个路径开始
  • x 加载模块的名称

然后根据文件名称判断加载的方式。加载的方式,主要包括两类:

  • 只传入模块的名称,则从当前路径逐级向上查找
  • 传入标准的路径,直接在该路径下查找
//匹配D:\\workspace\\searcher\\ui-dev\\node_modules\\grunt这种名称
if (x.match(/^(?:\.\.?\/|\/|([A-Za-z]:)?\\)/)) {
        var m = loadAsFileSync(path.resolve(y, x))
            || loadAsDirectorySync(path.resolve(y, x));
        if (m) return m;
    } else {
        var n = loadNodeModulesSync(x, y);
        if (n) return n;
    }
//还没找到就报错
throw new Error("Cannot find module '" + x + "'");

如果正常的使用grunt xxx的时候,就会进入loadNodeMudelsSync()方法中。

这个方法中使用了另一个关键的方法来获取加载的路径:

    function loadNodeModulesSync (x, start) {
        //从模块加载,start是当前目录
        var dirs = nodeModulesPathsSync(start);
        
        console.log("dirs:"+dirs);

        for (var i = 0; i < dirs.length; i++) {
            var dir = dirs[i];
            var m = loadAsFileSync(path.join( dir, '/', x));
            if (m) return m;
            var n = loadAsDirectorySync(path.join( dir, '/', x ));
            if (n) return n;
        }
    }

nodeModulesPathsSync方法可以分解目录,并返回加载模块的路径。 举个例子,如果我的路径是D:/a/b/c 那么会得到如下的数组:

D:/a/b/c/node_modules
D:/a/b/node_modules
D:/a/node_modules
D:/node_modules

执行的代码如下:

function nodeModulesPathsSync (start) {
        var splitRe = process.platform === 'win32' ? /[\/\\]/ : /\/+/;//根据操作系统的类型,判断文件的分隔方法
        var parts = start.split(splitRe);//分解各个目录层次
        
        var dirs = [];
        for (var i = parts.length - 1; i >= 0; i--) {//从后往前,在每个路径上,添加node_modules目录,当做查找路径
            if (parts[i] === 'node_modules') continue;//如果该目录已经是node_modules,则跳过。
            var dir = path.join(
                path.join.apply(path, parts.slice(0, i + 1)),
                'node_modules'
            );

            if (!parts[0].match(/([A-Za-z]:)/)) {//如果是Linux系统,则开头加上/
                dir = '/' + dir;    
            }
            dirs.push(dir);
        }
        return dirs.concat(opts.paths);
    }

获取到了加载的路径后,就一次执行加载方法。

如果是文件,则使用下面的方法加载,其实就是遍历一遍后缀数组,看看能不能找到:

function loadAsFileSync (x) {
        if (isFile(x)) {
            return x;
        }
        
        for (var i = 0; i < extensions.length; i++) {
            var file = x + extensions[i];
            if (isFile(file)) {
                return file;
            }
        }
    }

如果是目录,则尝试读取package.json,查找它的main参数,看看能不能直接找到主程序;如果找不到,则自动对 当前路径/index下进行查找。

//如果是目录
    function loadAsDirectorySync (x) {
        var pkgfile = path.join(x, '/package.json');//如果是目录,首先读取package.json
        if (isFile(pkgfile)) {
            var body = readFileSync(pkgfile, 'utf8');//读取成utf-8的格式
            try {
                var pkg = JSON.parse(body);//解析成json
                if (opts.packageFilter) {//暂时不知道这个参数时干嘛的!
                    pkg = opts.packageFilter(pkg, x);
                }
                //主要在这里,读取main参数,main参数指定了主程序的位置
                if (pkg.main) {
                    var m = loadAsFileSync(path.resolve(x, pkg.main));//如果main中指定的是文件,则直接加载
                    if (m) return m;
                    var n = loadAsDirectorySync(path.resolve(x, pkg.main));//如果main中指定的是目录,则继续循环
                    if (n) return n;
                }
            }
            catch (err) {}
        }
        //再找不到,则直接从当前目录下查找index文件
        return loadAsFileSync(path.join( x, '/index'));
    }

这样,就完成了模块的加载了。

结论

因此,如果你同时安装了本地的grunt-cli、grunt和全局的grunt-cli、grunt,就不会纳闷为什么grunt-cli执行的是全局的、而grunt执行的是当前目录下的node_modules中的。另外,也有助于你了解Node中模块的加载机制。

如果对你有帮助,就点个赞吧!如有异议,还请及时指点!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《像计算机科学家一样思考Java》—— 读后总结

    本书属于入门级的Java书籍,与其他的向编程思想、核心技术不同的是,这本书不是按部就班的讲解java变成知识,而是随着语言的深入慢慢增加知识点。 ?   ...

    用户1154259
  • 使用DOM动态创建标签

    本文是参考《javascript Dom 编程艺术》第八章的内容所写,用到的知识点,就是关于创建平稳的web页面。 使用DOM方法:   getEleme...

    用户1154259
  • 20120918 -- 可计算性

    程序特性规定: 1 程序开始执行时,自认为一切变元的值为0 2 转向无定义符号,执行程序的最后一条指令 时 自动认为停机 y=x+3 y=x+1 y=x+1 ...

    用户1154259
  • 多种方式判断PC端,IOS端,移动端

    1. 通过判断浏览器的userAgent,用正则来判断手机是否是IOS(苹果)和Android(安卓)客户端。

    honey缘木鱼
  • 信用是一个道德问题还是数学问题?区块链给了答案

    1915年5月,英国人类学家布罗尼斯拉夫·卡斯珀·马林诺夫斯基来到了位于新几内亚的特罗布里恩德群岛(Trobriand Islands)进行研究,发现了当地土著...

    企鹅号小编
  • MEF发布编排规范扩展MEF 3.0架构,同时推出SDN/NFV认证

    SDNLAB
  • Cool Example III | 编译原理

    把昨天没看的补上了,连带着今天的一起看,结果看完前面的+1,-1,就低头开了个小差,然后一抬头,整个人都不好了,一脸懵逼,如下图所示。

    仇诺伊
  • php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析

    本文实例讲述了php 下 html5 XHR2 + FormData + File API 上传文件操作。分享给大家供大家参考,具体如下:

    砸漏
  • FastDFS不同步怎么破

    FastDFS是一款开源的分布式文件系统,具体介绍就不说了,有兴趣的可以自行百度下。

    心平气和
  • WebGL简易教程(十五):加载gltf模型

    一般来说,图形渲染总是需要从磁盘数据开始,最终保存到磁盘数据中,保存这种数据的就是3D模型文件。3D模型文件一般会把顶点、索引、纹理、材质等等信息都保存起来,方...

    charlee44

扫码关注云+社区

领取腾讯云代金券