gulp前端自动化构建工具（四）：gulp文件路径处理模块

最新推荐文章于 2021-10-28 16:12:02 发布

franks_t_d

最新推荐文章于 2021-10-28 16:12:02 发布

阅读量7.9k

点赞数 1

分类专栏： Node.js gulp JavaScript / jQuery / Zepto.js 文章标签： gulp gulp自动构建

本文链接：https://blog.csdn.net/franks_t_d/article/details/52787851

版权

JavaScript / jQuery / Zepto.js 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

Node.js

10 篇文章 0 订阅

订阅专栏

gulp

10 篇文章 0 订阅

订阅专栏

本篇前言

上一篇介绍了本工具的独立配置文件，欢迎阅读

本篇还是先把gulpfile.js运行所用的一个方法模块展示出来，模块主要接收gulp.src()中文件对象，对文件自身所在的物理路径及其内部资源引用的路径进行处理，代码中我有做详细的注释，包括方法的单独作用演示。

本模块牵扯到了config-tool.js和config-apps.js两个配置文件，查看上一篇文章即可。

模块代码如下：

var path = require('path'),
    toolConfig = require('./config-tool.js'), // 工具配置
    appsConfig = require('./config-apps.js'), // 应用配置
    COMPILE = toolConfig.compile, // 获取工具配置的设置的所有需编译项
    ROOT = toolConfig.root, // 获取本工具所在物理路径
    SRCDIR = appsConfig.conf().srcDir, // 获取应用配置中的开发版本目录名
    SRCHTMLDIR = appsConfig.conf().srcHtmlDir, 
    SRC_STATIC_DIR = appsConfig.conf().srcStaticDir, // 获取应用配置中的开发版本static目录名
    DIST_STATIC_DIR = appsConfig.conf().distStaticDir, // 获取应用配置中的开发版本static目录名
    DIST_STATIC_DOMAIN = appsConfig.conf().distStaticDomain, // 获取应用配置中的开发版本static使用域名
    HAS_DIST_STATIC_DOMAIN = appsConfig.hasDistStaticDomain(); //获取应用配置中生产版本否存在static域名

var fileAttr = function(){};
fileAttr.prototype.get = function() {
    var src = arguments[0], // 获取文件完成物理路径
        arg = arguments[1], // 获取文件转换所需类型
        srcArr,
        allName,
        nameArr,
        fileDir;
    src = src.replace(/\\/g, "/"); // 替换目录符"\"成"/" 结果如：E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx
    src = fileDir = src.replace(ROOT, ""); // 先替换物理路径目录 结果如：/src/html/app1/js/jsx/index.jsx
    src = src.replace(SRCDIR + '/', ""); // 替换src目录 结果如：/html/app1/js/jsx/index.jsx
    srcArr = src.split('/'); // 切割成数组 结果如：[ 'html', 'app1', 'js', 'jsx', 'index.jsx' ]
    allName = srcArr[srcArr.length - 1].toString(); // 获取带后缀文件名 结果如：index.jsx
    nameArr = allName.split('.'); //切割index.jsx 结果如：[ 'index', 'jsx' ]
    var result;
    switch(arg){
        case 'fileSrcArr':
            result = srcArr; // 获取文件路径数组 如：[ 'html', 'app1', 'js', 'jsx', 'index.jsx' ]
            break;
        case 'fileName':
            result = allName.replace('.'+nameArr[nameArr.length - 1],''); // 获取文件名 如：index
            break;
        case 'fileSuffix':
            result = nameArr[nameArr.length - 1].toString(); // 获取文件后缀 如：jsx/js/css
            break;
        case 'fileNewSrc':
            result = fileDir; // 获取文件完成路径 如： 如：src/html/app1/js/jsx/index.jsx
            break;
        case 'fileDir':
            result = fileDir.replace(allName,''); // 获取文件所在路径 如：src/html/app1/js/jsx/
            break;
        case 'fileModDir': // 获取文件路径中的项目信息
            var flog = false,
                cdir;
            for (var key in COMPILE) { // 提取编译目录为截取右边界
                var cPath = COMPILE[key].path,
                    cPathArr = cPath.split('/'); // 获取编译目录名
                if (src.indexOf('/'+ cPathArr[0] +'/') !== -1) {
                    cdir = cPathArr[0];
                    flog = true;
                    break;
                }
            }
            result = flog ? src.substring(0, src.indexOf('/'+ cdir +'/')) : src.replace(allName, ''); 
            // ↑ 如果编译名存在，则以编译目录名作为右边界，截取当前文件对象的目录结构作抛出。
            // 如：src为“/html/app1/js/jsx/index.jsx”，遍历到"jsx"的编译目录后，抛出“/html/apps1/js/”
            // 注：左边界没有截取，还是包含“/html/”本处抛出到gulpfile有多种用途
            break;
        default:
            console.log("获取文件属性时发生错误，请检查文件路径是否正确！");
            return false;
    }
    return result;
};
/**
 * 获取文件路径（去除根目录）
 * E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx  ===>  src/html/app1/js/jsx/index.jsx
 * E:/gitwww/demo/gulp/src/html/app1/js/index.js  ===>  src/html/app1/js/index.js
 */
