gulp基础使用方法记录

一、开始

使用gulp,需知道4个API:

  gulp.task():用来定义任务,

          格式:gulp.task(name[, deps], fn)

            name 为任务名

            deps 是当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则可省略这个参数
            fn 为任务函数,我们把任务要执行的代码都写在里面。该参数也是可选的。

  gulp.src():用来读取文件,

          格式:gulp.src(globs[, options]),

          globs  参数是文件匹配模式(类似正则表达式),用来匹配文件路径(包括文件名),当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时,该参数可以为一个数组。
          options  为可选参数。通常情况下我们不需要用到。

  gulp.dest()用来写文件的:,

         格式:gulp.dest(path[,options])

         path  为写入文件的路径
         options  为一个可选的参数对象,通常我们不需要用到

  gulp.watch():用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等,

            格式:gulp.watch(glob[, opts], tasks)

            glob  为要监视的文件匹配模式,规则和用法与gulp.src()方法中的glob相同。
            opts  为一个可选的配置对象,通常不需要用到
            tasks  为文件变化后要执行的任务,为一个数组

 

二、实例

  需要先安装gulp

 npm install -g gulp

  手动建立一个gulpfile.js文件,作为入口,

  初始化,引入gulp  

npm init;
npm install --save-dev gulp;

  然后在gulpfile.js写入

var gulp = require('gulp');var plugins = require('gulp-load-plugins')();var src = {js: 'js/*.js',html: './*.html',css: 'css/*css',img: 'img/**'
}var buildGulp = {// html 打包buildHtml: () => {gulp.src(src.html).pipe(plugins.minifyHtml()).pipe(gulp.dest('./dist'));},// css 打包buildCss: () => {gulp.src(src.css).pipe(plugins.minifyCss()).pipe(gulp.dest('dist/css'));},// js 打包buildJs: () => {gulp.src(src.img).pipe(plugins.imagemin()).pipe(gulp.dest('dist/img'));},// img打包buildImg: () => {gulp.src(src.js).pipe(plugins.uglify()).pipe(gulp.dest('dist/js'));},
};gulp.task('default',function(){gulp.start('build')
});gulp.task('build', function(){for ( var i in buildGulp){buildGulp[i]();}
});

我们用gulp-uglify压缩js, gulp-minify-css压缩css, gulp-minify-html压缩html,gulp-imagemin压缩图片

为避免在文件头部引入依赖时过去冗长,引入gulp-load-plugins来从package.json中引入依赖,通过调用实例中的方法来加载依赖,加载方式为按需加载

 

最后执行gulp,会从名称为default的task开始执行,打包文件,输出的文件由gulp.dest设置在dist目录下

转载于:https://www.cnblogs.com/lastnigtic/p/6974961.html

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

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

相关文章

dolphinscheduler简单任务定义及复杂的跨节点传参

🚀 优质资源分享 🚀 学习路线指引(点击解锁)知识定位人群定位🧡 Python实战微信订餐小程序 🧡进阶级本课程是python flask微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一…

【 Grey Hack 】万金油脚本:常见端口漏洞检测

目录脚本源码用法效果及示例SSH 端口FTP 端口版本:Grey Hack v0.7.3618 - Alpha 适用于SSH (22) 端口、FTP (21) 端口、HTTP (80) 端口、SMTP (25) 端口及3306/3307 端口 。 脚本源码 if params.len ! 2 or params[0] "-h" or params[0] "--help…

JUC源码学习笔记1——AQS和ReentrantLock

🚀 优质资源分享 🚀 学习路线指引(点击解锁)知识定位人群定位🧡 Python实战微信订餐小程序 🧡进阶级本课程是python flask微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一…

Android 应用内直接跳转酷市场

