前端进阶之路-一如何用gulp搭建一套web前端开发框架

Posted 2021-03-30 padding2020

引言

相信从事web前端开发的朋友都知道，现在流行的Vue、AngularJS等框架中，它们都有独立的脚手架来创建项目，比如Vue有vue-cli，Angular有angula-cli。脚手架可以一键生成你的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦。而且在开发项目中加入了热启动，当编辑保存之后，页面会相应的自动更新，免去了手动刷新的麻烦。那为什么有这么好的脚手架了，直接用它们不就好了吗？

当然我不是闲着没事做，上面提到的脚手架创建的项目是比较适用于单页面项目的，这对于要开发多页项目的朋友就不是很方便了。我们需要根据自身来量身打造一套项目框架，方便在日后开发中能更上一层楼。那么就开始讲讲如何用gulp自动构建工具来自定义一套框架。

这篇文章比较长，建议大家收藏后仔细花点时间认真看完。

01

开发环境搭建

安装nodeJS环境

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

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

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

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

02

框架搭建

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

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

 

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

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

3、gulp工具的安装。我们接下来创建的框架核心是gulp自动化构建工具，

“gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。”

这段是它官网的介绍。有兴趣的可以去它官网了解下，里面有详细的文档和很多实用的工具插件。

gulp官网链接：https://www.gulpjs.com.cn/  

当然，大家也可以自行度娘。

这个工具的安装我们通过node来安装。

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

 

然后按照gulp插件包，继续在控制台中输入：

npm install gulp --save

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

 可以在dependencies中看到。

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

 

 创建好文件之后，在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。

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

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

得到了再失去，总比从来就没有得到更伤人。

--《追风筝的人》