内容简介:安装编写
gulp
简介
- 用自动化构建 工具 增强你的工作流程。
-
通过代码优于配置的策略,
Gulp
让简单的任务简单,复杂的任务可管理。 -
利用
Node.js
流的威力,你可以快速构建项目并减少频繁的IO
操作。 -
Gulp
严格的插件指南确保插件如你期望的那样简洁高质得工作。 -
通过最少的
API
,掌握Gulp
毫不费力,构建工作尽在掌握:如同一系列流管道。
gulp
和 webpack
都是前端著名的构建工具,通过一定的配置,几乎能实现一模一样的功能,但是 gulp
在使用上与 webpack
不同的点是, gulp
要实现什么功能是以写脚本的方式自定义,而 webpack
以配置文件的方式,个人觉得通过 gulp
提供的方式自定义工作流更容易实现,也更透明,自己写插件也能方便的理清楚插件什么时候被调用,需要接收和输出什么东西。所以即使你会了 webpack
,学习 gulp
也是非常有必要的。
demo
安装
npm i -g gulp-cli npm i -D gulp
编写 gulpfile.js
, gulp
默认执行 gulpfile.js
文件
var gulp = require('gulp'); gulp.task('default', function (cb) { console.log('task default') cb() })
gulp.src
读取需要处理的文件,以便进行后续的处理。
第一个参数:匹配模式字符串或字符串数组。 了解 Globs
第二个参数:可选,通过 glob-stream
所传递给 node-glob
的参数。
返回: Vinyl files
的 stream
。通过 pipe(..)
将文件流向后续插件传输。
gulp.dest
通过 pipe(..)
输入文件流,将文件写入硬盘,并输出所有数据,能继续向下游 pipe
,所以文件流可以继续被处理并被写入到其他地方。如果写入文件夹不存在,就会创建它。
第一个参数:文件被写入的路径
第二个参数: option.mode
默认 0777
八进制权限字符串,定义输出目录中创建的目录的权限;
option.cwd` 输出目录的 `cwd` 参数,只在所给的输出目录是相对路径时候有效。
gulp.src('src/*.js') // 读取src文件夹下的所有.jpg文件 .pipe(imagemin()) // 将所有文件用imagemin处理 .pipe(gulp.dest('dist')) // 将处理到这一步的文件写入dist文件夹 .pipe(minify()) // 将文件流用minify处理 .pipe(gulp.dest('code')) // 将处理后的文件写入code文件夹
gulp.task
定义一个任务
第一个参数:任务的名字,如果你定义的任务需要在命令行中启动,那就不要使用空格。
第二个参数: Array
,当前任务依赖的任务列表,依赖任务在当前任务运行之前完成。( gulp4
已经去除)
第三个参数: fn
,函数中定义任务需要执行的一些操作。
第三个参数 fn
可以接受一个参数,该参数接收一个 callback
,在函数中调用 callback
可以标识该任务是否执行完成。
返回一个 stream
或者 promise
,也有类似的作用。
gulp
中实现任务依赖(任务并行或串行)的方法
gulp.task('one', function (cb) { setTimeout(() => { console.log(1) cb() }, 1000) }) gulp.task('two', function (cb) { console.log(2) cb() }) // 老版本序列化任务的方式 gulp.task('default', ['one'], function(cb){ console.log('over') cb() }) // gulp4实现串行任务的方式 gulp.task('default', gulp.series('one', 'two', function(cb){ console.log('over') cb() })) // gulp4实现并行任务的方式 gulp.task('default', gulp.parallel('one', 'two', function(cb){ console.log('over') cb() }))
gulp.watch
监控文件的变化,执行相应的任务
第一个参数:要监视的 glob
(也可以理解成文件或文件夹)。
第二个参数:options
第三个参数:要执行的具体任务内容
gulp.watch('img', gulp.series('string'))
编写插件
从gulp的用时方法不难看出,gulp插件接收 stream
,处理后返回 stream
,但是在插件中可能使用到其他工具,其中处理文件的数据类型可能是 Buffer
,所以我们经常在写插件时用到 throungh
,他是一个可以 Buffer
和 stream
相互装换的工具,下面是一个压缩图片的插件例子。
images
库是一个能处理图片的 nodejs
库,但是他的提供的 api
处理单张图片,将他封装成 gulp
插件,将他赋予批量处理图片的能力,并且能和其他处理工具一起使用,方便的实现一个工作流,比如将一个文件夹中的图片压缩后,在将其打包成一个压缩包。
var through = require('through2'); // Buffer和stream装换库 const images = require('images'); // 图片处理库 // 插件级别的函数(处理文件 function gulpPrefixer(options) { const { size } = options var stream = through.obj(function(file, enc, cb) { if (file.isBuffer()) { file.contents = images(file.contents) .size(size) .encode('png') } // 确保文件进入下一个 gulp 插件 this.push(file); // 告诉 stream 引擎,我们已经处理完了这个文件 cb(); }); // 返回文件 stream return stream; }; // 导出插件主函数 module.exports = gulpPrefixer;
作者简介:叶茂,芦苇科技web前端开发工程师,代表作品:口红挑战网红小游戏、芦苇科技官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。
欢迎和我们一起并肩作战: web@talkmoney.cn
访问 www.talkmoney.cn 了解更多
以上所述就是小编给大家介绍的《gulp入门》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- TiDB入门(四):从入门到“跑路”
- MyBatis从入门到精通(一):MyBatis入门
- MyBatis从入门到精通(一):MyBatis入门
- Docker入门(一)用hello world入门docker
- 赵童鞋带你入门PHP(六) ThinkPHP框架入门
- 初学者入门 Golang 的学习型项目,go入门项目
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Using Google App Engine
Charles Severance / O'Reilly Media / 2009-5-23 / USD 29.99
With this book, you can build exciting, scalable web applications quickly and confidently, using Google App Engine - even if you have little or no experience in programming or web development. App Eng......一起来看看 《Using Google App Engine》 这本书的介绍吧!