本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！css

工做中如何使用GULP构建项目？

注意：这篇文章假定你具有较好的JS基础，能够独立完成小规模的项目前端

你甚至应该知道，常见的各类JS函数库和插件node

同时，你应该具有必定的项目部署的常识，例如知道真正部署在服务器上的文件，跟开发的时候编写的文件是不一样的再同时，你必需要具有nodeJS的一些最基本知识。例如使用npm命令安装软件等，知道nodeJS如何加载模块web

若是你用过sass或者less那就更好不过了。npm

最重要的，就是你须要知道常见的命令行操做，例如 cd、cd..gulp

假设你没据说过sass甚至不知道node为什么物，JQuery不熟，甚至没用JS写过项目。windows

不要紧，请点击浏览器右上角的叉号，整个世界都会恢复往日的美好后端

项目构建是什么？

好比说吧，当项目部署上线时，你全部的JS文件，要不要进行压缩减少体积，以便于加载的时候速度更快？跨域

嗯，这个确实须要。浏览器

图片要不要压缩处理，以得到更好的加载速度？

嗯嗯，这个确实须要。

你编写的JS代码使用了ES6语法，为了不浏览器兼容，要不要转换成ES5？

嗯嗯嗯，这个确实须要。

你编写的scss源文件，要不要编译生成css？

嗯嗯嗯嗯，这个确实须要。

你的CSS是否是也要压缩？

嗯嗯嗯嗯嗯，这个确实须要。

开发过程当中，你的页面跟后台服务器不在一台电脑上，你是否须要在本地搭建一个代理服务器以便于解决临时的跨域问题？

嗯嗯嗯嗯嗯嗯，这个确实须要。

以上这些相似的问题，Gulp能够很轻松把它们放在一块儿完成。

Gulp是一个windows系统下的软件么？

很显然它不是。它是一个NodeJS编写的软件，须要咱们先安装NodeJS的运行环境。

这是nodeJS windows版网盘地址：

https://pan.baidu.com/s/1taPXX2Y01tVcqFUd3eATQQ 密码：bwf9
复制代码

版本号： v8.9.3

安装好NodeJS环境，接下来作什么？

安装Gulp v3.9.1

咱们须要使用node提供的一个叫作npm的命令

须要我打开命令行吗？

否则呢？难不成你想用QQ给NodeJS发个消息？

打开后是否是像这样？

接下来进入你项目的根目录，而后输入命令 npm install gulp

安装时为何要进入项目根目录？难道每一个须要gulp的项目都要装一遍吗？

没错，是这样的。由于每一个项目使用gulp的功能不一样，版本可能也不同。这样每一个项目的gulp相互独立。

注意！在安装过程当中，因为网速问题，常常致使安装失败。多尝试几回就好

若是安装过程没有出现任何 Error 提示，那就没有问题了。

项目中多出了一个 node_modules文件夹，这就是我下载的gulp软件？

是的，不要修改、移动或删除这个文件夹

开始编写gulp任务文件

这个任务文件是干什么的？？

简单的说，就是写一个任务列表，告诉gulp具体要作什么。

好比我如今要压缩个人js文件，该怎么编写gulp任务文件？

如今，咱们假定项目的目录结构是这样的：

src 目录存放咱们的源文件，dist 目录存放咱们压缩后的文件

接下来咱们要在项目的根目录，建立一个 gulpfile.js 文件

gulpfile.js 文件内容以下：

若是你熟悉 nodeJS 那么下面的代码理解起来将会很是容易：

若是你不熟悉 nodeJS 那么下面的代码理解起来将会很是吃力：

好了，一切准备就绪，准备启动gulp执行压缩任务

咱们回到命令行，仍然在项目的根目录下，输入命令 gulp minifyJS

我执行了这个命令，可是遇见了错误：

Error: Cannot find module 'gulp-uglify'

由于找不到'gulp-uglify'这个模块。因此接下来咱们安装它，输入命令npm install gulp-uglify

等等，不是已经安装过gulp了吗？为何压缩文件的模块还要单独安装？

gulp自己不具有压缩文件的功能。它的主要工做，是定义并执行任务。

而任务的具体内容是咱们本身定的，就像gulpfile.js文件里写的那样。

为何gulp不把压缩js的功能集成进来，这样看来gulp其实没什么用了？

偏偏相反，你仔细想，若是Gulp把功能集成进来，那么它能提供的功能不管如何是有限的

那样作还会让软件体积变大，不须要的功能也必须强制安装。并无好处。

正是由于gulp能够借助任何其它软件来执行任务。理论上来讲，gulp的功能是无限的。

好像有点道理。

好了，接下来咱们再次执行命令gulp minifyJS

执行了，但又遇见了错误：

'gulp' 不是内部或外部命令，也不是可运行的程序或批处理文件。

这是由于咱们以前把gulp安装在了项目里面。NodeJS运行环境并不能识别gulp命令

那怎么办呢？

再把gulp全局安装一次npm install gulp -g

好了，咱们来看看最后生成的效果

dist目录中的文件所有都是压缩过的。

目前，你已经掌握了Gulp的原理和最基本用法

Gulp能够借助其它模块产生无穷无尽的用法，篇幅有限，今天暂时只能介绍到这里

若是你们有什么建议，能够给我留言

我相信，万事“开头难······

中间难，结尾难！” 你们共同加油！！！