前言

  好吧,我承认我是为了搞定Sass编译CSS文件的问题,迷一样的着手入gulp的坑,sass和gulp的爬坑历程大概会一起更新。然后感觉这里windows和mac的流程差不多,不过mac的通常在指令前加sudo ,本喵是windows的本本,所以就以windows的流程为例了。

1. 安装淘宝cnpm镜像

   因为很多npm包都是国外的,所以安装起来很慢,所以我们可以利用淘宝的镜像服务器来进行安装后续的包,速度和成功率会高很多。 
所以首先打开cmd,输入指令: 
npm install -g cnpm –registry=https://registry.npm.taobao.org 
回车以后等待执行便可,安装完成后可以使用cnpm -v来检测,如果返回版本号,则说明已经安装成功了。

2.全局安装gulp

在命令行中键入指令 
cnpm install –global gulp 
这里将官网上的npm改成了cnpm,安装起来会非常快

3.作为项目的开发依赖安装:

   首先,新建一个用来项目开发的空文件夹,然后再命令行工具里cd到文件夹中(有git的童鞋在文件夹里直接右键 git bash here也是Ok的) 
   然后执行以下 npm init,会发现文件夹中多出一个 
   然后在命令行中执行 npm init,效果如下图,一路无脑回车即可 
 
   执行完成后你会发现原本的空文件夹里多出了一个叫package.json的文件。说明执行成功啦。 
  完成后接着执行指令: 
  npm install –save-dev gulp 
注意:1.命令行工具一定要进入到这个用来项目开发的空文件夹 
   2.这里不要使用cnpm,使用npm即可(亲身经历,用cnpm之后运行gulp的时候会报错,大概是cnpm的某些包不全)

  接下来需要等待一会儿,完成后,需要去文件夹的根目录中,新建一个名为gulpfile.js的javascript文件,写入内容如下:

 var gulp = require('gulp');

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

最后在命令行里执行指令: glup 回车 
 
效果如上图,则说明glup已经成功安装在项目中啦~ 
后续gulp的使用我会继续学习和更新哒~

gulp入坑系列(1)——安装gulp的更多相关文章

  1. gulp入坑系列(2)——初试JS代码合并与压缩

    在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/61 ...

  2. gulp入坑系列(4)——gulp的代码转换

    当然,gulp不仅仅能转换Sass,这里会提到如下转换: jsx转换成常规的JavaScript(说到jsx,玩过react的同学应该是知道的) es6转换为es5 Less,Sass转换为CSS 首 ...

  3. gulp入坑系列(3)——创建多个gulp.task

    继续gulp的爬坑路,在准备get更多gulp的具体操作之前,先来明确一下在gulp中创建和使用多个task任务的情况. gulp所要做的操作都写在gulp.task()中,系统有一个默认的defau ...

  4. 2-STM32带你入坑系列(点亮一个灯--Keil)

    1-STM32带你入坑系列(STM32介绍) 首先是安装软件 这一节用Kei来实现,需要安装MDK4.7这个软件,怎么安装,自己百度哈.都学习32的人了,不会连个软件都不会安装吧....还是那句话 没 ...

  5. oracle入坑日记<一> 安装

    学习日记系列(前辈/大神勿喷) 一.下载 下载地址:http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads ...

  6. Docker入坑系列(二)

    Docker入坑系列(二) 上一篇我们为Docker创造了一个良好的生活环境,这一篇我们就开始让Docker活起来. 安装Docker ok,原文地址在这里. 当然,我只是自己翻译了一下而已- -跟着 ...

  7. Docker入坑系列(一)

    Docker入坑系列(一) 引用嘛,当然是来引用别人说的东西啦. Docker 是一个开源项目,诞生于 2013 年初,它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux ...

  8. 3-STM32带你入坑系列(自己封装点亮一个灯的库--Keil)

    2-STM32带你入坑系列(点亮一个灯--Keil) 首先建一个stm32f103x.h的文件,然后 #include "stm32f103x.h" 还记得上一节 现在呢就是做一个 ...

  9. 1-STM32带你入坑系列(STM32介绍)

    由于自己的物联网开发板上的单片机是用的STM32,但是有些朋友没有用过,所以我将用这块开发板,带着大家入门STM32 先介绍一下STM32,我是在大三下学期的时候开始接触STM32,当时是想做一个小车 ...

随机推荐

  1. Github的基本配置与使用

    第一步:尝试创建SSH key ssh-keygen -t rsa -C xxxxx@gmail.com 默认在~/.ssh目录生成id_rsa与id_rsa.pub. -t代表密钥类型,常见的类型有 ...

  2. Oracle数据库入门——高水位线详解

    一.什么是水线(High Water Mark)? 所有的oracle段(segments,在此,为了理解方便,建议把segment作为表的一个同义词) 都有一个在段内容纳数据的上限,我们把这个上限称 ...

  3. ICMP type code 对应表(转)

    ICMP类型 TYPE CODE Description Query Error 0 0 Echo Reply——回显应答(Ping应答) x   3 0 Network Unreachable——网 ...

  4. 【转】NPOI 单元格级别应用

    NPOI 单元格级别应用A HSSFWorkbook hssfworkbook = new HSSFWorkbook();//初始化一个新的HSSFWorkbook实例 //#region 1.创建一 ...

  5. ios录制测试

    http://support.smartbear.com/viewarticle/64016/

  6. Unity 3D Intantiate过程中Transform 空物体和本体之间的关系

    想当年刚学Unity的时候,这个问题困扰了我好几天,因此来分享一下当初解决问题的思路. 我们通过Unity构建场景的过程中,经常发现一个现象,就是物体在拖进场景中后,我们会发现物体是反的,通过改变物体 ...

  7. debian之samba服务器搭建

    安装过程非常简单: apt-get install samba sudo vim /etc/sama/smb.conf [pengdl] comment = pengdl's samba path = ...

  8. [转载]SharePoint 2013搜索学习笔记之搜索构架简单概述

    Sharepoint搜索引擎主要由6种组件构成,他们分别是爬网组件,内容处理组件,分析处理组件,索引组件,查询处理组件,搜索管理组件.可以将这6种组件分别部署到Sharepoint场内的多个服务器上, ...

  9. 浅谈java类集框架和数据结构(1)

    在另外一篇博客我简单介绍了java类集框架相关代码和理论. 这一篇博客我主要分析一下各个类集框架的原理以及源码分析. 一:先谈谈LinkedList 这是LinkedList源码的开头,我们能看到几点 ...

  10. .Net魔法堂:史上最全的ActiveX开发教程——ActiveX与JS间交互篇

    一.前言 经过上几篇的学习,现在我们已经掌握了ActiveX的整个开发过程,但要发挥ActiveX的真正威力,必须依靠JS.下面一起来学习吧! 二.JS调用ActiveX方法 只需在UserContr ...