Gulp:自动化构建工具
一.介绍:
gulp是一个基于流的构建工具,可以自动执行指定的任务,简洁且高效
二.优点:
- 开发环境下,想要能够按模块组织代码,监听实时变化
- css/js预编译,postcss等方案,浏览器前缀自动补全等
- 条件输出不同的网页,比如app页面和mobile页面
- 线上环境下,我想要合并、压缩 html/css/javascritp/图片,减少网络请求,同时降低网络负担
三.安装:
1.全局安装:cnpm install -g gulp
2.本地安装:cnpm install --save-dev gulp
四.使用:
1.在项目根目录下创建一个名为 gulpfile.js 的文件:
var gulp = require('gulp');
gulp.task('default',function(){
//将你的默认的任务代码放在这里
});
2.运行gulp:
在文件目录命令行中输入:gulp 。
默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。
想要单独执行特定的任务(task),请输入 gulp <task> <othertask>
。
五.核心API介绍:
1.gulp.task(name[,deps],fn):
task()方法用于定义任务,传入名字、依赖任务数组、函数即可,gulp会先执行任务数组,结束后调用定义的函数,可以通过此手段控制任务的执行顺利。
例子:要定义一个任务build来执行css、js、imgs这三个任务,我们可以通过指定一个任务数组而不是函数来完成。
gulp.task('build',['css','js','imgs']);
2.gulp.src(globs[,options]):
src()方法输入一个glob或者glob数组,然后返回一个可以传递给插件的数据流
Gulp使用node-glob来从你指定的glob里面获得文件:
例如:
(1).app.js 精确匹配
(2).*.js 能匹配js后缀的文件
(3).**/*.js 能匹配多级目录下的js 文件(包括当前目录下)
(4).!js/app.js 精确排除
例子:js目录下包含了压缩和未压缩的js文件,我们想要压缩还没有被压缩的文件
gulp.src(['js/**/*.js','!js/**/*.min.js']);
3.gulp.dest(path[,options])
dest()方法用来写文件,第一个参数表示最终输出的目录名。注意,它无法允许我们指明最终输出的文件名,只能指定输出文件夹名,而且在文件夹不存在的情况下会自动创建。
例子:把开发目录src下的js文件输出到部署目录dist下
gulp.src('src/**/*.js')
.pipe(gulp.dest('dist'));
4.gulp.watch(globs[,opts],cb) 或者 gulp.watch(glob[,opts],tasks)
watch() 方法可以监听文件,它接收一个glob或者glob数组以及一个任务数组来执行回调
// 当templates目录下的模板文件发生变化,自动执行编译任务
gulp.task('watch',function (event){
gulp.watch('templates/*.tmpl.html',['artTemplate']);
console.log('Event type: ' + event.type); // added ,changed, or deleted
console.log('Event path: ' + event.path); // The path of the modified file
});
Gulp.watch()的另一个非常好的特性是返回watcher对象
(1).watcher对象可以监听很多事件:
change 文件变化时触发
end 在watcher结束时触发
error 在出现error时触发
ready 在文件被找到并正被监听时触发
nomatch 在glob没有匹配到任何文件时触发
(2).Watcher对象也包含了一些可以调用的方法:
watcher.end() 停止watcher
watcher.files() 返回watcher监听的文件列表
watcher.add(glob) 将与指定glob相匹配的文件添加到watcher(也接受可选的回调当第二个参数)
watcher.remove(filepath) 从watcher中移除个别文件
六.配置gulpfile.js:
任务会让所有的文件匹配js/*.js,并且执行JSHint,然后打印输出结果,取消文件缩进,最后把他们合并起来,保存为build/app.js,整个过程如下图所示:
Read files -> JSHint -> Minify -> Concat -> Write files:
代码:
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('js',function(){
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});
转载于:https://www.cnblogs.com/zhihaospace/p/6243428.html
Gulp:自动化构建工具相关推荐
- gulp自动化构建工具--压缩css--学习笔记
gulp是基于node实现的,那么我们就需要先安装node 打开 https://nodejs.org/ 点击绿色的 INSTALL 按钮下载安装 node. 以下操作是在Windows环境下运行. ...
- 前端自动化构建工具:用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...
- (28)自动化构建工具Gulp
一.自动化构建工具介绍 Grunt:它是最早的自动化构建工具,它是基于临时文件进行构建的,构建速度慢. Gulp:它是基于内存进行构建的.是我们目前最流行最常用的自动化构建工具.构建速度快,上手更容易 ...
- 常用的前端自动化构建工具gulp/grunt/fis --简介
常用的前端自动化构建工具 之前我们自动化构建将入门级别使用的 NPM Scripts自动化构建工具对于相对复杂的项目构建会比较吃力,那么我们会了解 Gulp Grunt fIS 用法基本相同:都是通过 ...
- 前端自动化构建工具介绍
前端自动化构建工具有: Bower,Gulp,Grunt,node,yeoman... 自动化构建是作为前端工程化中重要的部分,承担着若干需要解决的环节.包括流程管理.版本管理.资源管理.组件化.脚手 ...
- 亚信UED前端流程自动化构建工具
亚信UED前端流程自动化构建工具 亚信UED前端流程自动化构建工具 aiflow 亚信 gulp 项目由亚信CMC UED团队创建,用于解决前端项目构建的流程管理,以及复杂度问题解决. 亚信UED前端 ...
- 前端工程化实战 - 自动化构建工具
文章目录 一.自动化构建简介 二.自动化构建初体验 2.1 场景描述 2.2 实际操作体验 三.常用的自动化构建工具 3.1 Grunt 3.2 Gulp 3.3 FIS 四.自动化构建工具 Grun ...
- 前端自动化构建工具--Plop
前端自动化构建工具 ---- Plop 前言:周末在家学习了一些前端自动化构建工具,Generator.Plop.Grunt.Gulp,我还以为目前用不到这些工具,没想到周一一上班看到这周任务是要开发 ...
- 前端自动化构建工具合集之gulp-姜威-专题视频课程
前端自动化构建工具合集之gulp-2984人已学习 课程介绍 Gulp自动化构建系统,使用node.js串流让构建更的组合,利用外挂(plugins)使应用更灵活,简单的四个命令,组合 ...
- python自动化构建工具_Python自动化构建工具scons使用入门笔记
这段时间用到了scons,这里总结下,也方便我以后查阅. 一.安装sconsLinux环境(以CentOS为例) 1.yum安装 yum install scons 2.源码安装 下载scons:ht ...
最新文章
- Linux下通过txt文件导入数据到MySQL数据库
- iOS进阶之底层原理-应用程序加载(dyld加载流程、类与分类的加载)
- SQL 给字符串补0
- 这个女生躲在衣柜等男友回家,结果竟是......
- P1131-[ZJOI2007]时态同步【树形dp】
- 配置hibernate_测试Hibernate的最低配置
- python 读取文件时报错UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 205: illegal multib
- markdown 语法_markdown特殊语法之上下标
- 云计算安全之CCSKv4.0(201910考的)
- 使用NFC读卡器ACR122u读取银行卡信息
- 每日一学20——凉鞋的简易消息机制
- 3D打印探讨:三个应用方向与四项风险
- Linux环境部署:开启电脑虚拟化
- 关于前端后台管理系统总结
- 主板常见故障的维修方法
- 闲鱼怎么引流到淘宝客?吸引住大量的粉丝
- 爬虫基础_urllib
- 配置 WinHTTP 的代理设置
- Android应用测试总结
- 十进制和二进制简单计算
热门文章
- android读取raw文件示例
- win10解决Mysql net start mysql启动,提示发生系统错误 5 拒绝访问
- Python中的排序sorted(d.items(), key=lambda x: x[1])
- php自己写配置项,创建配置文件 用PHP写出自己的BLOG系统 2
- 关于 Quartz 框架如何引入 Dubbo 服务
- 上海网络推广为大家讲解细节标签能给网站带来的作用与效果!
- 湖南网络推广中网络SEO竞争越来越激烈,怎么才能实现“弯道超车”呢?
- 浅析域名购买的注意事项
- 如何提高营销型网站与搜索引擎之间的信任度?
- 网站文章不收录怎么办!