引言
相信从事web前端开发的朋友都知道,现在流行的Vue、AngularJS等框架中,它们都有独立的脚手架来创建项目,比如Vue有vue-cli,Angular有angula-cli。脚手架可以一键生成你的项目模版,包括依赖库,免去你手动安装各种插件,寻找各种cdn并一个个引入的麻烦。而且在开发项目中加入了热启动,当编辑保存之后,页面会相应的自动更新,免去了手动刷新的麻烦。那为什么有这么好的脚手架了,直接用它们不就好了吗? 当然我不是闲着没事做,上面提到的脚手架创建的项目是比较适用于单页面项目的,这对于要开发多页项目的朋友就不是很方便了。我们需要根据自身来量身打造一套项目框架,方便在日后开发中能更上一层楼。那么就开始讲讲如何用gulp自动构建工具来自定义一套框架。 这篇文章比较长,建议大家收藏后仔细花点时间认真看完。01开发环境搭建
安装nodeJS环境
下载链接为:http://nodejs.cn/download/
框架搭建
1.打开cmd控制台,进入项目目录,运行 mkdir myTemplate 命令来创建一个名为myTemplate的空文件夹,然后进入该文件夹。
2、通过npm init 来初始化我们的框架,这一步会生成一个pakeage.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 的文件。这一步我们用前端开发工具来弄,因为其中也涉及到编码。
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。
![b0c06b740c1131578e832c98da37d289.png](https://i-blog.csdnimg.cn/blog_migrate/ac307a27e5cabc82c450c35a40075dea.png)
得到了再失去,总比从来就没有得到更伤人。
--《追风筝的人》