前言

  好吧,我承认我是为了搞定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. 【JAVA】"骗人"的“replaceAll”

    Java String类中有个方法叫:replaceAll,从表面上看,他的意思是把所有的regex替换成replacement. public String replaceAll(String re ...

  2. HTML5[5]:在移动端禁用长按选中文本功能

    在手机浏览器中,长按可选中文本,但如果在应用中,会给人一种异样的感觉,最好还是禁用此功能为上. * { -webkit-touch-callout:none; -webkit-user-select: ...

  3. Js调用Java方法并互相传参

    Js通过PhoneGap调用Java方法并互相传参的. 一.JAVA代码 写一个类,该类继承自Plugin并重写execute方法. import org.json.JSONArray; import ...

  4. 用CentOS 7打造合适的科研环境 :zhuan

    这篇博文记录了我用CentOS 7搭建地震学科研环境的过程,供我个人在未来重装系统时参考.对于其他地震学科研人员,也许有借鉴意义. 阅读须知: 本文适用于个人电脑,不适用于服务器: 不推荐刚接触Lin ...

  5. AngularJS 监控对象属性:$watch和$digest

    监控对象属性:$watch和$digest $watch和$digest是相辅相成的.两者一起,构成了Angular作用域的核心:数据变化的响应.如果你学习过WPF,并基于WPF使用过一些MVVM框架 ...

  6. 网络通信分享(一):数字签名,数字证书,https通信,数据加密

    加密算法: 一:对称加密算法 在对称加密算法中,加密使用的密钥和解密使用的密钥是相同的.也就是说,加密和解密都是使用的同一个密钥.因此对称加密算法要保证安全性的话,密钥要做好保密,只能让使用的人知道, ...

  7. [ML] Naive Bayes for Text Classification

    TF-IDF Algorithm From http://www.ruanyifeng.com/blog/2013/03/tf-idf.html Chapter 1, 知道了"词频" ...

  8. [转载]基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览

    在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览 ...

  9. iOS-图片轮播-SDCycleSCrollView的使用

    介绍: SDCycleScrollView 是一款非常强大的轮播图第三方. 轮播流畅,手滑流畅.使用方便.自定义简单. 可以更改pageControl. 一. Demo地址 https://pan.b ...

  10. LeetCode-95. Unique Binary Search Trees II

    Description: Given n, generate all structurally unique BST's (binary search trees) that store values ...