fileAttr.prototype.newSrc = function(){
	var src = arguments[0],
		that = this;
	return that.get(src,'fileNewSrc'); 
};
/**
 * 获取文件名
 * E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx  ===>  index
 * E:/gitwww/demo/gulp/src/html/app1/js/index.min.js  ===>  index.min
 */
fileAttr.prototype.name = function() {
    var src = arguments[0],
        that = this;
    return that.get(src, 'fileName');
};
/**
 * 获取文件格式后缀
 * E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx  ===>  jsx
 * E:/gitwww/demo/gulp/src/html/app1/js/index.js  ===>  js
 */
fileAttr.prototype.suffix = function() {
    var src = arguments[0],
        that = this;
    return that.get(src, 'fileSuffix');
};
/**
 * 获取文件所在目录
 * E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx  ===>  src/html/app1/js/jsx/
 * E:/gitwww/demo/gulp/src/html/app1/js/index.js  ===>  src/html/app1/js/
 */
fileAttr.prototype.dir = function() {
    var src = arguments[0],
        that = this;
    return that.get(src, 'fileDir');
};
/**
 * 获取文件所在的模块
 * E:/gitwww/demo/gulp/src/html/app1/js/jsx/index.jsx  ===>  html/app1/js/
 * E:/gitwww/demo/gulp/src/html/app1/js/index.js  ===>  html/app1/js/
 */
fileAttr.prototype.modDir = function() {
    var src = arguments[0],
        that = this;
    return that.get(src, 'fileModDir');
};

