一起来构建前端工具链吧~(开发项目)

继续上篇介绍的 nuts 的内容,在我们通过 create 命令之后,就可以使用 dev 命令去进行项目的开发了~那么这个 dev 命令究竟都执行了哪些功能呢?

首先,我们需要将我们的源代码进行预编译无论是从ES6到ES5,还是从scss到css,我们最终的目标代码都是和源代码不一样的,那么我们在启动项目之后就需要将这些目标代码和源代码分开来,所以在 dev 命令之中我们主要做的就是两件事,一个是预编译我们的代码到正确的路径上,另一个就是对开发环境正确性的检查,其实对于预编译的部分我们并没有做什么特别的处理,都是基本的转换和编译,更多的代码都是在检测目录是否存在或者静态服务器是否正常启动之类的逻辑处理,对于源代码的处理上,我这里就仅仅只举一个小栗子来说明一下大致的逻辑,其他的文件基本都是如此处理了。

/**
 * 对项目中的scss文件进行编译
 * @param input
 * @param output
 */
function compassSass(input, output) {
    controller.packages._core.src(input)
        .pipe(controller.packages._plumber())
        .pipe(controller.packages._compass({
            includePaths: controller.config.sassLib
        }))
        .pipe(controller.packages._connect.reload())
        .pipe(controller.packages._core.dest(output));
}

我们通过一个个这样的命令,通过传入输入输出目录来将代码进行预编译,并通过第三方或者自己的配置去做特殊的处理,例如上面代码中的compass任务,引入的就是我自己的scss库,本来之前是使用 compass 的,但是在代码迁移到全node的环境后,为了去除ruby的依赖,compass同样也面临着被替换,因此自己根据平日的需求写了一个运行在node上的scss库,这样就可以不再安装ruby了。接下来演示的就是关于静态服务器的部分了,在这里我采用的是 gulp-connect,原本打算自己写一个的,但是发现在处理自动刷新的时候只能通过node的watch方法进行文件变动的监控,感觉效率上太差了,所以暂时放弃,就使用了更加优秀的库来代替,当然了,以后有时间我会再尝试尝试的~反正现在这个结构替换起来还是相当容易的~

在这个任务中,首先先检查命令行中传入的端口号和项目路径是否合法,路径好说,那么端口又如何检测合法性呢?我在这里的思路是通过node中的net模块去先启动这个端口号,通过监听的结果来判断当前端口是否被占用,如果占用就返回false,如果没有被占用,那么就先关闭自己,释放端口后返回true,这样在回调函数中就可以判断是否可以启动服务器,同时,在这里我还做了两个功能点,一个是在命令行中打印出当前本机的IP地址和端口号,这样我们就可以方便的复制链接到浏览器中打开页面。那么如何取得当前本机的IP地址呢?

在 util 目录下的get_ip_address文件中,我们 os 模块中的网络接口来拿到整个网络对象,然后循环遍历出IPv4对象下的地址,感兴趣的同学可以看看这个模块下返回的内容~

随后在得到IP地址后拼接出完整的 http 请求后我又在想,如果我需要在移动端上打开页面该怎么办呢?难道要在手机上输入这么长的链接?如果能在手机上一键打开就好了,可以现在我总不能自己再写一个程序安装在手机上吧。。。后来想到现在的手机都有了扫描二维码的功能,如果我在命令行上显示链接的二维码,那我拿手机扫描一下不就好了嘛~于是我搜索了一遍 npm,找到了这个库 qrcode-terminal,它可以接收一段字符串,并通过二维码的形式显示在命令行上,效果如下所示:

这样以后在手机上开发页面的时候就可以扫一扫啦~当然现在还有一个功能还在构想中,如果在我执行命令的时候能自动启动浏览器就好了,接下来再完善这里的功能吧~

最后在开发完成项目之后提交代码前我们需要将开发过程中的过程文件都删除掉咯,接下来我们只需要执行 clean 命令就可以让nuts去自动删除我们产生的垃圾文件了,并且在clean任务中我会过滤掉中文名称的文件,毕竟我们的路径最好还是使用英文比较合适啦,中文文件名总显得那么不伦不类的。那剩下还有两个命令 include 和 build,build 命令很好理解,是最终上线时进行编译的命令,在这个命令中我们需要做版本管理和CDN路径的处理了,那 include 命令呢?在下一篇中我会介绍如何使用node来生成文件去控制静态资源的引入~( ̄︶ ̄)

时间: 2024-10-12 20:18:54

一起来构建前端工具链吧~(开发项目)的相关文章

使用Idea工具nodeJS+mysql开发项目

一.MySQL Server的安装 1.mysql官网下载文件包:[我使用的版本是:mysql_5.7.17] 2.解压Zip压缩包: 3.安装:命令行:D:\soft\mysql-5.7.17-winx64\bin> mysqld install [注意点:以管理员身份打开cmd] 补充:如何使用管理员身份打开cmd? 操作:1)打开如下路径:C:\Windows\System32 2)找到cmd.exe; 3)单击"右键",以管理员的身份打开: 4.修改安装mysql目录下的

