gulp

1.gulp是什么？

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

官网：http://gulpjs.com/

中文网： http://www.gulpjs.com.cn/

插件：http://gulpjs.com/plugins/

Gitbook：https://wizardforcel.gitbooks.io/gulp-doc/content/2.html

2.优点：

1.1.1 易于使用

通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。

1.1.2 构建快速

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

1.1.3 易于学习

通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

1.1.4 插件高质

gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

3.gulp开始

(1)全局安装npm  install  –g  gulp

(2)安装到本地 npm install gulp –save-dev

(3)在项目根目录新建gulpfile.js

(4)编写文件内容并运行

var gulp = require('gulp');
gulp.task('default',function(){console.log('hello world');
});

(5)运行：

在根目录下打开命令窗口，输入gulp即可

（默认运行gulpfile.js文件）

4.globs语法

匹配符

说明

*

匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾

**

匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。

?

匹配文件路径中的一个字符(不会匹配路径分隔符)

[...]

匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法

!(pattern|pattern|pattern)

匹配任何与括号中给定的任一模式都不匹配的

?(pattern|pattern|pattern)

匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?

+(pattern|pattern|pattern)

匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+

*(pattern|pattern|pattern)

匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*

@(pattern|pattern|pattern)

匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)

 

下面以例子来加深理解

* 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js

*.* 能匹配 a.js,style.css,a.b,x.y

*/*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js

** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件

**/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js

a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z

a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录

?.js 能匹配 a.js,b.js,c.js

a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符

[xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符

[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

Globs语法是匹配文件夹和文件路径的，和正则表达式类似，但是语法有区别，作用没有正则表达式强大

5.gulp核心api

1>gulp.task

  如果task的名称为default，默认执行该任务，不执行其他任务；

  如果要执行某个指定任务，输入gulp + 任务名；

任务依赖：

如果任务相互之间没有依赖，任务就会按你书写的顺序来执行，如果有依赖的话则会先执行依赖的任务。但是如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务。

  第二个参数是任务的字符串数组，就是启动其他任务的作用，这几个任务是同时启动，但是谁先执行完得看任务里面的工作量，不是看启动任务的顺序

gulp.task('default',['a','b','c'],function(){console.log('默认任务')
});
gulp.task('a',function(){console.log('a任务')
});
gulp.task('b',function(){console.log('b任务')
});
gulp.task('c',function(){console.log('c任务')
});
gulp.task('default',['a','b'],function(){
console.log('默认任务')
});
gulp.task('a',function(){
console.log('a任务')
});
gulp.task('b',function(){
setTimeout(function(){console.log('b任务')
},3000)
});
//执行过程，先执行default，同时启动了a、b任务，再执行回调的console.log('默认任务')，但是b任务是异步任务，所以执行结果是：
a 默认任务 b

如果想要a  b任务执行完后再执行default任务该怎么办？

有三种方法可以实现：

 

注意：推荐以后都在gulp.src前面写return 

 

2>gulp.src

 多文件：

3>gulp.dest

用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。

4>gulp.watch

6.插件

1>del:删除文件夹和文件

https://github.com/sindresorhus/del

2>gulp-concat：合并js文件

https://github.com/contra/gulp-concat

3>gulp-concat-css：合并css文件

https://github.com/mariocasciaro/gulp-concat-css

4>gulp-uglify：压缩js文件

https://github.com/terinjokes/gulp-uglify

5>gulp-cssnano:压缩css

https://github.com/ben-eb/gulp-cssnano

6>gulp-rename:重命名文件

https://github.com/hparra/gulp-rename

7>gulp-minify-html：压缩页面

https://github.com/sanfords/gulp-minify-html

8>gulp-imagemin：压缩图片

https://github.com/sindresorhus/gulp-imagemin

9>gulp-open:自动打开浏览器

https://github.com/stevelacy/gulp-open

10>gulp-notify：任务完成会自动提示，然后提示语消失

https://github.com/mikaelbr/gulp-notify

11>gulp-load-plugins:依赖自动加载(自动加载依赖插件的插件)

https://github.com/jackfranklin/gulp-load-plugins

12>gulp-livereload：自动刷新页面

https://github.com/vohof/gulp-livereload

类似插件：browser-sync(是一个大型的插件)

13>gulp-useref：有了这个插件，concat和gulp-concat插件就可以不用了

14>gulp-sass:处理sass文件

15>gulp-autoprefixer：自动处理前缀

   -moz火狐       -o欧朋        -webkit苹果和谷歌        -ms IE

16>gulp-sequence

var runSequence = require('run-sequence');

gulp-sequence:处理复杂的任务依赖问题，控制任务的启动，简化了任务的依赖关系

 注意：

      *:这个插件中写的任务得用cb或者是返回文件流

      *:简化了任务的依赖关系,控制了任务的启动流程

gulp.task('sequence',function(cb){gulpSequence('clean',['js','html','css',images'],'task1','task2');//执行流程：先执行clean，不管这个任务多大，都必须等它先执行完，
     //之后同时启动'js','html','css',images'，都执行完后再启动task1，
     //执行完后再启动执行task2
})

17>gulp-html-replace

 

 

 

 

 

一个完整的gulpfile.js

/*** gulp的默认配置文件，在这面写gulp的任务*/
var gulp = require('gulp')
// 删除文件和文件夹插件
var del = require('del')
// 合并js插件
var concat = require('gulp-concat')
// 压缩混淆js插件
var uglify = require('gulp-uglify')
// 合并css插件
var concatCss = require('gulp-concat-css')
// 压缩css插件
var cssnano = require('gulp-cssnano')
// 重命名插件
var rename = require("gulp-rename")
// 压缩html插件
var minifyHTML = require('gulp-minify-html')
// 压缩图片插件
var imagemin = require('gulp-imagemin')
// 自动打开浏览器插件
var open = require('gulp-open')
// 消息通知插件
var notify = require("gulp-notify")
// 处理复杂的任务依赖问题
var gulpSequence = require('gulp-sequence')
// 处理sass文件
var sass = require('gulp-sass');
// 自动增加前缀
var autoprefixer = require('gulp-autoprefixer')
// 有了这个插件，concat和gulp-concat插件就可以不用了
var useref=require('gulp-useref')// 1、名称如果叫default，那么这就是一个默认任务了，当你在一个命令窗口运行的gulp命令的时候，他会自动去找gulpfile.js文件中任务名称叫default的任务去执行
// 2、指定某一个任务去执行，命令就是gulp+任务名
// 3、第二个参数是一个任务的字符串数组，作用就是启动数组中相同名称的任务，不过这几个任务是同时启动的，谁先执行完得看任务里面的工作量，而不是按照顺序执行完毕// =========================开发任务配置=============================//// 定义开发配置
gulp.task('develop', ['sequence'], function () {gulp.src('dist/index.html').pipe(open({app: 'chrome'})).pipe(notify("项目构建完成！"))
});// 定义文件变化的监听任务
gulp.task('watch', function () {// 一般在开发中这里要执行的是类似于scss，less，es6之类的监听构建gulp.watch('src/js/*.js', ['js'])gulp.watch('src/css/*.css', ['css'])gulp.watch('src/scss/*.scsss', ['scss','css'])gulp.watch('src/*.html', ['html'])
})// brower-sync// =========================部署任务配置=============================//
// 定义部署配置
gulp.task('build', ['sequence'], function () {gulp.src('dist/index.html').pipe(open({app: 'chrome'})).pipe(notify("项目构建完成！"))
});gulp.task('sequence', function (cb) {// 1、这个插件中写得任务得用cb或者是返回文件流// 2、简化了任务的依赖关系，控制了任务启动流程gulpSequence('clean','scss','html',['js', 'css', 'image'], cb)
})// =========================通用任务配置=============================//// 定义文件夹的清空任务
gulp.task('clean', function (cb) {del(['dist']).then(function () {cb()console.log('清空了dist目录里面里面的东西')})
})// 处理js文件
gulp.task('js', function () {var stream = gulp.src('src/js/*.js')// .pipe(concat('all.js')).pipe(gulp.dest('dist/js')).pipe(uglify()).pipe(rename({// dirname: 'dist/js',basename: "all",// prefix: "bonjour-",suffix: ".min",extname: ".js"})).pipe(gulp.dest('dist/js'))return stream
})// 处理css文件
gulp.task('css', function () {var stream = gulp.src('src/css/*.css').pipe(autoprefixer({browsers: ['last 2 versions'],cascade: false}))// .pipe(concatCss('all.css')).pipe(gulp.dest('dist/css')).pipe(cssnano()).pipe(rename({// dirname: 'dist/css',basename: "all",// prefix: "bonjour-",suffix: ".min",extname: ".css"})).pipe(gulp.dest('dist/css'))return stream
})// 处理sass文件
gulp.task('sass', function () {return gulp.src('src/sass/*.scss').pipe(sass().on('error', sass.logError)).pipe(gulp.dest('src/css'));
});// 处理html插件
gulp.task('html', function () {var stream = gulp.src('src/*.html').pipe(useref()).pipe(minifyHTML()).pipe(gulp.dest('dist'))return stream
})// 压缩图片插件
gulp.task('image', function () {var stream = gulp.src('src/images/*.*').pipe(imagemin()).pipe(gulp.dest('dist/images'))return stream
})

 

转载于:https://www.cnblogs.com/luxiaoxiao/p/6428765.html

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

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

相关文章

往vxe-table添加渲染器怎么添_赚大了！飘窗上装书桌，加扇折叠窗，等于为家里又多添一间房...

往vxe-table添加渲染器怎么添_赚大了！飘窗上装书桌，加扇折叠窗，等于为家里又多添一间房...

阅读本文前，请您先点击上面蓝色字体，再点关 注这样您就可以继续免费收到文章注：本文转载自网络，如有侵权，请在后台留言联系我们进行删除，谢谢！ …
阅读更多...
【六大排序详解】中篇 :选择排序 与 堆排序

【六大排序详解】中篇 :选择排序 与 堆排序

选择排序 与 堆排序 选择排序 选择排序 与 堆排序1 选择排序1.1 选择排序原理1.2 排序步骤1.3 代码实现 2 堆排序2.1 堆排序原理2.1.1 大堆与小堆2.1.2 向上调整算法2.1.3 向下调整算法 2.2 排序步骤2.3 代码实现 3 时间复杂度分析 Thanks♪(･ω･)&#…
阅读更多...
java中contains的用法_java容器中所有接口和类的用法

java中contains的用法_java容器中所有接口和类的用法

我这里讲一下如何下载java的api文档还有就是容器和容器之间进行的操作每一个地方称之为一个节点，每一个节点包含了3部分(上一个节点，下一个节点，以及我们自己的数据部分)需要多个线程共享的时候通过键对象来找值对象1 java中的length属性是针…
阅读更多...
lcs文本相似度_具有LCS方法的通用文本比较工具

lcs文本相似度_具有LCS方法的通用文本比较工具

lcs文本相似度常见的问题是检测并显示两个文本的差异（尤其是几百行或几千行）。 使用纯java.lang.String类方法可能是一种解决方案，但是对于此类操作最重要的问题是，“性能”将不能令人满意。 我们需要一种有效的解决方案&#xff…
阅读更多...
MySQL--开发技巧(一)

MySQL--开发技巧(一)

Inner Join: Left Outer Join: Right Outer Join: Full Join: Cross Join： SELECT t1.attrs ,t2.attrs FROM t1 CROSS JOIN t2 使用Join更新表： UPDATE table1 SET attr2 WHERE attr1 IN (SELECT table2.attr1 FROM table1 INNER JOIN table2 ON tab…
阅读更多...
js url解码gbk_使用js解码gbk编码的字符串

js url解码gbk_使用js解码gbk编码的字符串

如下字符串为 “产后恢复肚子”%B2%FA%BA%F3%BB%D6%B8%B4%B2%D9%CA%D3%C6%B5%BD%CC%B3%CC直接使用js的解码函数解码得到的都是乱码,可以使用下面的函数进行解码/*** js解码gbk url编码的字符串* param {[type]} str gbk编码字符串* param {[type]} charset 字符串的…
阅读更多...
mysql 5.7 insert_MySQL5.7 支持一个表有多个INSERT/DELETE/UPDATE触发器

mysql 5.7 insert_MySQL5.7 支持一个表有多个INSERT/DELETE/UPDATE触发器

在MySQL5.6版本里，不支持一个表有多个INSERT/DELETE/UPDATE触发器。例如创建t1表两个INSERT的触发器：DELIMITER $$USE test$$DROP TRIGGER /*!50032 IF EXISTS */ t1_1$$CREATE/*!50017 DEFINER ‘admin‘‘%‘ */TRIGGER t1_1 AFTER INSERT ON t1FOR E…
阅读更多...
Java回调机制解读

Java回调机制解读

模块间调用 在一个应用系统中，无论使用何种语言开发，必然存在模块之间的调用，调用的方式分为几种： （1）同步调用 同步调用是最基本并且最简单的一种调用方式，类A的方法a()调用类B的方法b()&#…
阅读更多...
Java TDD简介–第1部分

Java TDD简介–第1部分

欢迎来到测试驱动开发 （TDD）系列的介绍。 我们将在TDD上下文中讨论Java和JUnit ，但这只是工具。 本文的主要目的是使您全面了解TDD，而无论使用哪种编程语言和测试框架。 如果您在项目中不使用TDD，那么您要么很懒&…
阅读更多...
状态模式 处理订单状态_将状态机模式实现为流处理器

状态模式 处理订单状态_将状态机模式实现为流处理器

状态模式 处理订单状态在我的上一个博客中，我说过我真的以为某些“四人行”（GOF）模式已经过时了，如果不是过时的话肯定不受欢迎。 特别是我说过StateMachine没什么用，因为您通常会想到另一种更简单的方式来执行您正在执…
阅读更多...
mysql 连续签到天数_最大连续签到天数-sql

mysql 连续签到天数_最大连续签到天数-sql

SELECT MIN(rq) as 起始日期, MAX(rq) as 终止日期, MAX(id1) - MIN(id1) 1 as 持续天数,id3 as 累计签到天数,nameFROM (SELECT datediff(rq,2020-02-01 )id1, (SELECT COUNT(1)FROM tmptableWHERE rq < a.rq andtype 是) id2,(SELECT COUNT(1)FROM tmptableWHEREtype 是…
阅读更多...
mysql 两个查询结果合并去重_《MySQL 入门教程》第 21 篇 集合操作符

mysql 两个查询结果合并去重_《MySQL 入门教程》第 21 篇 集合操作符

文章来源&#xff1a;https://blog.csdn.net/horses/article/details/108174837来源平台&#xff1a;CSDN原文作者&#xff1a;不剪发的Tony老师数据表与集合理论中的集合非常类似&#xff0c;表是由行组成的集合。SQL 标准定义了基于行的各种集合操作&#xff1a;并集运算(UNI…
阅读更多...
binutils工具集之---ar

binutils工具集之---ar

1.如果要将多个.o文件生成一个库文件&#xff0c;则存在两种类型的库&#xff0c;一种是静态库&#xff0c;在linux里面后缀是.a&#xff0c;另一种是动态库&#xff0c;后缀为.so。 当可执行程序要与静态库进行链接时&#xff0c;所用到的库中的函数和数据会被拷贝到最终的可执…
阅读更多...
jax-rs jax-ws_Google App Engine JAX-RS REST服务

jax-rs jax-ws_Google App Engine JAX-RS REST服务

jax-rs jax-ws在本文中&#xff0c;您将学习如何使用JAX-RS参考实现&#xff08;Jersey&#xff09;创建REST服务并将其部署在Google AppEngine上。 先决条件 对于本教程&#xff0c;您将需要&#xff1a; 一个Google AppEngine帐户 Eclipse Galileo&#xff08;3.5.x&#xf…
阅读更多...
[转]使用C#开发ActiveX控件

[转]使用C#开发ActiveX控件

前言 ActiveX控件以前也叫做OLE控件&#xff0c;它是微软IE支持的一种软件组件或对象&#xff0c;可以将其插入到Web页面中&#xff0c;实现在浏览器端执行动态程序功能&#xff0c;以增强浏览器端的动态处理能力。通常ActiveX控件都是用C或VB语言开发&#xff0c;本文介绍另一…
阅读更多...
用Java测试多线程代码

用Java测试多线程代码

测试多线程代码是一个艰巨的挑战。 尝试测试并发性时获得的第一个建议是尽可能地在代码中隔离并发问题。 这是一般的设计建议&#xff0c;但在这种情况下甚至更重要。 确保首先正确地对并发构造所包装的逻辑进行单元测试。 否则&#xff0c;您可能会花费很长时间尝试找出一个并…
阅读更多...
php pdo mysql query_PHP+MYSQL中使用PDO的query方法

php pdo mysql query_PHP+MYSQL中使用PDO的query方法

一 代码class"php">PDO连接MySQL数据库IDPDO数据库时间$dbmsmysql; //数据库类型 ,对于开发者来说&#xff0c;使用不同的数据库&#xff0c;只要改这个&#xff0c;不用记住那么多的函数$hostlocalhost; //数据库主机名$dbNamedb_database15; //使用的数据库$use…
阅读更多...
java 冒号 正则表达式_Java正则表达式问号冒号的使用

java 冒号 正则表达式_Java正则表达式问号冒号的使用

在Java和Javascript中正则表达式字符串前面加上?:表示非捕获型匹配&#xff0c;否则就是捕获型匹配。捕获型括号会将匹配到的内容捕获到一些变量里&#xff0c;这些变量按照捕获型括号的左括号为顺序从1开始编号。为了避免括号太多使编号混乱&#xff0c;也为了避免无用的捕获…
阅读更多...
Hibernate中的一对多XML映射

Hibernate中的一对多XML映射

一对多关系指出一个实体的单个实例与另一个实体的多个实例相关联。 换句话说&#xff0c;一个表中的每个记录与另一个表中的多个记录相关联。 让我们看看如何通过XML映射文件在Hibernate中定义这种关系。 1.实体关系图 假设我们已经在数据库中创建了学生表和部门表&#xff0…
阅读更多...
camel eip_Apache Camel教程– EIP，路由，组件，测试和其他概念的简介

camel eip_Apache Camel教程– EIP，路由，组件，测试和其他概念的简介

camel eip公司之间的数据交换增加了很多。 必须集成的应用程序数量也增加了。 这些接口使用不同的技术&#xff0c;协议和数据格式。 但是&#xff0c;这些应用程序的集成应以标准化的方式建模&#xff0c;有效实现并由自动测试支持。 企业集成模式&#xff08;EIP&#xff09;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023