问题
- 1. 在写前端界面代码时,想调试的时候需要配置一个Apache或者Nginx服务器
- 2. 每次修改代码都需要刷新一下,验证效果。
解决方案
Gulp + Gulp-connect +watch + livereload
Gulp是目前风头正劲的前端自动化工具,有取代Grunt的趋势。初次使用,一下就被其简洁的语法折服了,目前我还是只是在小项目中使用,一般语法简洁的工具在面对大型,复杂项目时都会有不足,这点留待以后考察了。
Gulp是基于NodeJS的,因此使用之前需要先安装NodeJS, 不得不说NodeJs繁荣了整个前端开发生态啊。有了NodeJS之后,安装Gulp就很容易了。
npm install -g gulp
有了Gulp之后,主角登场,安装Gulp插件gulp-connect,Gulp的插件机制非常好,每个插件的功能都很单一,纯粹。gulp-connect的功能就是在本地启动一个Web Server
npm install -g gulp-connect
安装完了插件之后,就可以写Gulp构建脚本了,Gulp的脚本非常简单,就是一个Javascript脚本定义的DSL,下面就是一个通过gulp-connect定义一个本地Server服务,然后通过watch任务和livereload设置实现自动刷新的:
//引入插件
var gulp = require('gulp');
var connect = require('gulp-connect');
//创建watch任务去检测html文件,其定义了当html改动之后,去调用一个Gulp的Task
gulp.task('watch', function () {
gulp.watch(['./www/*.html'], ['html']);
});
//使用connect启动一个Web服务器
gulp.task('connect', function () {
connect.server({
root: 'www',
livereload: true
});
});
gulp.task('html', function () {
gulp.src('./www/*.html')
.pipe(connect.reload());
});
//运行Gulp时,默认的Task
gulp.task('default', ['connect', 'watch']);
通过在项目目录下,运行命令‘gulp’:
[gulp] Using gulpfile ~/Documents/workspace/ionic_workspace/open_party/gulpfile.js
[gulp] Starting 'connect'...
[gulp] Server started http://localhost:8080
[gulp] LiveReload started on port 35729
[gulp] Finished 'connect' after 13 ms
[gulp] Starting 'watch'...
[gulp] Finished 'watch' after 6.69 ms
[gulp] Starting 'default'...
[gulp] Finished 'default' after 11 μs
然后在修改代码时,界面自动刷新,效果如下:
- 大小: 196.3 KB
分享到:
相关推荐
图片复制使用imagemin进行优化SVG精灵使用SVGO优化SVG 将SVG文件转换为SVG Sprite 字型复制运行Web服务器(Browsersync)以进行样式注入,自动刷新和跨设备同步运行文件监视程序(本地Gulp功能),以在正确的文件上...
牙龈+少+哈巴狗骨架这是使用Pug和Less来构建静态Web站点的框架,外加实时重新加载Web服务器以加快开发速度。 它用: Gulp可以自动执行构建任务,加上Gulp Connect可以为本地服务器提供实时重载。 Pug模板引擎可简化...
generator-gulp-express-webapp 生成器,用于使用express + gulp构建一个简单的Web应用程序。 该支架提供了更明确的项目结构,更适合于开发Web应用程序。产品特点我们支持的所有gulp功能都可以在gulp文件夹中找到。 ...
MJ Web样板 使用gulp,jQuery和Bootstrap 4的Web项目样板。如何克隆此存储库。... npm install npm run dev 您有一个在localhost:8080运行的Web服务器localhost:8080执照该存储库是根据许可获得许可的。
发展历程运行: gulp build --env=dev阶段运行: gulp build --env=stage生产运行: gulp build --env=prod服务器启动本地开发服务器。 此外,gulp将监视文件的任何更改,并在服务器运行时重新加载浏览器。
Web Starter框架 具有ES6 / Sass / Nunjucks的基本Gulp样板启动器框架。 适用于原型制作和生产工作。 特征: ... 运行“ gulp”以启动本地服务器 运行“ gulp build”以生成生产版本以进行分发。 要
html5-skel-gulp 我最初在 Web 应用程序上工作的 Gulp 框架 要求 运行下面的命令来安装 gulp.js、Bower 和 CoffeeScript: ...启动本地 Web 服务器并开始使用观察更改: gulp listen 访问本地服务器: 执照 分发
发电机React火箭 一个...g yonpm install -g generator-react-rocket 用法mkdir myapp && cd myappyo react-rocket Gulp任务gulp或gulp serve通过实时重装启动开发Web服务器(支持--production标志) gulp build以在di
战役这是我第一次使用Gulp,所以可能很糟糕。 我创建了一个用于简单项目的构建系统。 它对样式表使用Less.js,对模板使用Jade,对JavaScript使用Browserify。用法示例var config = {/* Names of extra tasks to run ...
###一个简单的前后端开发脚手架####服务器expresshjs模板引擎建议使用async编写异步js代码####前端bower管理第三包资源gulp进行js压缩、less编译、图片压缩、页面assets合并使用hjs前端模板,js中有模板cache机制...
gulp-webpack-handlebars是用于Web开发的灵活模板。 它包括许多用于创建响应式,高性能和轻量级页面的工具。 :rocket: Gulp 4 + Webpack 4 +把手+ Babel + BrowserSync :fire: 文献资料 入门 安装 安装NodeJS和...
基于 gulp 的高质量 Web 主题助手 ... serve:dist :在端口 3000 中使用您的主题的生产版本启动 Web 服务器。 clean :清理用于其他任务的输出目录。 要求 要使用此工具,您必须可以使用path的下一个工具,因此操作系
写在前面: ...搭建web服务器; 文件保存时自动重载浏览器; 使用预处理器如Sass、LESS; 优化资源,比如压缩CSS、JavaScript、压缩图片; 类似Gulp的工具,我们通常称之为构建工具或者叫自动化构建工
按下文安装完开发工具依赖之后,在 webapp 目录下执行命令 gulp server 即可启动本地服务器,预览项目。 开发工具依赖 克隆版本库之后,在本地安装如下依赖软件包: Node.js & npm () Bower () Gulp () 初始化本地...
它与其他静态站点生成器类似,它可以获取Markdown内容,对其进行渲染,对其进行优化并创建可用于生产的站点,该站点可以由Nginx,Apache或其他Web服务器提供服务。 产品特点 将Markdown文件转换为静态HTML 模板和...
Router和异步数据提取的会话驱动路由 入门$ npm install 启动本地开发服务器: $ npm run server 导航到http:// localhost:8080 /以查看该应用程序。 依存关系ReactReact路由器 开发人员网页包React热加载器业力...
二、Node服务器开发:这部分内容主要是讲解了在工作中最常用到的web服务器知识,包括如何使用node建立网站服务器供客户端访问以及如何把node作为客户端向服务器请求数据;三、最经典的Node快速开发框架Express:这...
它使用 Web框架创建一个简单的Web服务器。 前端部分使用 ,Bootstrap和Font Awesome基于JavaScript。 建造 锈源是用cargo build 。 JavaScript构建是通过Gulp或WebPack完成的: webpack gulp all或webpack 使用...
节点快递 ... 构建项目并启动服务器 #cd node-express gulp e2e ---> 开始 e2e 测试 #cd node -express gulp clean ---> to clean project #cd node-express gulp ---> to start all task('lint
要运行开发构建: gulp --harmony dev 该模板需要一个支持和声标志的节点版本,这是无论如何使用 koa.js 的先决条件。 好处: 默认的 React 页面是服务器渲染的,以提高首页加载性能和 SEO。 使用 Mustache ...