前端修仙之路---一、如何用gulp搭建一套web前端开发框架
引言
相信从事web前端开发的朋友都知道,现在流行的Vue、AngularJS等框架中,它们都有独立的脚手架来创建项目,比如Vue有vue-cli,Angular有angula-cli。脚手架可以一键生成你的项目模版,包括依赖库,免去你手动安装各种插件,寻找各种cdn并一个个引入的麻烦。而且在开发项目中加入了热启动,当编辑保存之后,页面会相应的自动更新,免去了手动刷新的麻烦。那为什么有这么好的脚手架了,直接用它们不就好了吗?当然我不是闲着没事做,上面提到的脚手架创建的项目是比较适用于单页面项目的,这对于要开发多页项目的朋友就不是很方便了。我们需要根据自身来量身打造一套项目框架,方便在日后开发中能更上一层楼。那么就开始讲讲如何用gulp自动构建工具来自定义一套框架。
一、环境准备
安装nodeJS环境
下载链接为:http://nodejs.cn/download/
进入下面的下载界面,选择电脑相对应的文件下载即可。
如果下载的是压缩包文件,解压之后是需要进入系统中配置环境变量的,比较麻烦。推荐大家下载安装包,下载之后无脑下一步安装就好了,环境变量这些它都会给你搞定的。安装这块就不做重复累赘了。
安装成功或配置好环境变量后,在cmd控制台输入 node -v 会出现如下图响应,则说明安装成功。
二、框架搭建
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来部署开发环境。
人生没有彩排,每天都是现场直播!加油!
前端修仙之路---一、如何用gulp搭建一套web前端开发框架的更多相关文章
- 运维(SA)修仙 之路
运维(SA)修仙 之路: 大纲: 系统 ,网络 ,数据库,开发 系统 :linux(cent OS && ubuntu) 网络 :路由,防火墙,安全 数据库:mysql, mong ...
- 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截
程序猿修仙之路--数据结构之你是否真的懂数组? 数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构 .要想在之后的江湖历练中通关,数据结构必不可少. ...
- 《带你装B,带你飞》pytest修仙之路3 - setup/teardown
1. 简介 学过unittest的都知道里面用前置和后置setup和teardown非常好用,在每次用例开始前和结束后都去执行一次.当然还有更高级一点的setupClass和teardownClass ...
- 《带你装B,带你飞》pytest修仙之路5 - yield操作
1. 简介 上一篇中,我们刚刚实现了在每个用例之前执行初始化操作,那么用例执行完之后如需要清除数据(或还原)操作,可以使用 yield 来实现.fixture通过scope参数控制setup级别,既然 ...
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 用grunt搭建自动化的web前端开发环境-完整教程
原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 用grunt搭建自动化的web前端开发环境
用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...
- grunt搭建自动化的web前端开发环境(转)
1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了, ...
随机推荐
- x86架构:保护模式下加载并运行用户程序
本章的代码分3个模块: MBR 引导:加载内核core程序 core:包含内核代码段(从磁盘加载用户程序并重定位).内核数据段(存放api名称.临时缓冲.字符串等).API段(供用户程序调用) 用户程 ...
- js的栈内存和堆内存
栈内存和堆内存在了解一门语言底层数据结构上,挺重要的,做了个总结 JS中的栈内存堆内存 JS的内存空间分为栈(stack).堆(heap).池(一般也会归类为栈中). 其中栈存放变量,堆存放复杂对象, ...
- requests上传文件,又要上传data的处理
前话 最近在自己学着弄接口自动化框架,因为要封装一个发送请求的父类,其中有考虑到上传文件,以及同时上传文件,和传递其他字段数据,遇到点小问题 这里解决下. 实例的接口数据 参考文档 来自fastapi ...
- Flask框架(二):路由与蓝图
一.路由 使用 route() 装饰器来把函数绑定到 URL: @app.route('/') def index(): return 'Index Page' @app.route("/h ...
- 2019.12.9Java课堂总结
今天在课堂上进行了练习.现进行成果及不足汇报: 1.完成了登录界面的设计 2.完成了数据库的连接. 3.完成了数据库表的设计 4.完成了变量的定义与初始化以及get.set的设立. 5.对整体框架 ...
- Java日志框架(一)
在项目开发过程中,我们可以通过 debug 查找问题.而在线上环境我们查找问题只能通过打印日志的方式查找问题.因此对于一个项目而言,日志记录是一个非常重要的问题.因此,如何选择一个合适的日志记录框架也 ...
- 注重代码习惯,Python零基础从这本书籍开始!
笨办法学 Python是Zed Shaw 编写的一本Python入门书籍.适合对计算机了解不多,没有学过编程,但对编程感兴趣的朋友学习使用.这本书以习题的方式引导读者一步一步学习编 程,从简单的打印一 ...
- Docker初探之运行RabbitMQ消息队列服务
我们平时在使用RabbitMQ是基于Windows操作系统的,在使用前需要安装Er-Lang和RabbitMQ服务程序,如果版本不对RabbitMQ就启动失败,安装流程也比较麻烦. 但如果在Docke ...
- MarkDown语法的详细使用教程
MarkDown语法 Markdown是一种纯文本格式的标记语言.通过简单的语法可以使普通文本内容具有一定的格式. 一. 标题 在要设置为标题的文字前面加#和空格 一个#和空格是一级标题,两个##和空 ...
- 计算vtable的大小
在ClassFileParser::parseClassFile()函数中会计算vtable和itable所需要的大小,因为vtable和itable是内嵌在Klass中的,parseClassFil ...