//针对dist版，修改文件引用路径
fileAttr.prototype.changePath = function() {
    var that = this;
        src = arguments[0], // 引用资源的URL
    	pageRoot = arguments[1]; //当前页面的路径
    /**
     * 引用域或cdn的资源
     * 
     * config-apps.js设置distStaticDomain域名为"http://localhost:8871"时，如下：
     * 
     * http://localhost/jquery/3.0.0/jquery.js => http://localhost:8871/jquery/3.0.0/jquery.js
     * http://localhost:8080/jquery/3.0.0/jquery.js => http://localhost:8871/jquery/3.0.0/jquery.js
     * //cdn.bootcss.com/jquery/3.0.0/jquery.js => //cdn.bootcss.com/jquery/3.0.0/jquery.js
     * 
     * 未设置域名时：
     * 
     * http://localhost/jquery/3.0.0/jquery.js => http://localhost/jquery/3.0.0/jquery.js
     * http://localhost:8080/jquery/3.0.0/jquery.js => http://localhost:8080/jquery/3.0.0/jquery.js
     * //cdn.bootcss.com/jquery/3.0.0/jquery.js => //cdn.bootcss.com/jquery/3.0.0/jquery.js
     */
    if (src.substring(0, 4) === 'http' || src.substring(0, 2) === '//') {
        if(HAS_DIST_STATIC_DOMAIN && src.indexOf("localhost") !== -1 && src.indexOf(DIST_STATIC_DOMAIN) === -1){
            //使用了localhost域，但与dist域的端口不一致，有可能是src资源域。
            var port = DIST_STATIC_DOMAIN.substring(DIST_STATIC_DOMAIN.indexOf('t:')+2,DIST_STATIC_DOMAIN.length+1);
            //存在端口号
            if(src.indexOf('t:') !== -1){ 
                var a = src.substring(src.indexOf("//")+2,src.length+1);
                var b = [];
                b = a.split('/');
                b[0] = "localhost:"+port;
                a = b.join('/');
                src = "http://"+a;
            }
            //不存在端口号
            else{
                src = src.replace("localhost","localhost:"+port);
            }
        }
        return src; 
    }
    /**
     * 引用本地的位置为公共资源目录
     * 
     * config-apps.js设置distStaticDomain域名为"http://localhost:8871"时，如下：
     * 
     * /static/path/to/file/demo.js => http://localhost:8871/path/to/file/demo.js
     * ../../../static/path/to/file/demo.js => http://localhost:8871/path/to/file/demo.js
     *
     * 未设置域名时：
     * 
     * /static/path/to/file/demo.js => /static/path/to/file/demo.js
     * ../../../static/path/to/file/demo.js => /static/path/to/file/demo.js
     */
    else if (src.indexOf(SRC_STATIC_DIR) !== -1) {
        DIST_STATIC_DOMAIN = HAS_DIST_STATIC_DOMAIN ? DIST_STATIC_DOMAIN : '/'+ DIST_STATIC_DIR;
        src = src.substring(src.indexOf(SRC_STATIC_DIR) + SRC_STATIC_DIR.length, src.length+1);
        return DIST_STATIC_DOMAIN + src;
    }
    /**
     * 引用的本地位置为模块自身资源目录
     * 
     * config-apps.js设置distStaticDomain域名为"http://localhost:8871"时，如下：
     * 
     * ./js/demo.js => http://localhost:8871/apps/app1/js/demo.js
     * js/demo.js => http://localhost:8871/apps/app1/js/demo.js
     *
     * 未设置域名时：
     * 
     * ./js/demo.js => /static/apps/app1/js/demo.js
     * js/demo.js => /static/apps/app1/js/demo.js
     */
    else { 
        DIST_STATIC_DOMAIN = HAS_DIST_STATIC_DOMAIN ? DIST_STATIC_DOMAIN : '/'+ DIST_STATIC_DIR;
        src = src.substring(0,2) === './' ? src.substring(2, src.length + 1) : src ;
        var thisMod = that.modDir(pageRoot);
            thisMod = thisMod.replace(SRCHTMLDIR+'/','');
        return DIST_STATIC_DOMAIN + '/apps/' + thisMod + src;
    }
    
}
/*console.log(fileAttr.prototype.newSrc('E:/gitwww/demo/gulp/src/html/app1/js/index.min.js'));
console.log('changePath:http://localhost/jquery/3.0.0/jquery.js => '+ fileAttr.prototype.changePath('http://localhost/jquery/3.0.0/jquery.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath:http://localhost:8080/jquery/3.0.0/jquery.js => '+ fileAttr.prototype.changePath('http://localhost:8080/jquery/3.0.0/jquery.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath://cdn.bootcss.com/jquery/3.0.0/jquery.js => '+ fileAttr.prototype.changePath('//cdn.bootcss.com/jquery/3.0.0/jquery.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath:/static/path/to/file/demo.js => '+ fileAttr.prototype.changePath('/static/path/to/file/demo.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath:../../../static/path/to/file/demo.js => '+ fileAttr.prototype.changePath('../../../static/path/to/file/demo.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath:./js/demo.js => '+ fileAttr.prototype.changePath('./js/demo.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));
console.log('changePath:js/demo.js => '+ fileAttr.prototype.changePath('js/demo.js','E:/gitwww/demo/gulp/src/html/app1/index.html'));*/
module.exports = new fileAttr();