在学习前,先谈谈大致使用gulp的步骤,给读者以初步的认识。首先当然是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最后通过命令提示符运行gulp任务即可。

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

1、安装nodejs  

gulp是基于nodejs,理所当然需要安装nodejs

2、使用命令行

简单介绍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

-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;  非全局安装:将会安装在当前定位目录;  全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;

--save:将保存配置信息至package.json(package.json是nodejs项目配置文件

-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等。

为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包,npm install --production只下载dependencies节点的包)。

4、选装cnpm

官方网址:http://npm.taobao.org

安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;

注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。

5、全局安装gulp

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

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

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

6、新建package.json文件

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

命令提示符执行cnpm init   直接安装

7、本地安装gulp插件

安装:定位目录命令后提示符执行cnpm install --save-dev

9、运行gulp

命令提示符执行gulp 任务名称

windows下零基础gulp构建的更多相关文章

  1. 《Windows编程零基础学》第零节

    首先很开心申请到了这一个专栏<Windows编程零基础学> 这是第一篇文章,在这里,我将讲述一些基础的知识. 什么是Windows编程 所谓Windows编程就是在Windows平台上开发 ...

  2. windows下mongodb基础玩法系列二CURD附加一

    windows下mongodb基础玩法系列 windows下mongodb基础玩法系列一介绍与安装 windows下mongodb基础玩法系列二CURD操作(创建.更新.读取和删除) windows下 ...

  3. windows下mongodb基础玩法系列二CURD操作(创建、更新、读取和删除)

    windows下mongodb基础玩法系列 windows下mongodb基础玩法系列一介绍与安装 windows下mongodb基础玩法系列二CURD操作(创建.更新.读取和删除) windows下 ...

  4. windows下mongodb基础玩法系列一介绍与安装

    windows下mongodb基础玩法系列 windows下mongodb基础玩法系列一介绍与安装 windows下mongodb基础玩法系列二CURD操作(创建.更新.读取和删除) windows下 ...

  5. [置顶] 《Windows编程零基础》__2 一个完整的程序

    Windows开发的常识 1)窗口 Windows中最基本的概念也许就是窗口了,每一个前台程序都至少有一个窗口,一个窗口也是你可以看到的部分,比如,QQ有如下的登录窗口 基本上你在Windows中可见 ...

  6. windows下vue-cli及webpack 构建网站(一)环境安装

    1.安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 2.安装npm,由于新版的nodejs已经集成了npm,所以之前npm也 ...

  7. 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

    相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常用 Gulp 插件汇总 ...

  8. 零基础学习Linux(三)linux与windows文件共享

    上次的博文零基础学习Linux(一)环境搭建中我们已经将linux环境部署完毕了,接下来我们就可以在linux上进行软件的安装和环境的配置.但在进行这些操作之前,我们还需要解决一个问题——Linux与 ...

  9. 2018-02-03-PY3下经典数据集iris的机器学习算法举例-零基础

    ---layout: posttitle: 2018-02-03-PY3下经典数据集iris的机器学习算法举例-零基础key: 20180203tags: 机器学习 ML IRIS python3mo ...

随机推荐

  1. keras & tensorflow 列出可用GPU 和 切换CPU & GPU

    列出可用GPU from tensorflow.python.client import device_lib print(device_lib.list_local_devices()) from ...

  2. win10系统下安装MySQLdb和pymysql

      (1)使用的是Python3.6,想要使用MySQLdb, 需要先在https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient中下载相应版本的包 ...

  3. 环境设置——pyCharm环境下导入MySQLdb遇到的一系列问题

    本文转自http://blog.sina.com.cn/s/blog_135031dae0102yc8l.html 安装好pyCharm后想要import MySQL,结果发现了一系列问题,像推到了塔 ...

  4. Android 简单登陆 涉及 Button CheckBox TextView EditText简单应用

    GitHub地址:https://github.com/1165863642/LoginDemo 直接贴代码<?xml version="1.0" encoding=&quo ...

  5. selenium-确认进入了预期页面(四)

    selenium确认进入了预期页面 在自动化操作中,浏览器每次进入一个新的需要,都需要确认该页面是否打开或打开的页面是否是预期的页面 需要进行确认页面后方可进行下一步操作 确认页面有很多中方法,像笔者 ...

  6. SQL Server -- 回忆笔记(四):case函数,索引,子查询,分页查询,视图,存储过程

    SQL Server知识点回忆篇(四):case函数,索引,子查询,分页查询,视图,存储过程 1. CASE函数(相当于C#中的Switch) then '未成年人' else '成年人' end f ...

  7. jest 自动化测试

    概述 jest 是 facebook 开源的,用来进行单元测试的框架,可以测试 javascipt 和 react. 单元测试各种好处已经被说烂了,这里就不多扯了.重点要说的是,使用 jest, 可以 ...

  8. Jquery自动补全插件的使用

    1.引入css和js  <script src="js/jquery-ui.min.js"></script> <link href="cs ...

  9. Configuring Apache Kafka Security

    This topic describes additional steps you can take to ensure the safety and integrity of your data s ...

  10. Vue SSR: 基本用法 (二)

    上一篇讲解了ssr的原理,这篇主要讲基本用法: 1.安装 npm install vue vue-server-renderer --save 我们将在整个指南中使用 NPM,但你也可以使用 Yarn ...