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文件,包括开发和生产两个阶段,用来满足大部分对模块化和资源管理需求特别强的项目。
gulp实用配置(1)——demo的更多相关文章
- gulp实用配置(2)——中小项目
上一篇的gulp配置很简单,主要就是为了demo的查看和调试,这一篇则会相对详细一些,包括压缩合并打时间戳等. 在互联网环境比较好的城市,需要多人协作的,大一点的项目应该都用上了模块化(这里主要指co ...
- 基于流的自动化构建工具------gulp (简单配置)
项目上线也有一阵子,回头过来看了看从最初的项目配置到开发的过程,总有些感慨,疲软期,正好花点时间,看看最初的配置情况 随着前端的发展,前端工程化慢慢成为业内的主流方式,项目开发的各种构建工具,也出现了 ...
- webpack实用配置
前面的话 上文介绍了webpack入门,本文将详细介绍webpack实用配置 版本号 以entry.js打包为bundle.js为例,出口的filename可以设置为[id].[name].[hash ...
- gulp+ThinkPHP配置
gulp+ThinkPHP配置 gulp+ThinkPHP配置 目录结构: html |-src 开发目录 |-Home 静态页面 |-Public 静态资源目录 |-dist 生产目录 |-Home ...
- SecureCRT 下载,安装,绝佳配色,实用配置,上传下载配置合集
SecureCRT 下载,安装,绝佳配色,实用配置,上传下载配置合集 chocoball 发布于 2年前,共有 3 条评论 SecureCRT 是一款支持 SSH2.SSH1.Telnet.Telne ...
- log4net实用配置代码
log4net实用配置代码 <?xml version="1.0" encoding="utf-8" ?> <configuration> ...
- Libgdx游戏学习(1)——环境配置及demo运行
原文: Libgdx游戏学习(1)--环境配置及demo运行 - Stars-One的杂货小窝 Libgdx游戏是基于Java的一款游戏引擎,可以发布Android,桌面端,Html,IOS等游戏,出 ...
- gulp编译less简单demo
写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...
- gulp使用配置
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
随机推荐
- JDBC连接数据库7个步骤
JDBC连接数据库 •创建一个以JDBC连接数据库的程序,包含7个步骤: 1.JDBC所需的四个参数(user,password,url,driverClass) (1)user用户名 ( ...
- 全屏背景图的实现及background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
- git问题--Push rejected: Push to origin/master was rejected
解决git问题 Push rejected: Push to origin/master was rejected 意思是git拒绝合并两个不相干的东西 此时你需要在打开Git Bash,然后进入相应 ...
- python代码的那些设计
一.Django的ORM 1.类QuerySet (django) :QuerySet 可以被构造,过滤,切片,做为参数传递,这些行为都不会对数据库进行操作.只要你查询的时候才真正的操作数据库. 2. ...
- oracle 转 mysql 最新有效法
关键字:Oracle 转 MySQL . Oracle TO MySQL 没事试用了一下Navicat家族的新产品Navicat Premium,他集 Oracle.MySQL和PostgreSQL管 ...
- python中的sort方法使用详解
Python中的sort()方法用于数组排序,本文以实例形式对此加以详细说明: 一.基本形式 列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不 ...
- 使用SMTP发送邮件
先定义一个邮件实体: public class EntityMail { /// <summary> /// 发件人 /// </summary> public string ...
- 《LeetBook》leetcode题解(15):3Sum[M]
我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
- Windows环境下执行hadoop命令出现Error: JAVA_HOME is incorrectly set Please update D:\SoftWare\hadoop-2.6.0\conf\hadoop-env.cmd错误的解决办法(图文详解)
不多说,直接上干货! 导读 win下安装hadoop 大家,别小看win下的安装大数据组件和使用 玩过dubbo和disconf的朋友们,都知道,在win下安装zookeeper是经常的事 ...
- Web自动化 - 选择操作元素 1
文章转自 白月黑羽教Python 所有的 UI (用户界面)操作 的自动化,都需要选择界面元素. 选择界面元素就是:先让程序能找到你要操作的界面元素. 先找到元素,才能操作元素. 选择元素的方法 程序 ...