Gulp_运行环境及使用&&gulp插件

最新推荐文章于 2023-03-22 17:20:31 发布

Kro_C

最新推荐文章于 2023-03-22 17:20:31 发布

阅读量291

点赞数

分类专栏： gulp

为什么要复制我的代码? 难道我写的太好了?

本文链接：https://blog.csdn.net/Kro_C/article/details/115524064

版权

本文介绍了Gulp作为自动化工具的作用，包括编译、合并和压缩等任务。首先，讲述了如何配置Gulp环境，如安装NodeJS、更改npm镜像源。接着，讲解了Gulp的工作流程，通过选择文件、使用插件处理和写入文件。文章还列举了一些常用的Gulp插件，如用于HTML、CSS和JS压缩、文件合并、重命名、Sass和Less编译等，并提供了实例展示如何进行ES6转ES5和Sass转CSS的操作。

摘要由CSDN通过智能技术生成

gulp

当下最流行的自动化工具，可以自动化完成开发过程中大量的重复工作

编译：
es6->es5
sass->css
less->css
coffeescript->js

合并:
css,js

压缩:
css,js,html

优化:
图片优化

准备工作

1.安装NodeJS环境
2.了解npm命令的使用
3.了解nodeJS模块化
4.了解gulp

安装环境

前提是安装了nodeJS环境

全局安装gulpnpm install --global gulp
说明:全局安装gulp是为了在任意目录通过命令执行gulp任务

更改gulp镜像源(在全局使用):npm config set rigistry=https://registry.npm.taobao.org/
原本的镜像源是国外的,下载速度较慢,这里更换淘宝的镜像源

项目安装gulp(每个项目都要安装一次):npm install --save-dev gulp
**说明:**本地安装gulp是为了调用gulp插件的功能
–save-dev 是为了保存配置信息至package.json的devDependencies节点
在save前要先新建package.json文件(npm init)

创建gulpfile.js文件
在项目根目录下创建一个名为’gulpfile.js’的文件

运行gulp:
gulp <任务名称>
在命令行执行以下命令,如果不写任务名称,则自动运行default任务

工作流程

选通过 gulp.src() 方法获取到想要处理的文件，并返回文件流

然后文件流通过 pipe() 方法导入到 gulp 的插件中

经过插件处理后的文件流再通过pipe()方法导入到 gulp.dest() 方法并把流中的内容写入到文件中

具体流程

	创建任务:
	gulp.task('任务名称',function(){
   
	})

	匹配要处理的文件:
	gulp.src(globs[,options])
	//gulp.src('路径')
	

	输出文件:
	gulp.dest(path[,options])
	//gulp.dest('路径')

	监听文件修改,并执行相应任务
	gulp.watch