写在前面
安装环境前,默认安装了node环境
会使用基本的命令行操作
步骤 初始化环境新建一个文件夹
在文件夹打开命令行
npm init
一直回车默认选项就可以啦,也可以自己设置
最后一次回车结束后,会生成一个package.json文件
安装gulp
若是第一次使用gulp,则需要先全局安装gulp
npm install --global gulp
若已经全局安装gulp,则直接在工程根目录下:
npm install gulp --save-dev
输入gulp -v,显示版本说明安装成功
安装browser-syncnpm install browser-sync --save-dev配置gulpfile文件
var gulp = require("gulp"); var browserSync = require("browser-sync").create(); // Static server gulp.task("browser-sync", function() { var files = [ "**/*.html", // 监听html "**/*.css", // 监听css "**/*.js" // 监听js ]; browserSync.init(files,{ server: { baseDir: "./" } }); }); gulp.task("default",["browser-sync"]);测试
在工程根目录下打开命令行运行:
gulp
若上述无错误,将会在浏览器打开3000端口,这时输入相应的文件名.html就可以访问页面并实时刷新。比如有一个文件名叫主页.html,在浏览器地址栏输入http://localhost:3000/主页.html即可。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112259.html
写在前面 安装环境前,默认安装了node环境 会使用基本的命令行操作 步骤 初始化环境 新建一个文件夹 在文件夹打开命令行 npm init 一直回车默认选项就可以啦,也可以自己设置 最后一次回车结束后,会生成一个package.json文件 安装gulp 若是第一次使用gulp,则需要先全局安装gulp npm install --global gulp 若已经全局安装gu...
写在前面 安装环境前,默认安装了node环境 会使用基本的命令行操作 步骤 初始化环境 新建一个文件夹 在文件夹打开命令行 npm init 一直回车默认选项就可以啦,也可以自己设置 最后一次回车结束后,会生成一个package.json文件 安装gulp 若是第一次使用gulp,则需要先全局安装gulp npm install --global gulp 若已经全局安装gu...
摘要:打开您的命令行工具,进入到目录下,运行以下其中一条命令。将创建一个本地服务器并自动打开你的浏览器后访问地址,这一切都会在命令行工具里显示。 自己写标签: 实时刷新、 免F5、 gulp + browser-sync 开门见山,首先讲明一下本文的定位吧:写这篇文章是因为自己在平时的学习中,一次次试验了很多的前端实时刷新工具,有顺手的,有蹩脚的,有简单的,有麻烦的,安装完又折腾,折腾完又卸...
摘要:首先在下面,定义好模版文件,然后开始新加页面关系依赖这个环境,主要基于以及一系列的插件搭建,这个是开发环境的依赖关系其中,主要用来渲染模版引擎以及提供路由功能,同时起一个本地的服务器。同时附上全文,以供参考 原文发布于我的博客 www.kisnows.com 为什么要搭这么一套开发环境 公司 Pc 端以前遗留的项目,都是基于 jekyll+ruby-sass 这一套比较老的技术搭建的。...
摘要:生成的文件如下由于给文件添加了哈希值,所以每次编译出来的和都是不一样的,这会导致有很多冗余文件,所以我们可以每次在生成文件之前,先将原来的文件全部清空。中也有做这个工作的插件,因此我们可以在编译压缩添加哈希值之前先将原文将清空。 原文链接:http://mrzhang123.github.io/2016/09/07/gulpUse/项目链接:https://github.com/MrZ...
阅读 3425·2019-08-30 15:44
阅读 743·2019-08-30 13:46
阅读 1947·2019-08-30 11:05
阅读 3291·2019-08-29 18:32
阅读 2124·2019-08-29 13:56
阅读 1270·2019-08-29 12:57
阅读 721·2019-08-28 18:21
阅读 1702·2019-08-26 12:16