前端自动化工具gulp入门基础
gulp是前端开发过程中经常要用到的工具,非常值得花时间去掌握。利用gulp,我们可以使产品流程脚本化,节约大量的时间,有条不紊地进行业务开发。本文简单讲一下入门gulp需要掌握的东西。
安装gulp
首先,我们需要在全局安装gulp。
npm install -g gulp
然后,我们切到项目根目录,在项目中也进行gulp的安装,表明项目对gulp的依赖。
npm install --save-dev gulp
接着,我们在项目根目录里新建一个gulpfile.js文件,这个是gulp的配置文件。
使用gulp
学习gulp的使用,我们需要先学习好常用的语法。
gulp.src(globs[, options])
输出符合所匹配模式(glob)的文件。将返回一个stream,可以被piped传递到其他gulp插件中继续操作。
gulp.task(name[, deps], fn)
定义一个gulp任务,name是任务名称。[, deps]是任务依赖。fn是任务回调函数。
(1)任务依赖的形式可以是:
gulp.task('two', ['one'], function() {
// 'one' 完成后
});
gulp.task('one', function(cb) {
// cb();
// return stream;
// return promise;
});
其中one应该使用一个callback,或者返回一个promise 或stream,表明依赖的任务完成了。
(2)回调函数体会是这种形式:
gulp.src().pipe(someplugin())
gulp.dest(path[, options])
将pipe进来的stream输出文件到指定的路径下,如:
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
gulp.watch
gulp.watch(glob [, opts], tasks)
监视文件,并且在文件发生改动时候执行一个或者多个task。监听change事件实现。
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
gulp.watch(glob [, opts, cb])
监视文件,并且在文件发生改动时候执行回调函数cb。
gulp.watch('js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
gulp.run
gulp模块的run方法,表示要执行的任务。可能会使用单个参数的形式传递多个任务。任务是尽可能多的并行执行,并且可能不会按照指定的顺序执行。当不需要指定执行顺序时,可以适当使用。
gulp.run('task1','task2','task3');
gulp使用技巧
替代任务依赖写法
我们需要让任务有秩序地执行,那么可以使用第三方插件gulp-sequence。
// 如果使用gulp-sequence,就不需要附加任务依赖了。数组内的任务平行执行,数组外的按顺序执行。所以这里是svgstore、uglify-js并行执行,然后执行public任务。
gulp.task('sequence1', function() {
sequence(['svgstore', 'uglify-js'], 'public');
});
修复gulp.watch方法只执行一次的问题
利用gulp-watch,gulp-batch两个工具,用法如下:
// 当监听到svgs目录下任意svg文件变动时,执行svgstore任务
gulp.task('watch', function() {
watch('./assets/svgs/*.svg', batch(function(events, done) {
gulp.start('svgstore', done);
}));
});
前端自动化工具gulp入门基础的更多相关文章
- 前端自动化工具gulp自动添加版本号
之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...
- (转)前端构建工具gulp入门教程
前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...
- 学习安装并配置前端自动化工具Gulp
Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...
- 前端自动化工具 -- Gulp 使用简介
gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用 ...
- 前端自动化工具 -- gulp https://angularjs.org/
gulp是基于流的前端自动化构建工具. gulp是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 二.基本用法--插件使用 gu ...
- 前端自动化工具 gulp
最近一个项目才接触这些自动化工具 webpack gulp grunt 等等.. webpack 可以引入模块 和 压缩 gulp 和 grunt 可以压缩 这里只说下gulp 因为项目里只用到gu ...
- 安装并配置前端自动化工具-gulp
由于现在前端自动化已经很有必要了,所以我今天死皮烂脸的找了2位前端大咖帮助我安装和配置gulp,讲真,这一步步弄下来直到安装配置成功,到现在还是迷迷糊糊,不过我还是把这些步骤给记录下来,以防下次不记得 ...
- 【gulp】前端自动化工具---gulp的使用(一)------【巷子】
什么是gulp? 基于node的自动化构建工具 扩展:开发的时候分为2个节点一个是开发阶段 另一个是部署阶段 开发阶段:源文件不会被压缩 部署阶段:所有文 ...
- 前端构建工具gulp入门教程(share)
参考自:http://segmentfault.com/a/1190000000372547 资源: npm上得gulp组件 gulp的Github主页 官方package.json文档 gulp中文 ...
随机推荐
- STL序列式容器之list
一,list容器基本概念 1.list容器基本知识 list容器的底部数据结构为双向链表,可以高效的进行插入和删除元素. list因为底层数据结构是双向链表,因此不支持下标操作和.at()函数的操作. ...
- hudson绑定svn和vs2008实现持续构建
作者:朱金灿 来源:http://blog.csdn.net/clever101 首先需要在服务器上安装以下工具: (1)hudson,我推荐从http://hudson-ci.org/downloa ...
- http_load测试入门
大致步骤: 1.在对应文件夹下边新建.TXT文件: 2.在该文件下填上待测试URL地址,建议100行以上: 3.管理员权限CMD,对应目录下运行命令即可,如: a) http_load -pa ...
- 机器学习编程接口(api)设计(oop 设计)
fit: 对于 kmeans 来说,fit 的过程,就是训练,自然所需的参数,主要是数据集和聚类中心数, 1. classification(分类) def train(train_images, t ...
- 论题Cascade Object Detection with Deformable Part Models一个怀疑
该文的作者是Pedro F. Felzenszwalb等一下,著名DPM在目标检测模型.本文的工作是DPM(变形组件模型)级联,以加快检测速度. 加速的方式,现在其次是计算总结成绩的某些部分,假设小于 ...
- C++使用Windows API CreateMutex函数多线程编程
C++中也可以使用Windows 系统中对应的API函数进行多线程编程.使用CreateThread函数创建线程,并且可以通过CreateMutex创建一个互斥量实现线程间数据的同步: #includ ...
- 机器学习、深度学习实战细节(batch norm、relu、dropout 等的相对顺序)
cost function,一般得到的是一个 scalar-value,标量值: 执行 SGD 时,是最终的 cost function 获得的 scalar-value,关于模型的参数得到的: 1. ...
- WPF公章制作之2
原文:WPF公章制作之2 早前,我曾写过一篇:"在WPF中制作正圆形公章"(http://blog.csdn.net/johnsuna/archive/2007/10/12/182 ...
- VxWorks启动过程的详细解释(上)
vxworks有三个图像: VxWorks Image有三种类型的文件 Loadable Images:由Boot-ROM引导通过网口或串口下载到RAM ROM-based Images(压缩/没有压 ...
- eclipse 配置maven tomcat 环境
一 maven配置文件路径 二 tomcat 和JRE位置 三 validation 设置 四 五 六 设置run(debug) configurations 七 添加server时添加 reso ...