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'));
});
Gulp:自动化构建工具的更多相关文章
- gulp自动化构建工具的使用
gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...
- gulp自动化构建工具
gulp 自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/ 中文网 http://gulpjs.com/plugins/ 英文网 ...
- Gulp(自动化构建工具 )
前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1. 压缩js 2. 压缩css 3. 压缩less 4. 压缩图片 等等… 我们完全可以利用Gulp ...
- gulp自动化构建工具安装使用(1)
我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...
- gulp自动化构建工具使用总结
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- Gulp自动化构建工具的简单使用
相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...
- gulp自动化构建工具使用
gulpfile.js: var gulp = require("gulp"); var imagemin = require("gulp-imagemin") ...
- 前端自动化构建工具gulp的使用总结
前端自动化构建工具gulp的使用总结 博主最近偶的空闲,在此对gulp的使用做一个总结,让小伙伴知道如何合理的使用gulp以及gulp的使用技巧. 谈到gulp,有人可能就会想到另外一个构建工具gru ...
- gulp前端自动化构建工具使用
(1)新建项目目录gulp_web (2)项目目录下建目录src里面存放需要进行gulp处理的文件目录及文件 (3)gulpfile.js文件内容为声明需要打包应用的gulp组件及打包文件路径和打包任 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
随机推荐
- internet协议入门
前言 劳于读书,逸于作文. 原文地址:internet协议入门 博主博客地址:Damonare的个人博客 博主之前写过一篇博客:网络协议分析,在这篇博客里通过抓包,具体的分析了不同网络协议的传送的数据 ...
- android 模拟2048
利用节日休息时间在ANDROID上进行学习并模拟2048游戏. 效果如下图: 制作思路: 1.画出2048游戏主界面,根据手机屏幕宽高度进行计算并画出每个方块的大小. @Override protec ...
- jquery获取dropdownlist的value和text值
1.jquery //获取value值 $("#ddlSubmodel").val(); //获取text值 $("#ddlSubmodel").find(&q ...
- gRPC源码分析0-导读
gRPC是Google开源的新一代RPC框架,官网是http://www.grpc.io.正式发布于2016年8月,技术栈非常的新,基于HTTP/2,netty4.1,proto3.虽然目前在工程化方 ...
- dagride实现模糊查询
一:首行放置搜索元素(可以是easyui中的input.datetimebox.combox等等) 将各个元素的value值获取到存为Json格式(data{a:..,b:..,c:..}),再回车或 ...
- JS正则表达式(JavaScript regular expression)
RegExp直接量和对象的创建 就像字符串和数字一样,程序中每个取值相同的原始类型直接量均表示相同的值,这是显而易见的.程序运行时每次遇到对象直接量(初始化表达式)诸如{}和[]的时候都会创建新对象. ...
- Dynamics CRM 2015-如何修改Optionset Default Value
在日常工作中,我们时不时会遇到在CRM测试环境上添加Optionset的时候,Default Value是某个值,但换到Production环境或者其他环境,添加的时候,Default Value可能 ...
- 对.net 程序进行源码混淆
还是那个一卡通的程序,这几天做了一点更新. 因为里面涉及到对数据库的链接,含IP地址和账户密码,一旦被反编译窃取,则源码泄露不说,也给服务器带来一定的风险! 下载ILSpy程序,对自己开发的.net程 ...
- iOS开发中的数学函数
在iOS开发当中...我们往往会涉及到一些算法...为了节省一些时间...让APP很快地被开发出来...我们需要对各类函数有一定的了解...接下来...我把部分常用函数分享出来...希望能帮到大家.. ...
- 【转】Android SDK Samples,学习Android的好方法
转载地址:http://blog.csdn.net/rowland001/article/details/50886288 从今天开始呢,我要开始学习Google家自己出的Android代码示例,总觉 ...