gulp基本使用
一.gulp是什么
gulp强调的是前端开发的工作流程,我们可以通过定义task事件定义事件的执行顺序,gulp去执行这些事件,构建整个前端开发的工作流程
gulp常见定义事件,例如:
- 变更静态资源
- 合成文件,把多个文件合为一个文件
- 监控变化,自动刷新浏览器
- 解析浏览器不识别的语言,如scss等
下面会说几个常见的gulp模块,列举功能和例子,希望你看完本章后能对gulp有个基本的掌握,能参照这里的写法,当需要使用时去官网上会自主查询
二.gulpAPI
先分别说明每个API的作用,下面会有一个总例子
1.src
创建一个流,用于从文件系统读取文件对象
2.series
接受n个参数,每个参数是函数,会依次执行这些函数.
3.dest
创建一个用于将文件对象写入到文件系统的流(就是用于在文件系统上创建文件)。第一个参数是创建文件后输出的路径
4.watch
监听指定数据的变化,当指定数据改变时会执行回调函数,刷新浏览器
结合上面的API,我们写个例子,目的是将位于src/view文件下的html页面,复制到/dev目录下,并监听html文件
const {src,series,dest,watch}=require('gulp');
const gulpServer=require('gulp-webserver')
function copyHtml(cb) {
//复制src/view下的所有html文件
return src('./src/view/**/*.html')
.pipe(dest('./dev'))
}
//gulp-webserver是用来提供server服务的
function startGulp(){
src('./dev')
.pipe(gulpServer({
port:9000,
host:'127.0.0.1',
//热更新
livereload:true,
//自动打开浏览器
open:true
}))
}
//监听所有的html文件,当文件改变时执行回调,并刷新浏览器
watch('./src/view/**/*.html',(cb)=>{
copyHtml();
//cb这个方法要调用,否则会出现偶尔监听不到的情况
cb()
})
//series会按顺序执行参数函数
exports.default=series(copyHtml,startGulp)
三.gulp常用第三方插件
1.gulp-scss
yarn add node-sass gulp-sass -D,用于编译scss文件
2.gulp-concat
yarn add gulp-concat -D //文件的合并
3.gulp-webserver
yarn add gulp-webserver -D //搭建研发的server,默认索引页
结合上面的所有内容,我们写个例子,目的是将多个scss文件合并编译为一个css文件,并输出到/dev文件中
//gulpfile.js
const {src,series,dest,watch}=require('gulp');
const gulpServer=require('gulp-webserver')
const scss=require('gulp-sass');
const concat=require('gulp-concat')
function copyHtml(cb) {
//复制src/view下的所有html文件
return src('./src/view/**/*.html')
.pipe(dest('./dev'))
}
function complieScss(){
return src('./src/style/*.scss')
.pipe(scss().on('error',scss.logError))
.pipe(concat('all.css'))
.pipe(dest('./dev'))
}
function startGulp(){
src('./dev')
.pipe(gulpServer({
port:9000,
host:'127.0.0.1',
//热更新
livereload:true,
//自动打开浏览器
open:true
}))
}
watch('./src/style/*.scss',(cb)=>{
complieScss();
//cb这个方法要调用,否则会出现偶尔监听不到的情况
cb()
}) //也可以是module.exports.default,下面是简写,gulp是基于node环境运行的,gulp遵守node模块规范 exports.default=series(copyHtml,complieScss,startGulp)
在src/view/index.html中引入all.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./all.css">
<title>Document</title>
</head>
<body>
nihao!my name is didi
</body>
</html>
命令行中执行gulp,会自动打开浏览器,我们就可以查看样式是否是我们配置的了
gulp基本使用的更多相关文章
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...
- 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- gulp初学
原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js 配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...
- gulp批量打包文件并提取公共文件
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...
- 使用gulp解决RequireJS项目前端缓存问题(二)
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
随机推荐
- 009-数组-C语言笔记
009-数组-C语言笔记 学习目标 1.[掌握]数组的声明 2.[掌握]数组元素的赋值和调用 3.[掌握]数组的初始化 4.[掌握]数组的遍历 5.[掌握]数组在内存中的存储 6.[掌握]数组长度计算 ...
- AJ学IOS 之小知识iOS启动动画_Launch Screen的运用
AJ 分享,必须精品 看下效果吧 例如新浪微博的软件开启时候 就是这个 用Launch image实现 这个不难,就是在Images.xcassets 增加一个LaunchImage文件(右键 new ...
- CentOS7.5 使用Docker部署Jumpserver
1.环境准备 # 查看系统版本 $ cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) # 查看内核版本 $ uname -a L ...
- 精彩的jquery弹幕效果
html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- ASP.NET Core技术研究-全面认识Web服务器Kestrel
因为IIS不支持跨平台的原因,我们在升级到ASP.NET Core后,会接触到一个新的Web服务器Kestrel.相信大家刚接触这个Kestrel时,会有各种各样的疑问. 今天我们全面认识一下ASP. ...
- 《并发编程的艺术》阅读笔记之Sychronized
概述 在JDK1.6中,锁一共四种状态,级别由低到高依次是:无锁状态.偏向锁状态.轻量级锁状态和重量级锁状态.锁可以升级但不能降级,这是为了提高获得锁和释放锁的效率.只有重量级锁涉及到操作系统线程切换 ...
- 数值计算方法实验之newton多项式插值 (Python 代码)
一.实验目的 在己知f(x),x∈[a,b]的表达式,但函数值不便计算或不知f(x),x∈[a,b]而又需要给出其在[a,b]上的值时,按插值原则f(xi)=yi (i=0,1,……, n)求出简单函 ...
- 给动态ajax添加的元素添加click事件
$(document).on('click','div',function(){alert(1)}); .live()方法也是可以的
- MYSQL隔离级别 与 锁
1.四种隔离级别下数据不一致的情况 脏读 不可重复读 幻读 RU 是 是 是 RC(快照读) 否 是 是 RC(当前读) 否 否 是 RR(快照读) 否 否 是 RR(当前读) 否 否 否 Ser ...
- k8s namespace限制调研
1.创建namespace gpu 2.增加限制 [root@tensorflow1 gpu-namespace]# cat compute-resources.yaml apiVersion: v1 ...