8月 27

今天主要是为了使用gulp,这里先简单介绍一下gulp

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

知乎收抄了一段解释的比较浅显易懂的话

你使用bootstrap 或者semantic ui的时候,是不是直接使用了他的.min.js 或者 .min.css,然后你会发现,你只使用了其中一小部分的功能,那么其他的功能所占的资源空间是不是浪费了呢,或者说,你发现这个功能不满足你的需求,我想更改他的代码,来满足新的需求,那么我们会去看他的代码进行修改。可是如此大的代码,具体该修改哪一行呢?我们会发现他提供了各个代码的模块,我们只需要修改该模块即可。最后如何将这些修改后有用的模块变成我们需要的.min.js /.min.css呢,gulp就出现了,他提供插件自动合并压缩你的代码,那么gulp是怎么做的呢,发现他使用环境需要nodejs,nodejs可以提供操作流,操作文件等IO功能,也提供了http socket等网络功能(就是传统的后端语言)。所以,使用node,gulp是为了你的个性化需求,是为了你的代码优化,是为了你的资源不浪费。

gulp 是基于 node 实现 Web 前端自动化开发的工具,因此需要先安装配置NodeJS。

首先下载安装NodeJS

https://nodejs.org/en/

下载,安装,一路Next,安装完成。打开cmd,输入命令显示npm的版本号

npm -v

 升级npm

npm install npm -g

 

接下来,安装全局gulp

npm install -g gulp

还需要在具体使用的目录下安装gulp,暂时不理解为什么这样做,只需要记住必须这么做。

npm install gulp

written by ocean