当前位置: 首页>前端>正文

新建前端仓库 如何搭建一个前端框架

引言

相信从事web前端开发的朋友都知道,现在流行的Vue、AngularJS等框架中,它们都有独立的脚手架来创建项目,比如Vue有vue-cli,Angular有angula-cli。脚手架可以一键生成你的项目模版,包括依赖库,免去你手动安装各种插件,寻找各种cdn并一个个引入的麻烦。而且在开发项目中加入了热启动,当编辑保存之后,页面会相应的自动更新,免去了手动刷新的麻烦。那为什么有这么好的脚手架了,直接用它们不就好了吗?当然我不是闲着没事做,上面提到的脚手架创建的项目是比较适用于单页面项目的,这对于要开发多页项目的朋友就不是很方便了。我们需要根据自身来量身打造一套项目框架,方便在日后开发中能更上一层楼。那么就开始讲讲如何用gulp自动构建工具来自定义一套框架。

一、环境准备

安装nodeJS环境

下载链接为:http://nodejs.cn/download/

新建前端仓库 如何搭建一个前端框架,新建前端仓库 如何搭建一个前端框架_新建前端仓库,第1张

 

进入下面的下载界面,选择电脑相对应的文件下载即可。

如果下载的是压缩包文件,解压之后是需要进入系统中配置环境变量的,比较麻烦。推荐大家下载安装包,下载之后无脑下一步安装就好了,环境变量这些它都会给你搞定的。安装这块就不做重复累赘了。

安装成功或配置好环境变量后,在cmd控制台输入 node -v 会出现如下图响应,则说明安装成功。

新建前端仓库 如何搭建一个前端框架,新建前端仓库 如何搭建一个前端框架_新建前端仓库_02,第2张

二、框架搭建

1、打开cmd控制台,进入项目目录,运行 mkdir myTemplate 命令来创建一个名为myTemplate的空文件夹,然后进入该文件夹。

新建前端仓库 如何搭建一个前端框架,新建前端仓库 如何搭建一个前端框架_构建工具_03,第3张

 2、通过npm init 来初始化我们的框架,这一步会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个项目中。

 

新建前端仓库 如何搭建一个前端框架,新建前端仓库 如何搭建一个前端框架_新建前端仓库_04,第4张

填写相应的信息即可,不想填的也可以直接回车下一步,最后输入 yes 就好了。

成功后,我们可以看到在刚刚的文件夹中有一个package.json文件,用记事本打开,可以看到里面就包含了刚刚填写的一些信息。

新建前端仓库 如何搭建一个前端框架,新建前端仓库 如何搭建一个前端框架_构建工具_05,第5张

3、gulp工具的安装。我们接下来创建的框架核心是gulp自动化构建工具,“gulp 将开发流程中让人痛苦或耗时的任务自动化,从而减少你所浪费的时间、创造更大价值。”这段是它官网的介绍。有兴趣的可以去它官网了解下,里面有详细的文档和很多实用的工具插件。gulp官网链接:https://www.gulpjs.com.cn/  当然,大家也可以自行度娘。这个工具的安装我们通过node来安装。

首先先安装一下gulp-cli这个脚手架,可以用它来执行gulp命令的。通过npm install -global gulp-cli 命令安装,安装完成后,运行 gulp --version 来检查是否安装成功。

新建前端仓库 如何搭建一个前端框架,新建前端仓库 如何搭建一个前端框架_构建工具_06,第6张

 

然后按照gulp插件包,继在控制台中输入:npm install gulp --save  

 

新建前端仓库 如何搭建一个前端框架,新建前端仓库 如何搭建一个前端框架_gulp_07,第7张

上面的--save可以将安装的包名保存在package.json文件中。

新建前端仓库 如何搭建一个前端框架,新建前端仓库 如何搭建一个前端框架_新建前端仓库_08,第8张

 

 可以在dependencies中看到。

然后我们在这个继续在这个框架目录下创建一个名为 gulpfile.js 的文件。这一步我们用前端开发工具来弄,因为其中也涉及到编码。

 

新建前端仓库 如何搭建一个前端框架,新建前端仓库 如何搭建一个前端框架_官网_09,第9张

 创建好文件之后,在js中写入以下的代码

const gulp = require('gulp');

const testGulp = function (cb){
    console.log("执行了~~~~~~~~~~");
  cb();
}
const prodbuild = gulp.series(testGulp);
gulp.task('default',prodbuild);

 

我们来用glup构建工具执行一下testGulp这个函数

在cmd控制台中输入: gulp default 或者直接输入 gulp 都可以,default是默认执行的命令,对应上面的 gulp.task('default',prodbuild);中的default。

新建前端仓库 如何搭建一个前端框架,新建前端仓库 如何搭建一个前端框架_构建工具_10,第10张

看到正常打印了内容,说明能通过gulp构建工具来执行函数了。

那么这章就先讲到这里,下一章我们再学习怎么通过gulp来部署开发环境。

人生没有彩排,每天都是现场直播!加油! 




https://www.xamrdz.com/web/25w1922107.html

相关文章: