前言

  好吧,我承认我是为了搞定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. .htaccess 语法以及应用

    [转] http://blog.sina.com.cn/s/blog_6e8b46e701014drc.html http://blog.sina.com.cn/s/blog_6e8b46e70101 ...

  2. xcode6.0 模拟器打不开

      只要设置下这个就行了 本来以为虚拟机的问题  都把虚拟机从新安装了 杯具啊

  3. 2013年Linux周刊读者投票出炉 Ubuntu、Android榜上有名

    摘要:一年一度的Linux周刊读者投票结果已经登于2013第12期.这是Linux爱好者们自己的“奥斯卡”: Linux周刊的小编们列出一系列Linux相关的“最佳项目”进行面向读者的投票.竞选项目包 ...

  4. ruby AES加密解密

    最近和京东合作做一个项目,在接口对接传递参数时,参数需要通过AES加密解密. 本来想到用gem 'aescrypt'处理,但是aescrypt的编码方式用的base64,而京东那边用的是16进制.所以 ...

  5. React JS 基础知识17条

    1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...

  6. Three.js源码阅读笔记-5

    Core::Ray 该类用来表示空间中的“射线”,主要用来进行碰撞检测. THREE.Ray = function ( origin, direction ) { this.origin = ( or ...

  7. SNF开发平台WinForm之十三-单独从服务器上获取PDF文件进行显示-SNF快速开发平台3.3-Spring.Net.Framework

    1运行效果: 2开发实现: 如果需要单独显示PDF文件时用下面代码去实现,指定url地址. 地址: . 获取附件管理的实体对象: List<KeyValuePair<string, obj ...

  8. 用 .NET Reflector 8 查看 System.Windows.Controls 命名空间下的类

    为了学习自定义控件,就想看看WPF基本元素的代码.使用到工具.NET Reflector. System.Windows.Controls 命名空间在PresentationFramework.dll ...

  9. 免费下载:320+ 手绘风格 Apple iOS7 图标

    Themify 图标是一套用在网页设计和应用程序的图标,包括 320+ 手工制作的像素完美的苹果  iOS7 图标中汲取灵感.这些图标完全免费,您可以用于任何目的,无论是个人或商业. 您可能感兴趣的相 ...

  10. JavaScript之旅(二)

    JavaScript之旅(二) 二.进阶知识 js的正则表达式 异常处理 调试 变量提升 表单验证 JSON javascript:void(0) JavaScript 代码规范 二.进阶知识 1. ...