引言

相信从事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前端开发框架的更多相关文章

  1. 运维(SA)修仙 之路

    运维(SA)修仙 之路: 大纲: 系统 ,网络 ,数据库,开发 系统 :linux(cent OS && ubuntu)  网络 :路由,防火墙,安全  数据库:mysql, mong ...

  2. 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截

    程序猿修仙之路--数据结构之你是否真的懂数组?   数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构  .要想在之后的江湖历练中通关,数据结构必不可少. ...

  3. 《带你装B,带你飞》pytest修仙之路3 - setup/teardown

    1. 简介 学过unittest的都知道里面用前置和后置setup和teardown非常好用,在每次用例开始前和结束后都去执行一次.当然还有更高级一点的setupClass和teardownClass ...

  4. 《带你装B,带你飞》pytest修仙之路5 - yield操作

    1. 简介 上一篇中,我们刚刚实现了在每个用例之前执行初始化操作,那么用例执行完之后如需要清除数据(或还原)操作,可以使用 yield 来实现.fixture通过scope参数控制setup级别,既然 ...

  5. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  6. 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  7. 用grunt搭建自动化的web前端开发环境-完整教程

    原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...

  8. 用grunt搭建自动化的web前端开发环境

    用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...

  9. grunt搭建自动化的web前端开发环境(转)

    1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了, ...

随机推荐

  1. x86架构:保护模式下加载并运行用户程序

    本章的代码分3个模块: MBR 引导:加载内核core程序 core:包含内核代码段(从磁盘加载用户程序并重定位).内核数据段(存放api名称.临时缓冲.字符串等).API段(供用户程序调用) 用户程 ...

  2. js的栈内存和堆内存

    栈内存和堆内存在了解一门语言底层数据结构上,挺重要的,做了个总结 JS中的栈内存堆内存 JS的内存空间分为栈(stack).堆(heap).池(一般也会归类为栈中). 其中栈存放变量,堆存放复杂对象, ...

  3. requests上传文件,又要上传data的处理

    前话 最近在自己学着弄接口自动化框架,因为要封装一个发送请求的父类,其中有考虑到上传文件,以及同时上传文件,和传递其他字段数据,遇到点小问题 这里解决下. 实例的接口数据 参考文档 来自fastapi ...

  4. Flask框架(二):路由与蓝图

    一.路由 使用 route() 装饰器来把函数绑定到 URL: @app.route('/') def index(): return 'Index Page' @app.route("/h ...

  5. 2019.12.9Java课堂总结

    今天在课堂上进行了练习.现进行成果及不足汇报: 1.完成了登录界面的设计 2.完成了数据库的连接. 3.完成了数据库表的设计   4.完成了变量的定义与初始化以及get.set的设立. 5.对整体框架 ...

  6. Java日志框架(一)

    在项目开发过程中,我们可以通过 debug 查找问题.而在线上环境我们查找问题只能通过打印日志的方式查找问题.因此对于一个项目而言,日志记录是一个非常重要的问题.因此,如何选择一个合适的日志记录框架也 ...

  7. 注重代码习惯,Python零基础从这本书籍开始!

    笨办法学 Python是Zed Shaw 编写的一本Python入门书籍.适合对计算机了解不多,没有学过编程,但对编程感兴趣的朋友学习使用.这本书以习题的方式引导读者一步一步学习编 程,从简单的打印一 ...

  8. Docker初探之运行RabbitMQ消息队列服务

    我们平时在使用RabbitMQ是基于Windows操作系统的,在使用前需要安装Er-Lang和RabbitMQ服务程序,如果版本不对RabbitMQ就启动失败,安装流程也比较麻烦. 但如果在Docke ...

  9. MarkDown语法的详细使用教程

    MarkDown语法 Markdown是一种纯文本格式的标记语言.通过简单的语法可以使普通文本内容具有一定的格式. 一. 标题 在要设置为标题的文字前面加#和空格 一个#和空格是一级标题,两个##和空 ...

  10. 计算vtable的大小

    在ClassFileParser::parseClassFile()函数中会计算vtable和itable所需要的大小,因为vtable和itable是内嵌在Klass中的,parseClassFil ...