不确定酷市场后期是否还会该包名或者路径,目前的7.9 版本测试通过. private void gotoCoolapkMarket() {try {Intent intent new Intent(Intent.ACTION_VIEW);intent.setData(Uri.parse("market://details?id" getPackageName()));intent.setClassName("com.…

【 Grey Hack 】万金油脚本:常见端口获取shell

目录脚本源码用法效果及示例成功示例FTP (21)端口HTTP (80)端口失败示例版本:Grey Hack v0.7.3618 - Alpha 适用于SSH (22) 端口、FTP (21) 端口、HTTP (80) 端口、SMTP (25) 端口及3306/3307 端口。 脚本源码 if pa…

Date 类型转换

Date类型默认固定输出格式是 “Fri Apr 12 17:26:23 CST 2013” 该类型属性本身无法改变格式,要想在前台jsp等页面呈现出你想要的格式就需要改变类型。 Date 转换成 String      转换成其它如“YYYY-MM-DD”,"YYYY-MM-DD hh:mm:ss"等之类的格式 Si…

ECharts整合HT#160;for#160;Web的网络拓扑图应用

ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是以矢量的格式来呈现的,在展现上可以有…

一个月后,我们又从 MySQL 双主切换成了主 - 从!

🚀 优质资源分享 🚀 学习路线指引(点击解锁)知识定位人群定位🧡 Python实战微信订餐小程序 🧡进阶级本课程是python flask微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一…

如何进行有效的沟通----日常沟通及会议

日常开发和工作中会经常遇到沟通不畅的问题,"communication" 不论是在学术还是实践中都是一个很重要的议题。因为低效的沟通造成的开发事故有时候是灾难性的。 沟通的问题为认为本质上就是信息不对称。下面以日常沟通及会议沟通做一些浅显的讨论&#xff…

【 Grey Hack 】万金油脚本:常见端口获取Password

目录脚本源码用法效果及示例SSH (80)端口FTP (21)端口HTTP (80)端口失败示例SMTP (25)端口版本:Grey Hack v0.7.3618 - Alpha 适用于SSH (22) 端口、FTP (21) 端口、HTTP…

什么时候用synchronized

解决安全问题的方式: java中提供了一个同步机制: 解决原理:让多条操作共享数据的代码在某一个时间段,被一个线程执行完,在执行过程中,其它线程不可以参与执行 同步格式: 同步代码块:…

pygame写游戏,常用代码记录

2019独角兽企业重金招聘Python工程师标准>>> pygame 写起游戏来还是挺不错的,不过我也没用过别的什么东西写,所以也没什么发言权。 些游戏我是从这篇文章开始入门的13岁天才儿童教你写游戏 下面是一些常用的代码片段,记录下来&…

每天一个linxu命令6之jps  查看java进程的端口

jps -- Java Virtual Machine Process Status Tool 可以列出本机所有Java进程的pid jps [ options ] [ hostid ] 选项 -q 仅输出VM标识符,不包括class name,jar name,arguments in main method -m 输出main method的参数 -l 输出完全的包名,应用主类名&…

聊聊 C++ 中几类特殊成员函数

🚀 优质资源分享 🚀 学习路线指引(点击解锁)知识定位人群定位🧡 Python实战微信订餐小程序 🧡进阶级本课程是python flask微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一…

poj2975——Caesar密码

原题: Description 据说最早的 密码来自于罗马的凯撒大帝。消息加密的办法是:对消息原文中的每个字母,分别用该字母之后的第5个字母替换(例如:消息原文中的每个字母A都分别替换成字母F)。而你要获得消息原文…

有趣的面试题

MR找共同朋友,数据格式如下: A B C D E F B A C D E C A B E D A B E E A B C D F A 第一字母表示本人,其他是他的朋友,找出有共同朋友的人,和共同朋友是谁 1 import java.io.IOException;2 import java.util.Set;3 im…

mysql 数据库定时备份 增量/全备份

echo 开始:$Begin 结束:$Last $GZDumpFile succ >> $LogFilecd $BakDir/daily/bin/rm -f * 2)增量备份脚本(脚本中mysql的数据存放路径是/home/mysql/data,具体根据自己的实际情况进行调整)[roottest-huanqiu ~]# vim /root…

【 Grey Hack 】万金油脚本:路由器漏洞检测

目录脚本源码用法效果及示例版本&#xff1a;Grey Hack v0.7.3618 - Alpha 脚本源码 if params.len ! 2 or params[0] "-h" or params[0] "--help" then exit("<b>Usage: "program_path.split("/")[-1]" [ip_address] […

中小企业ERP实施的项目管理

目前&#xff0c;我国正在大力推行企业信息化建设&#xff0c;作为一种包含了现代管理思想的ERP(Enterprise Resource Planning)系统日益成为现代企业业务运作的主要工具&#xff0c;为了提升管理水平&#xff0c;提升企业竞争力&#xff0c;在一些实力较强的企业纷纷导入ERP之…

Java开发学习(十一)----基于注解开发bean作用范围与生命周期管理

&#x1f680; 优质资源分享 &#x1f680; 学习路线指引&#xff08;点击解锁&#xff09;知识定位人群定位&#x1f9e1; Python实战微信订餐小程序 &#x1f9e1;进阶级本课程是python flask微信小程序的完美结合&#xff0c;从项目搭建到腾讯云部署上线&#xff0c;打造一…