分类: gulp

关于gulp:从实战带你认识gulp打包前端项目并实现防缓存

一个基于node的前端自动化工作构建工具,应用经典回调+链式调用的形式实现工作的自动化 (src.pipe(…).pipe),gulp其实和webpack很类似,然而gulp侧重点不同,gulp更偏重前端流程自动化、工作执行(通过工作使开发提效),就像一条流水线。而webpack则是更偏重用于打包前端资源,所有皆可打包成模块。官网文档:[链接]

关于gulp:一个gulp构建工作流案例

一个构gulp自动化构建工作流案例须要对款式文件,js文件,html文件,图片字体文件,其余额定文件顺次构建工作,并在此过程中实现对文件的压缩合并

关于gulp:Gulp基本概念及应用

装置gulp的时候会装置gulp-cli。gulpfile.js中导出一个函数,最新的gulp中勾销了同步代码模式,每一个工作都是异步工作,最初须要调用回调函数或其余形式标记工作实现。如例子中如果没有done,会报错.如果工作名是default,运行时的命令和grunt相似,间接运行yarn gulp即可。

关于gulp:Gulp-结构化最佳实践

在 Gulp 的官网文档中,Gulp 的工作都是写在 gulpfile.js 这一个文件中的,如果工作数量不多,这并不会有什么问题,但当工作数量较多时,会造成代码可读性差,难以保护,多人合作时还会容易造成抵触。因而,更好的解决形式是把 Gulp 的代码结构化。

关于gulp:Gulp-API

咱们在应用 gulp 时,个别只须要用到 4 个 API,别离是 gulp.src()、gulp.dest()、gulp.task()、gulp.watch(),上面咱们具体介绍一个这 4 个罕用 API 的应用。

关于gulp:Gulp-插件

后面咱们讲到在学习压缩 JS、CSS、图片等文件时,须要用到一些相干的插件。Gulp 提供了一些有用的插件来解决 HTML 和 CSS,JavaScript,图形以及一些其余内容。上面咱们来看一下 gulp 中的一些不同类型插件。

关于gulp:Gulp-编译Less和Sass

在理论利用中,咱们个别会应用 CSS 的预处理器来编写 CSS 代码,例如 Less 和 Sass 语言,通过将脚本解析成 CSS 的脚本语言,能够缩小 CSS 的反复,也能够节省时间。

关于gulp:Gulp-使用gulp压缩图片

在理论我的项目中,除了 HTML、CSS、JS 等文件,还会用到大量的图片。压缩图片可升高图片文件大小,进步页面关上速度。如何压缩图片应用 gulp 来压缩图片能够应用上面两个插件:gulp-imagemin:压缩率不显著,能够解决多种图片格式,能够引入更多第三方优化插件。gulp-smushit:压缩率比拟大,只能解决 JPG 和 PNG。例如咱们…

关于gulp:Gulp-使用gulp压缩CSS

应用 gulp 来压缩 CSS 文件的操作步骤和压缩 JS 文件差不多,后面咱们学习了如何压缩 JS 文件,那么再学习压缩 CSS 文件就会感觉很简略啦。

关于gulp:Gulp-使用gulp压缩JS

本节咱们学习如何应用 gulp 压缩 JS,在理论我的项目中,如果 JS 文件太大,那么可能导致页面加载变慢。所以咱们能够将这些 JS 文件进行压缩。咱们除了能够抉择应用各种工具手动来进行压缩,还能够通过 gulp 来实现 JS 文件的压缩。