gulp实用配置(1)——demo

在React和Vue推进下,现在很多人都在使用webpack作为自动化构建工具,但其实在很多时候我们并不是一定需要用到它,gulp这样的轻量级构建工具就足够了。

最近一段时间不是太忙,所以就写了三份配置,用在不同的情况下。

这篇文章介绍第一份配置,也是最简单的一份。

这份配置我把它称作demo测试配置,因为在我工作的时候,经常需要快速出效果或者实现某些功能,你没有时间去自己实现,那么就需要找一些现有的例子或者插件。

不过这些demo或者插件很多时候需要在移动端查看或者启动一个服务器,所以这份配置的任务主要就是启动一个本地服务器,可以在移动端和PC端都同时查看,另外在修改代码的时候还能自动刷新,不用每次都切换应用刷新,特别是移动端,可以省去很多麻烦。

详细代码如下:

gulpfile.js:

var gulp = require('gulp'),browserSync = require('browser-sync').create();// 启动 browserSync 服务,自己启动server,并且为浏览器实时刷新提供服务
gulp.task('browserSync', function() {browserSync.init({server: {baseDir: './'},files: './demo/**/*',browser: ["chrome"]})
})// 默认任务,在命令行输入`gulp`来启动任务
gulp.task('default', gulp.parallel('browserSync'))

package.json:

{"name": "gulp-demo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"browser-sync": "^2.18.12","gulp": "gulpjs/gulp#4.0"}
}

文件夹结构:

XX—

  |— demo

  |— gulpfile.js

       |— package.json

 

这份配置里只用到了一个插件 browserSync ,这个插件会启动一个localhost服务器,可以自动刷新,并且移动端和PC端同步。

browserSync是一个很强大的插件,这里有一份关于它的中文文档,简单易懂,需要的可以自己查看。

另外这里有一个小技巧就是,我们可以直接通过该插件的配置选项去监听文件修改,而不需要使用gulp的watch功能,更加简单。

下一篇会写一个相对详细的gulpfile文件,包括开发和生产两个阶段,用来满足大部分对模块化和资源管理需求特别强的项目。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Maven运行Solr

使用Maven运行Solr Solr是一个开放源代码搜索服务器,它是使用Lucene Core的索引和搜索功能构建的,它可以用于使用几乎任何编程语言来实现可扩展的搜索引擎。 尽管Solr具有许多优点,但建立一个开发环境并不是其中之一。 该博客文章描述了如何…

oracle11g日志原理,oracle11gRAC之log日志体系

oracle11gRAC之log日志体系:1、CRS日志(grid):首选查看alertlog:$CRS_HOME/grid/log/hostname/alertdbserver1.logClusterware后台进程日志:crsd.Log: $ORA_CRS_HOME/grid/log/hostname/crsd/crsd.Logocssd.Log: $ORA_CRS_HOME/gr…

Eclipse中 如何实现 多行同时编辑

在编辑的时候按下 SHIFT ALT A 之后 鼠标变为 号 选择要同时编辑几行 即可编辑(现在eclipse好像只能是编辑一块地方 不能像vs那样 任何地方可以同时编辑 这点很鸡肋) 如图 退出编辑 再次 按 SHIFT ALT A 即可 转载于:https://www.cnblogs.com…

AFN\HTTPS\UIWebView

1.AFN使用技巧 1.在开发的时候可以创建一个工具类,继承自我们的AFN中的请求管理者,再控制器中真正发请求的代码使用自己封装的工具类。 2.这样做的优点是以后如果修改了底层依赖的框架,那么我们修改这个工具类就可以了,而不用再一…

检测和删除多余无用的css

本文主要讲解如何检测页面中多余无用的css。 1、chrome浏览器 F12审查元素的Audits 说明:使用Audits,会检测出页面中没有用到的css,需要手动删除多余的css;同时需要说明的是检测出多余无用的css块,而不是某一行css。 …

JDK 8的Calendar.Builder

勇敢的Java新世界的定义特征之一是Java空间中构建器模式的日益普及。 Groovy似乎是JVM上最流行的替代语言(对于Java),以在核心库以及Groovy支持的库和框架中大量使用Builder而闻名。 乔希布洛赫与覆盖带来的图案为Java开发者社区心态前列模式…

oracle锁表会话超时时间,ORACLE快速彻底Kill掉的会话,防止锁表

ORACLE快速彻底Kill掉的会话,防止锁表2020-05-30编程之家收集整理的这篇文章主要介绍了ORACLE快速彻底Kill掉的会话,防止锁表,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。万能是sql重启服务,不然,以下…

格式化文本