为什么要用golang语言进行区块链编程开发?

Go语言现在常常被用来做去中心化系统(decentralised system).其他类型的公司也都把Go用在产品的核心模块中,并且它在网站开发中也占据了一席之地. 我们在决定做Karachain的时候,考量(benchmark)了C,C++, Java, 甚至NodeJs,我们也试着用一些算法来作为考量标准.而现在,我表示我们正在用Go来实现此目标,并且感觉不错. 啊,现在建造一个区块链,恰如当时建造一个操作系统! 我们在建造像区块链平台这样复杂的东西时,把注意力放在了那些核心问题上.经过差不

嵌入式交叉工具链编译

读者可能会有疑问,为什么要用交叉编译器?交叉编译通俗地讲就是在一种平台上编译出能运行在体系结构不同的另一种平台上的程序,比如在PC平台 (X86 CPU)上编译出能运行在以ARM为内核的CPU平台上的程序,编译得到的程序在X86 CPU平台上是不能运行的,必须放到ARM CPU平台上才能运行,虽然两个平台用的都是Linux系统.这种方法在异平台移植和嵌入式开发时非常有用.相对与交叉编译,平常做的编译叫本地编译,也 就是在当前平台编译,编译得到的程序也是在本地执行.用来编译这种跨平台程序的编译器就

5.3交叉工具链使用

实验三 交叉工具链使用 实验目的 1.掌握交叉工具链的安装.配置方法 2.掌握交叉编译.调试方法 实验要求 安装.配置arm-linux交叉工具链 交叉编译"输入-回显"程序: 将程序"嵌入"到开发板运行: ? 实验步骤 一.安装.配置arm-linux交叉工具链 1.将教学资源\toochain目录内的交叉工具链压缩包通过SMB共享拷贝到Linux宿主机 ? 2.将工具链软件包加压到根目录 3.将工具链bin目录加入PATH环境变量 打开配置文件: 添加到最后的信

做区块链技术开发 区块链项目你要弄明白这些

目前,区块链技术开发的热潮不减,而区块链技术项目也逐渐增加!2018年工信部发布的<区块链产业白皮书>也显示,截止今年3月,国内以区块链技术开发为主营业务的项目数量超过400个!产业规模虽初露头角,但任然存在巨大的空白市场,新兴行业依旧具有很大的发展潜力!抓住时机将是获得风口行业红利的重点! 1.区块链技术开发行业情况 面对区块链技术开发这个热点行业,很多技术实力不够专业的小公司也扎进来"骗吃骗喝",行业乱相导致真心想做区块链技术开发项目的人 无法选择!因此在面对区块链行业

Docker,用任何工具链和任何语言来构建任何应用

在看过Docker的两个Hello World的程序后,我们对Docker有了一个大概的感性的认识,那么Docker是到底是什么呢?Docker是一个面向开发者和系统管理员编译,装载,和运行分布式应用的开放式平台.它包括了Docker引擎,一个可移植的,轻量级的,运行时环境和打包工具,还包括了Docker Hub,一个用于共享应用和自动化工作流的云服务. Docker和一般的虚拟机有什么不同之处 对一般的虚拟机而言,每个虚拟化的应用包括的不仅仅是这个应用本身(大概数十M)以及应用所必需的bin文

DIY FRDM-KL25Z开发环境 -- 基于GNU工具链

IDE大行其道的今天,一键make极大的便利了开发的同时,也每每让各种半路出家的猿们遇到工具链的问题感到束手无策(不就是说自己嘛?^_^!!!).也玩过不少板子了,始终没去深究工具链方面的问题,对于嵌入式开发环境的构建也只能是依葫芦画瓢,掌握程度也就勉强做到能应付工作,但还缺乏单兵作战能力,从零开始构建开发环境还真没把握搞定.宅了一天,无意中看到老外写的关于FRDM-KL25开发环境构建的博文,感觉写的很不错,转载做个备忘,这段时间准备好好理理清楚. Part 1: Setting up ARM

Gulp安装及配合组件构建前端开发一体化(转)

Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev

Python 开发工具链全解

可能刚开始学习Python时,有人跟你说可以将源文件所在的文件夹添加到 PYTHONPATH环境变量中,然后可以从其他位置导入此代码.在大多数情况下,这个人常常忘记补充这是一个非常糟糕的主意.有些人在互联网上发现了这一点,其他人却要看自己付出代价后才意识到.还有太多人(特别是非程序员)真的相信除此外没有别的办法了. 这篇文章适用于所有类型的 Python 学习者,因为即使你知道存在替代方案,也难以掌握. Python的工具链令人困惑,因为有许多软件是相互依赖的,并且它们的关注点也有很多重叠.很难