浅谈web前端自动化工具--gulp

背景:

在前端的开发中上线之前可能会做的事情:

1、文件目录调整HTML注释、换行等操作。
2、CSS压缩合并、JS代码压缩重命名。
3、CSS语法检测
4.、.......

上述这些操作是重复而枯燥的,如果是人工来一项一项做,会浪费大量时间。而且人工操作有时候还会带来一些想不到的bug。例如css改动导致页面错位、js改动可能导致功能不正常。

这个时候web前端自动化工具就出现了,当然前端的飞速发展。各种web前端自动化工具也层出不穷,这里就浅谈一下我个人用的web前端自动化工具--gulp

浅谈web前端自动化工具--gulp_第1张图片
web前端自动化构建工具

1、准备工作

1.1、 打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。然后像安装QQ一样安装它就可以了(安装路径随意)。因为在安装并使用gulp的时候,需要先安装node.js.利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

浅谈web前端自动化工具--gulp_第2张图片
node.js官网

1.2、 安装好了之后,打开cmd命令行输入node -v,用来检测是否安装成功。如安装成功则提示node.js的版本号。

1.3 、 由于nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 **npm -v **来测试是否成功安装。同上述node.js方法一样,安装成功则提示npm的版本号。

2、gulp全局安装

2.1、说明:全局安装gulp目的是为了通过她执行gulp任务;
2.2、安装:命令提示符执行npm install gulp -g
2.3、查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。

浅谈web前端自动化工具--gulp_第3张图片
CMD版本检测

3、新建一个package.json文件

3.1、说明:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;
3.2、以我个人的一个项目当中的一个json文件为例

浅谈web前端自动化工具--gulp_第4张图片
package.json文件

3.3、当然如果说手动配置这些东西,那么今天的主题估计就不能够称为web前端自动化了。这里我们通过CMD命令符执行npm init

3.4、为了方便读者更好了解这个 npm init 的使用,我讲自己原本的package文件删除。重新执行npm init

浅谈web前端自动化工具--gulp_第5张图片
通过npm init 配置gulp文件

4、安装gulp 本地服务

4.1、进入该项目目录下,输入npm install gulp --save-dev
4.2、 这个时候可能有人会问,为什么前面全局下安装了一个gulp,现在又在本地文件下还要安装gulp。我们全局安装了gulp,项目也安装了gulp。为啥装两遍??

浅谈web前端自动化工具--gulp_第6张图片
为什么要装2

说明:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能,作为项目的开发依赖(devDependencies)。
4.3、之后继续安装gulp插件。本示例以gulp-rename(文件重命名)和gulp-uglify(js代码压缩)为例,命令提示符分别执行**npm install gulp-rename --save-dev ** 和 npm install gulp-uglify --save-dev .
4.4、CMD指令执行完毕之后,这个时候你的当前目录下,就生成了
node_modules
文件夹。

浅谈web前端自动化工具--gulp_第7张图片
gulp项目文件夹

5、新建gulpfile.js文件(重要)

gulpfile.js这个入口文件,在前面已经出现了不少次数了。下面就开始关于gulpfile.js文件配置,还是以本人的项目代码为例:

浅谈web前端自动化工具--gulp_第8张图片
gulpfile.js

6、gulp运行

6.1、进入gulpfile文件下打开CMD,输入gulp dabang

浅谈web前端自动化工具--gulp_第9张图片
gulp dabang简易操作

6.2、运行成功之后,最后我的文件夹当中出现一个js代码压缩,后缀名添加min的js文件。

浅谈web前端自动化工具--gulp_第10张图片
gulp自动压缩重命名后的chedabang.js文件

7、小结

7.1、安装nodejs;
7.2、gulp全局安装npm install gulp -g
7.3、项目文件安装本地gulp服务 npm install gulp-less --save-dev以及相应的gulp 插件
7.4、新建package.json文件;
7.5、新建gulpfile.js文件;
7.6、通过命令提示符运行gulp任务

以上就是关于web前端自动工具--gulp个人的简单一点的使用,更多gulp 插件以及API使用,请访问请查看 gulp中文网.

注:以上就是个人对于gulp使用的一点心得,欢迎各位大佬( ̄ε(# ̄)打脸指教!!

浅谈web前端自动化工具--gulp_第11张图片
欢迎大佬指点

你可能感兴趣的:(浅谈web前端自动化工具--gulp)