gulp安装使用过程

Gulp简介

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

基本步骤

1、首先需要安装nodejs环境,百度搜索nodejs去官网下载安装即可。

2、安装完成后,可在命令行输入:npm -v查看npm版本(判断nodejs是否正确安装)。

3、全局安装gulp,在命令行中输入:npm install gulp -g,全局安装gulp,会将内容安装到C:\Users\DreamBoy\AppData\Roaming\npm 中(以windows系统 DreamBoy用户为例)。全局安装gulp的目的是为了执行gulp命令。

4、接下来就需要在创建的一个工程或项目,在命令行中进入该项目,输入:npm init,初始化该项目。用该命令自动创建package.json配置文件(这是一个基本nodejs项目必不可少的配置文件),将存放在项目的根目录中。执行命令后会提示我们输入,如下必要的参数:name(项目名称)、version(项目版本)、description(项目描述)。

5、下面需要在本项目安装gulp插件,在当前项目目录下使用如下命令:npm install --save-dev gulp。

用该命令本地安装gulp插件,安装成功后package.json配置文件将会更新保存对该插件的依赖说明到文件中。(如果删除项目中依赖的插件 node_modules 目录,可以在该项目目录下使用命令 cnpm install ,它会根据package.json配置文件中的依赖说明,重新下载插件到 node_modules目录中去)。

PS:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

6、为了使用gulp插件,还需要我们在项目中创建gulpfile.js文件,可以在项目的根目录中,这是gulp项目的配置文件。

7、可以在当前项目目录下执行命令 gulp 。将执行 gulpfile.js 文件中定义的任务。为了使我们在项目开发过程中更加的自动化,需要我们灵活地使用更过的 gulp 插件,在gulpfile.js 文件中定义管道中的任务。而安装 gulp 其他插件的过程,与本地安装 gulp 一致。针对不同的插件 将有不同的用法。

8、再在项目中创建一个src文件夹,一般项目文件都写在src里面,再控制台 gulp 任务名   执行任务,可得到运行结果。

有关gulp的更多入门内容,请参考gulp入门教程

猜你喜欢

转载自blog.csdn.net/Doulvme/article/details/81452701