前端服务器本地搭建分三阶段:

1、Node.js的安装

2Npm环境配置

3编写JS文件

1、Node.js安装:

  如图所示:

    

  Next:

    

  选择I accept 然后Next:

    

  选择安装文件的位置,然后Next:

    

  Next:

    

  选择Install:

    

  等待安装:

    

  Node.js 安装完成,选择Finish;接下来安装服务需要NPM。

2、Npm环境配置:

  点击计算机左下角开始图标输入CMD,找出命令输入框。先查看Node.js是否安装正常,输入命令:node -v 回车。查看Node版本号,如下,若存在则安装正常;不存在版本号则需要添加环境变量或者重新安装。

    

  确定Node安装正常后,开始安装NPM各种依赖,下面依次执行命令:

  输入命令:npm install gulp del -g 回车并等待安装命令执行完毕

    

    

  安装完成如图所示(后面执行的命令完成后类似)

  输入命令:npm install gulp-uglify -g

    

  执行完成后,输入命令:npm install gulp-minify-css -g

    

  执行完成后,输入命令:npm install gulp-concat -g

    

  执行完成后,输入命令:npm install browser-sync -g

    

  执行完成后,输入命令:npm install run-sequence -g

    

  以上命令全部执行完成后,在要存储源代码的目录下(若没有可以新建一个),执行以下命令:

  比如要在F盘下的dist目录下存放源代码,则可以DOS命令一步步转到该目录下,或者找到该文件路径后直接在路径行输入CMD即可,如图:

    

  //下面命令写在具体的文件内,如上图内的路径中

  输入命令:npm install gulp del --save-dev

    

  输入命令:npm install gulp-uglify --save-dev

    

  输入命令:npm install gulp-minify-css --save-dev

    

  输入命令:npm install gulp-concat --save-dev

    

  输入命令:npm install browser-sync --save-dev

    

  输入命令:npm install run-sequence --save-dev

    

  以上命令执行完成后会在D盘下的src文件夹内生成如下图所示的文件结构:

    

    

3、编写JS文件

在node_modules文件夹的同级目录内新建 服务运行所需的JS文件。

将下列代码复制到 该JS文件

var gulp, runSequence,browserSync;
gulp = require('gulp'); //加载gulp服务
runSequence = require('run-sequence'); //加载run-sequence服务
browserSync = require('browser-sync').create(); gulp.task('serve', function() { //编写服务功能
return browserSync.init({
server: { //本地服务器启动配置
baseDir: './src/' //启动服务时执行代码路径
},
port: , //启动服务端口
});
}); gulp.task('watch', function() { //编写监听服务
return gulp.watch('./src/**/*.*', ['reload']);
}); gulp.task('reload', function(callback) {
return runSequence(['reload-browser'], callback);
}); gulp.task('reload-browser', function() {
return browserSync.reload();
}); gulp.task('default', function(callback) { //执行JS文件时服务执行顺序
return runSequence(['serve', 'watch'], callback);
});

该JS文件编写完成后,在DOS命令行,执行 gulp 命令就行;或者不想这么麻烦的,可以编写一个.bat文件(新建一个txt文件,写入 gulp serve watch;然后将该txt文件的后缀名改成bat即可),点击即可执行。

    

  执行启动如下:

    

  此时一个前端的本地服务器就搭建和启动完毕,启动后的WEB服务将在默认浏览器上显示

ps:另一份gulpfile.js备份
var gulp = require("gulp"),
browserSync = require('browser-sync').create(),
runSequence = require('run-sequence'),
reload = browserSync.reload,
childProcess = require('child_process'),
electron = require('electron');
/*启动项目*/
gulp.task('serve', function() {
return browserSync.init({
server: {
baseDir: './src/'
},
port: 8611
});
});
//监听文件
gulp.task('watch', function() {
return gulp.watch('./src/**/*.*').on("change",reload);
});
//刷新浏览器
gulp.task('reload', function(callback) {
return runSequence(['reload-browser'], callback);
});
//刷新浏览器
gulp.task('reload-browser', function() {
browserSync.reload();
});
//默认执行
gulp.task('default', function(callback) {
return runSequence(['serve', 'watch'], callback);
}); gulp.task('run', function () {
childProcess.spawn(electron, ['--debug=5858','.'], {stdio:'inherit'});
});
根据提示。如果本地服务启动时缺少某个模块,则通过npm install XXXX --save-dev 进行安装。

