一.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基本使用的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  4. 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

    前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 ...

  5. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  6. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  7. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  8. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  9. gulp批量打包文件并提取公共文件

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...

  10. 使用gulp解决RequireJS项目前端缓存问题(二)

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

随机推荐

  1. 009-数组-C语言笔记

    009-数组-C语言笔记 学习目标 1.[掌握]数组的声明 2.[掌握]数组元素的赋值和调用 3.[掌握]数组的初始化 4.[掌握]数组的遍历 5.[掌握]数组在内存中的存储 6.[掌握]数组长度计算 ...

  2. AJ学IOS 之小知识iOS启动动画_Launch Screen的运用

    AJ 分享,必须精品 看下效果吧 例如新浪微博的软件开启时候 就是这个 用Launch image实现 这个不难,就是在Images.xcassets 增加一个LaunchImage文件(右键 new ...

  3. CentOS7.5 使用Docker部署Jumpserver

    1.环境准备 # 查看系统版本 $ cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) # 查看内核版本 $ uname -a L ...

  4. 精彩的jquery弹幕效果

    html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. ASP.NET Core技术研究-全面认识Web服务器Kestrel

    因为IIS不支持跨平台的原因,我们在升级到ASP.NET Core后,会接触到一个新的Web服务器Kestrel.相信大家刚接触这个Kestrel时,会有各种各样的疑问. 今天我们全面认识一下ASP. ...

  6. 《并发编程的艺术》阅读笔记之Sychronized

    概述 在JDK1.6中,锁一共四种状态,级别由低到高依次是:无锁状态.偏向锁状态.轻量级锁状态和重量级锁状态.锁可以升级但不能降级,这是为了提高获得锁和释放锁的效率.只有重量级锁涉及到操作系统线程切换 ...

  7. 数值计算方法实验之newton多项式插值 (Python 代码)

    一.实验目的 在己知f(x),x∈[a,b]的表达式,但函数值不便计算或不知f(x),x∈[a,b]而又需要给出其在[a,b]上的值时,按插值原则f(xi)=yi (i=0,1,……, n)求出简单函 ...

  8. 给动态ajax添加的元素添加click事件

    $(document).on('click','div',function(){alert(1)}); .live()方法也是可以的

  9. MYSQL隔离级别 与 锁

    1.四种隔离级别下数据不一致的情况   脏读 不可重复读 幻读 RU 是 是 是 RC(快照读) 否 是 是 RC(当前读) 否 否 是 RR(快照读) 否 否 是 RR(当前读) 否 否 否 Ser ...

  10. k8s namespace限制调研

    1.创建namespace gpu 2.增加限制 [root@tensorflow1 gpu-namespace]# cat compute-resources.yaml apiVersion: v1 ...