美文网首页
新手Gulp的安装和使用

新手Gulp的安装和使用

作者: 1263536889 | 来源:发表于2018-06-29 20:14 被阅读0次

1.gulp是什么?

Gulp是基于node的一个自动化构建工具,开发者可以使用它构建自动化工作流程(前端集成开发环境)。例如:网页自动刷新,CSS预处理,代码检测,图片压缩等功能,只需要简单的命令行就可以全部完成。使用它,可以简化工作,让你把重点放在功能的开发上,同时减少人为失误,提高开发的效率和质量。

2.gulp的安装是基于node的,所以安装gulp之前需要查看此电脑安装node没有。

(1)win+R打开运行窗口,然后输入cmd点击确定进入命令提示行。

1.png
(2)输入node -v 查看node版本;npm -v查看npm版本;
2.png

(3)如果你电脑上面没有安装过node,则需要去node官网下载安装才能继续学习和安装gulp。

安装node:[https://nodejs.org/en/](https://nodejs.org/en/)
3.png

(4)node安装完成之后,就可以安装gulp!

3.安装gulp

(1)执行命令行npm install gulp -g 全局安装gulp

(2)输入命令行gulp -v来查看gulp是否安装成功!
4.png

4.gulp安装成功之后就可以创建项目进行工作啦!

(1)创建工程目录


5.png

(2)cd到工程目录下


6.png

(3)执行npm init 命令行创建package.json,这个文件保存着这个项目的相关信息;


7.png

(4)执行npm install gulp --save-dev 本地安装gulp

8.png

(5)在工程目录下创建gulpfile.js文件
在gulpfile.js文件中需要先载入gulp包,因为gulp包里面提供了一些API
var gulp = require("gulp") //引入gulp包
核心API有:


9.png

(6)执行gulp,运行项目即可

相关文章

  • 新手Gulp的安装和使用

    1.gulp是什么? Gulp是基于node的一个自动化构建工具,开发者可以使用它构建自动化工作流程(前端集成开发...

  • 新手Gulp的安装和使用

    1.gulp是什么? Gulp是基于node的一个自动化构建工具,开发者可以使用它构建自动化工作流程(前端集成开发...

  • gulp的简单使用

    gulp使用流程:安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gu...

  • Gulp 使用方法(教程一)

    Gulp 官网 目录 Gulp 环境 Gulp 环境 初始化目录结构 安装 gulp gulp 的简单使用 使用 ...

  • gulp入门

    安装gulp 安装gulp插件 gulp使用与执行 在目录创建gulpfile.js文件 执行:gulp defa...

  • 自动任务管理工具 -- gulp

    Gulp的安装和使用 Gulp是一款简单的自动任务管理工具。进入项目目录,运行下面的命令。 Gulp需要全局安装 ...

  • angular1配合gulp和bower使用

    一 安装gulp和bower gulp安装: npm install -g gulp bower安装: npm i...

  • gulp安装和使用

    官网 http://gulpjs.com/ 下载 0、基于node,下载 1、下载命令行 np...

  • html代码复用各种方法

    1.gulp-file-include(工具) 使用步骤:1.安装gulp以及gulp-file-include(...

  • gulp的安装和使用

    一、什么是gulp 一个前端构建工具,通过脚本实现文件、图片的压缩等功能。功能的实现依赖于插件,所以想要实现什么功...

网友评论

      本文标题:新手Gulp的安装和使用

      本文链接:https://www.haomeiwen.com/subject/piqzyftx.html