`

使用Gulp构建本地开发Web服务器

 
阅读更多
问题
  • 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
1
0
分享到:
评论

相关推荐

    Node.js-基于koakoa-routerejssass的gulp构建的开发框架

    使用这个开发框架,开发者可以快速搭建起一个具备动态渲染、样式预处理和自动化构建功能的 Node.js Web 应用。通过理解并熟悉这些技术,你可以更高效地开发和维护 web 项目,同时享受到 Node.js、Koa、EJS 和 SASS ...

    j2ee maven 结合gulp构建工具构建 war 自动刷新浏览器缓存

    本主题聚焦于“j2ee maven 结合gulp构建工具构建 war 自动刷新浏览器缓存”,我们将深入探讨这个话题。 首先,J2EE(Java 2 Platform, Enterprise Edition)是Java平台的企业版,它为开发和部署分布式企业级应用...

    基于gulp的前端构建工具集成javafreemarker开发环境

    在现代Web开发中,构建工具扮演着至关重要的角色,它们自动化了诸如编译、压缩、合并、测试等繁琐任务,极大地提高了开发效率。本主题聚焦于如何利用gulp这个流行的JavaScript构建工具来集成Java FreeMarker模板引擎...

    gulp-boilerplate:使用Gulp 4构建Web项目的样板

    图片复制使用imagemin进行优化SVG精灵使用SVGO优化SVG 将SVG文件转换为SVG Sprite 字型复制运行Web服务器(Browsersync)以进行样式注入,自动刷新和跨设备同步运行文件监视程序(本地Gulp功能),以在正确的文件上...

    一个基于Gulp高效可定制的Web前端工作流

    本项目是基于Gulp 4构建的高效、可定制的工作流,旨在提供一套完善的自动化解决方案,帮助开发者实现快速调试与部署,优化Web项目的开发效率。 【描述】:“这是一个基于 Gulp 4 的前端工作流,包含:完善的自动化...

    基于gulp的静态页面构建工具

    在现代Web开发中,构建工具扮演着至关重要的角色,它们能自动化处理许多繁琐的任务,如文件编译、压缩、合并、版本控制等。基于gulp的静态页面构建工具就是这样一个高效的工作流解决方案,它使得前端开发者能够更加...

    gulp4.0自动构建参考工程-带完整依赖包.rar

    `gulp4.0自动构建参考工程-带完整依赖包.rar` 是一个针对前端开发的项目模板,利用了流行的自动化工具Gulp 4.0进行构建流程的管理和优化。Gulp是一个基于任务的构建系统,它允许开发者通过编写简单的JavaScript任务...

    使用gulp构建前端自动化的方法示例

    - **本地Web服务器**:`gulp-connect`可以创建一个本地Web服务器,方便在开发过程中实时预览。 ### 5. 自动化工作流 将以上任务组合起来,可以创建一个完整的自动化工作流,例如: ```javascript gulp.task('...

    gulp打包项目,css、js自动添加版本号,防止缓存,代理

    在现代Web开发中,有效地管理和优化资源是至关重要的。`gulp`是一个流行的JavaScript任务运行器,它可以帮助开发者自动化各种重复性的构建任务,如编译Sass到CSS,压缩JavaScript,或者像在这个场景下,自动为CSS和...

    gulp-less-pug-skeleton:使用Pug和Less来构建静态网站的框架,再加上实时重新加载的Web服务器以加快开发速度

    牙龈+少+哈巴狗骨架这是使用Pug和Less来构建静态Web站点的框架,外加实时重新加载Web服务器以加快开发速度。 它用: Gulp可以自动执行构建任务,加上Gulp Connect可以为本地服务器提供实时重载。 Pug模板引擎可简化...

    generator-gulp-express-webapp:约曼生成器,用于使用express + gulp构建一个简单的Web应用程序。 该项目包含适当的项目和构建结构,易于扩展

    generator-gulp-express-webapp 生成器,用于使用express + gulp构建一个简单的Web应用程序。 该支架提供了更明确的项目结构,更适合于开发Web应用程序。产品特点我们支持的所有gulp功能都可以在gulp文件夹中找到。 ...

    mj-web-boilerplate:使用gulp,jQuery和Bootstrap 4的Web项目样板

    MJ Web样板 使用gulp,jQuery和Bootstrap 4的Web项目样板。如何克隆此存储库。... npm install npm run dev 您有一个在localhost:8080运行的Web服务器localhost:8080执照该存储库是根据许可获得许可的。

    前端开源库-gulp-swig

    `gulp-swig`是将Swig集成到Gulp中的桥梁,它使得开发者能够在Gulp构建流程中利用Swig的强大功能。安装`gulp-swig`非常简单,只需要在项目中执行`npm install --save-dev gulp-swig swig`。在Gulp任务中引入并配置`...

    web开发网站技术

    前端开发中常用的构建工具如Webpack、Gulp和Grunt可以帮助开发者自动化编译、压缩和测试等任务。包管理器如npm和Yarn用于管理依赖和模块。 #### 开发者工具和调试 现代浏览器提供了功能强大的开发者工具,包括调试...

    gulpauto自动构建工具

    - **部署支持**:可以配置发布任务,将构建后的文件上传至服务器或 CDN,如使用 `gulp-deploy` 插件。 ### 3. 使用步骤 1. **安装**:首先确保已经安装了 Node.js 和 npm。在项目根目录下运行 `npm init` 初始化...

    由electornvuewebpack和gulp搭建的跨平台桌面程序脚手架

    标题中的“由Electron、Vue、Webpack和Gulp搭建的跨平台桌面程序脚手架”指的是一种使用现代Web技术栈构建桌面应用程序的方法。这个脚手架整合了四个关键工具,它们分别是: 1. **Electron**:Electron是由GitHub...

    gulp_healthx3s_delphi7_Gulp!_

    " 暗示了这是一个与使用Gulp自动化构建工具相关的项目,可能涉及到一个名为 "healthx3s" 的系统或者产品,而 "delphi7" 表明开发环境是Delphi 7,一个古老的面向对象的 Pascal 编程环境。Gulp则是JavaScript的构建...

    JGulp, 利用Gulp 配置的个人前端项目自动化工作流.zip

    Gulp是现代Web开发中的一个强大工具,它提供了一种简洁的方式来管理和自动化复杂的项目构建过程。通过使用Gulp,开发者可以极大地提高工作效率,减少手动操作,确保代码质量和一致性。 在JGulp中,我们可能会遇到...

    Node.js-使用NodeExpressReactReactNativeRedux和GraphQL构建的Web和移动应用示例

    2. **Express.js**:Express是Node.js的一个Web应用框架,简化了构建Web服务器的过程。它提供了路由、中间件、模板引擎等功能,帮助开发者快速构建RESTful API和Web应用。 3. **React**:React是Facebook开源的...

Global site tag (gtag.js) - Google Analytics