Gulp前端服务器本地搭建的更多相关文章

  1. SVN服务器本地搭建与使用

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6623026.html  使用SVN进行代码管理,需要搭建服务端资源库,然后在使用SVN的电脑安装SVN客户端或 ...

  2. dash视频服务器本地搭建 (初探)

    2019-4-17 15:54:17 星期三 技术说明: dash: 将一个大视频分解成不同分辨率, 不同清晰度的小视频, 以及一个描述文件(后缀: mpd), 根据网络带宽自动调整视频流, 看起来更 ...

  3. gulp前端自动化环境搭建详解

    1.安装 nodejs Grunt和所有grunt插件都是基于nodejs来运行的, https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本  npm -v 查看np ...

  4. MQTT服务器本地搭建

    1.1 初认识MQTT协议. 2.1 下载压缩包 前往EMQ下载地址:http://emqtt.com/downloads ,下载您的系统的版本,一般选择稳定版. 2.2 解压并运行 C:\Users ...

  5. 本地Git服务器的搭建及使用

    本地Git服务器的搭建及使用 Git本地服务器环境搭建 搭建好的本地git服务器的局域网ip是192.168.1.188,用户名是RSCSVN 教程链接:http://blog.csdn.net/cc ...

  6. 本地搭建 Gradle 服务器,提高 Android Studio Gradle 下载速度

    AndroidStudio 更新以后,在公司网会卡在下载 Gradle 的地方,下载 Gradle 速度很慢. 看到别人的博客提供的解决办法本地搭建一个 Gradle 的服务器,然后把 Android ...

  7. jenkins调用本地搭建sendmail邮件服务器发送邮件

    应用jenkins发送邮件的邮件服务器 SMTP server 可以是本地的,也可以是远程,远程的就不多说了,在此说一下如何在jenkins本地服务器上搭建邮件服务器,并用jenkins发送邮件,详细 ...

  8. NodeJs本地搭建服务器,模拟接口请求,获取json数据

    最近在学习Node.js,虽然就感觉学了点皮毛,感觉这个语言还不错,并且也会一步步慢慢的学着的,这里实现下NodeJs本地搭建服务器,模拟接口请求,获取json数据. 具体的使用我就不写了,这个博客写 ...

  9. window10 本地搭建SVN服务器

    window10本地搭建SVN服务器教程:https://www.cnblogs.com/warmlight/p/11075644.html 我按照这篇教程成功搭建SVN服务器. 有个比较坑的地方是w ...

随机推荐

  1. Python SSLError

    最近老是遇到这个问题. SSLError(SSLError(1, '[SSL: CERTIFIC ATE_VERIFY_FAILED] certificate verify failed (_ssl. ...

  2. VS2015 release模式下进行debug调试

    有时候软件发布,又不得不调试其中的某个dll模块, 这时候就需要在发布的release版本的软件中来调试其中的dll模块了. vs2015设置: 1.Release模式下右键工作属性,选择C/C++, ...

  3. 关于chrome浏览器事件拖动的bug(首次点击的时候也触发move的事件)

    在做R80web的时候出现一个奇怪的现象,chorme现在的版本还是存在,拖动事件有mousedown.mousemove.mouseup组成,但是首次click以及失去焦点再重新点击的时候同样会触发 ...

  4. python_SMTP and POP3

    #!/usr/bin/python #coding=utf-8 #发送邮件 import smtplib from smtplib import SMTP as smtp import getpass ...

  5. KNN理解

    基本思想 K近邻算法,即是给定一个训练数据集,对新的输入实例,在训练数据集中找到与该实例最邻近的K个实例,这K个实例的多数属于某个类,就把该输入实例分类到这个类中.如下面的图: 通俗一点来说,就是找最 ...

  6. 剑指offer(11-20)编程题

    二进制中1的个数 数值的整数次方 调整数组顺序使奇数位于偶数前面 链表中倒数第k个结点 反转链表 合并两个排序的链表 树的子结构 二叉树的镜像 顺时针打印矩阵 包含min函数的栈 11.输入一个整数, ...

  7. 转载:GitHub 新手详细教程

    GitHub 新手详细教程 https://blog.csdn.net/Hanani_Jia/article/details/77950594

  8. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器。

    前两篇目录: 仿淘宝头像上传功能(一)——前端篇. 仿淘宝头像上传功能(二)——程序篇. 仿淘宝头像上传功能(三)——兼容 IE6 浏览器 之前的这两篇虽然实现了功能,但不兼容低版本浏览器,而且有些浏 ...

  9. memcache 学习笔记

    Memcached是国外社区网站LiveJournal的开发团队开发的高性能的分布式内存缓存服务器.一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态Web应用的速度.提高可扩展 ...

  10. 【SSH网上商城项目实战25】使用java email给用户发送邮件

       转自: https://blog.csdn.net/eson_15/article/details/51475046 当用户购买完商品后,我们应该向用户发送一封邮件,告诉他订单已生成之类的信息, ...