gulp 安装与入门

gulp是什么?

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript(或者 CoffeeScript )源码来实现的。

入门指南

gulp依赖于Node.js运行环境,所以在使用它之前需要先安装Node.js,另外我们还需要一个命令行工具Git-Bash来进行命令操作,本文的所有案例都假定在这些条件都满足的情况下进行。

1. 全局安装 gulp

为了让我们的电脑具有(或者说支持)gulp这个命令,我们需要在Git-Bash命令行工具里输入以下命令:

$ npm install -g gulp 

检查是否安装成功可以输入以下命令:

$ gulp -v
[13:38:11] CLI version 3.9.1 //如果出现这一个行表明安装成功

2. 作为项目的开发依赖(devDependencies)安装

使用npm安装:

$ npm init -y //这个命令是初始化包管理文件package.json
$ npm install --save-dev gulp //--save-dev或者—D都表示作为开发依赖进行安装

或者使用yarn安装:

$ yarn init -y  //这个命令是初始化包管理文件package.json
$ yarn add -D gulp //这个目前可能还不支持,但都是早晚的事情

安装完成后可以通过以下命令查看当前目录下以及全局安装的gulp版本:

$ gulp -v
[13:40:38] CLI version 3.9.1 //这个表示全局安装的gulp的版本信息
[13:40:38] Local version 3.9.1 //这个表示当前目录下安装的gulp的版本信息

注意: 全局安装的gulp只是让您的系统(电脑)增加了一个叫做gulp的命令,这个命令会调用当前目录下的 gulpfile.js 文件,并根据该文件的内容来执行相应的任务,而真正起到提供API功能的却是本地安装的gulp。

3.在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4.运行gulp

$ gulp

这个命令仅仅是执行了gulpfile.js中的 “default” 的任务(通常叫做task),如果需要指明执行哪一具体的任务,需要使用如下语法:

$ gulp taskName //taskName表示通过task方法定义的任务名称

更多信息请参考gulp官网进行学习

谢谢关注,欢迎点赞:)

猜你喜欢

转载自blog.csdn.net/weixin_41424247/article/details/79879841