1.后台获取文本后文本内部存在回车,但是浏览器不能编译\n\t所以使用pre,使文本能够编译文本,2.若文本长度超出预设宽度,可以添加样式,下列代码,可以使超出后的文本自动换行。/*将文本解析为段落,是段落自动化行*/pre {…

webstorm快捷键

Ctrl/ 或 CtrlShift/ 注释(// 或者/*…*/ ) ShiftF6 重构-重命名 CtrlX 删除行 CtrlD 复制行 CtrlG 查找行 CtrlShiftUp/Down 代码向上/下移动。 F2 或ShiftF2 高亮错误或警告快速定位 写代码,按Tab 生成代码 选中文本&#…

vue支付密码

从网上搜索了好多都很麻烦&#xff0c;花了点事件自己做了个&#xff0c;简单轻便&#xff0c;老少皆宜 <template> <section class"pay-mask" click"close_mask" v-show"payshow"> <div class"container"> <div…

打造智能建筑商

构建API时&#xff0c;您应该始终考虑谁将使用它。 当API简单易用时&#xff0c;用户就会感到满意。 当用户满意时&#xff0c;每个人也都会满意。 但是出色的可用性并非总是容易实现的。 有一些模式对此有所帮助&#xff0c;在这篇文章中&#xff0c;我将重点介绍经典的构建器…

结合BeautyEye开源UI框架实现的较美观的Java桌面程序

BeautyJavaSwingRobot 结合BeautyEye开源UI框架实现的较美观的Java桌面程序&#xff0c;主要功能就是图灵机器人和一个2345网站万年历的抓取。。。。   挺简单而且实用的一个项目&#xff0c;实现出来的效果也还不错。希望可以学到知识的小可爱不对应该是帅哥&#xff0c;可…

oracle外表日期,三步教会您掌握oracle外表(external table)

三步教会你掌握oracle外表(external table)外表(externaltable)就像普通的表对像一样&#xff0c;可以select等&#xff0c;只是它是只读的&#xff0c;数据库中只保存了表结构的描述&#xff0c;表数据却没有存放在数据库内&#xff0c;而是存放在了文件系统上。当用户想偶尔使…

【从入门到放弃】23种设计模式(1):设计模式综述

一、设计模式的分类 总体来说设计模式分为三大类&#xff1a; 创建型模式&#xff0c;共五种&#xff1a;工厂方法模式&#xff08;Factory Method&#xff09;、抽象工厂模式&#xff08;Abstract Factory&#xff09;、单例模式&#xff08;Singleton&#xff09;、建造者模式…

Bootstrap警告框

前面的话 在网站中&#xff0c;网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框&#xff0c;比如说告诉用户操作成功、操作错误、提示或者警告等。在Bootstrap框架有一个独立的组件&#xff0c;实现类似的效果&#xff0c;这个组件被称…

python doctest测试

title: Python doctest测试 tags: Python --- doctest测试 python 提供了REPL&#xff08;read-eval-print loop&#xff0c;读取、求值、输出的循环&#xff09; 官方地址&#xff1a;https://docs.python.org/3/library/doctest.html """ This is the "e…

异步CDI事件

几天前&#xff0c;在我们的常规代码审查中&#xff0c;我的一位同事提出了一个问题&#xff0c;即如果可能&#xff0c;一次同时调用CDI观察者&#xff08;这样的方法带有参数Observes的方法&#xff09;会发生什么&#xff1f;用于不同的事件实例。 换句话说&#xff0c;在产…

oracle改了包怎么保存,Oracle存储过程、包、方法使用总结(推荐)

/***author&#xff1a;zhengwei*date:2017-04-28*desc:存储过程用法总结*/CREATE OR REPLACE PROCEDURE MYPROCEDURE(P_ID IN VARCHAR,P_STATUS OUT VARCHAR) --P_ID为输入参数 ,P_STATUS为输出参数AS---变量声明T_STATUS VARCHAR2(20);T_ID NUMBER;V_POSTYPE VARCHAR2(20);V_…

【2017级面向对象程序设计】第2次成绩排行

作业地址 https://edu.cnblogs.com/campus/fzu/OOP/homework/1864 评分标准 1&#xff09; C 流程图 or 文字描述程序结构 5分C 类图 or 文字描述程序结构 5分2&#xff09; 代码 共 10 分构造函数 &#xff1a;2 分析构函数 &#xff1a;2 分成员函数 显示当前所处楼层&#x…

css定位position

闲言碎语不多说&#xff0c;直接开写&#xff01; 关于定位 我们可以使用css的position属性来设置元素定位类型&#xff0c;position的设置项如下&#xff1a; a、relative生成相对定位元素&#xff0c;元素所占据的文档流的位置不变&#xff08;即元素不会脱离文档流&#x…