【gulp】什么是gulp？有什么用？怎么用？

2024-05-14 08:46:05

1.gulp是什么？

Gulp是基于node的一个自动化构建工具，开发者可以使用它构建自动化工作流程（前端集成开发环境）。例如：网页自动刷新，CSS预处理，代码检测，图片压缩等功能，只需要简单的命令行就可以全部完成。使用它，可以简化工作，让你把重点放在功能的开发上，同时减少人为失误，提高开发的效率和质量。

2.gulp的安装是基于node的，所以安装gulp之前需要查看此电脑安装node没有。

（1）win+R打开运行窗口，然后输入cmd点击确定进入命令提示行。

（2）输入node -v 查看node版本；npm -v查看npm版本；

（3）如果你电脑上面没有安装过node，则需要去node官网下载安装才能继续学习和安装gulp。

安装node：https://nodejs.org/en/

（4）node安装完成之后，就可以安装gulp！

3.安装gulp

（1）执行命令行npm install gulp -g 全局安装gulp

（2）输入命令行gulp -v来查看gulp是否安装成功！

4.gulp安装成功之后就可以创建项目进行工作啦！

（1）创建工程目录

（2）cd到工程目录下

（3）执行npm init 命令行创建package.json，这个文件保存着这个项目的相关信息；

（4）执行npm install gulp --save-dev 本地安装gulp

（5）在工程目录下创建gulpfile.js文件

在gulpfile.js文件中需要先载入gulp包，因为gulp包里面提供了一些API

var gulp = require("gulp") //引入gulp包

核心API有：

（6）执行gulp，运行项目即可

最后：第一次接触博客，写的不好，请多多包涵。这是在我自己的理解之上写的，如果有什么出入的地方，还望兄台告知。感激不尽！

【gulp】什么是gulp？有什么用？怎么用？相关推荐

Gulp简介、gulp基本使用步骤、gulp-cli工具、gulpfile.js文件、gulp插件
Gulp介绍: gulp概念: 基于node开发的前端构建工具模块,将前端机械化的操作编写成任务自动化操作,类似于webpack构建,可以完成代码压缩.语法转换.抽离公共文件.自动实现浏览器刷新等. ...
gulp html 缓存,gulp 给静态资源文件添加hash(md5)后缀防止缓存
第一步,安装所需的包,用npm安装,如下: npm install gulp gulp-rev run-sequence gulp-rev-collector --save-dev 第二步,在gulp ...
Error: watch task has to be a function(optionally generated by using gulp.parallel or gulp. series)
請先在命令端輸入glup -v查看版本如果版本為4.X.X,請先移除glup npm uninstall gulp -g 並把項目端的node_modules文件夾刪除掉並把package.jso ...
浅谈gulp的使用、gulp的常用插件、gulp基本操作以及gulp的常用项目流程操作
写在前面: 因为gulp是一个基于node的工具,所以我们需要先安装node,具体可见[node的安装及配置] 目录一.gulp简介二.gulp基本使用 1. 创建项目 2. gulp的安装 3. ...
Gulp快速入门教程
Gulp是基于流的前端自动化的构建工具,虽说如今是webpack盛行的时代,但是gulp和webpack整合效果更美味的,鱼与熊掌都可兼得哦!本文只介绍下Gulp的基本使用和一些常用的Gulp插件,废 ...
55 前端构建工具Gulp
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.第三方模块Gulp Gulp:基于node平台开发的前端构建工具. 前端构建工具:将机 ...
基于 gulp 的 fancybox 源码压缩
前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp ...
gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
Gulp 自动化的项目构建工具
在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化,自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试.检查.合并.压缩.格式化.部 ...
angular1配合gulp和bower使用
一安装gulp和bower gulp安装: npm install -g gulp bower安装: npm install -g bower ==注:== angularjs的一些包文件我们是通过 ...

最新文章

热门文章