首页 > 代码库 > gulp入门教程

gulp入门教程

 

    

  gulp是什么?

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

 

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

 

   gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。

 

  安装gulp的一些步骤

     首先当然是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最后通过命令提示符运行gulp任务即可。

 

      安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1、安装nodejs

  说明:gulp是基于nodejs,理所当然需要安装nodejs;

  安装:打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。

2、使用命令行(如果你熟悉命令行,可以直接跳到第3步)

  说明:什么是命令行?命令行在OSX是终端(Terminal),在windows是命令提示符(Command Prompt);

  注:之后操作都是在windows系统下;

  简单介绍gulp在使用过程中常用命令,打开命令提示符执行下列命令(打开方式:window + r 输入cmd回车):

  node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;

  npm -v查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器,那它有什么用呢?稍后解释;

  cd定位到目录,用法:cd + 路径 ;

  dir列出文件列表;

  cls清空命令提示符窗口内容。

3、npm介绍

  说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

  使用npm安装插件:命令提示符执行npm install <name> [-g] [--save-dev]

  <name>:node插件名称。例:npm install gulp-less --save-dev

  使用npm卸载插件:npm uninstall <name> [-g] [--save-dev]  PS:不要直接删除本地插件包

  删除全部插件:npm uninstall gulp-less gulp-uglify gulp-concat

  借助rimraf:npm install rimraf -g 用法:rimraf node_modules

  使用npm更新插件:npm update <name> [-g] [--save-dev]

  更新全部插件:npm update [--save-dev]

  查看npm帮助:npm help

  当前目录已安装插件:npm list

4、全局安装gulp

  说明:全局安装gulp目的是为了通过她执行gulp任务;

  安装:命令提示符执行cnpm install gulp -g

  查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。

5、新建package.json文件

  说明:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;

gulp入门教程