gulp入坑系列(1)——安装gulp
前言
好吧,我承认我是为了搞定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的更多相关文章
- gulp入坑系列(2)——初试JS代码合并与压缩
在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/61 ...
- gulp入坑系列(4)——gulp的代码转换
当然,gulp不仅仅能转换Sass,这里会提到如下转换: jsx转换成常规的JavaScript(说到jsx,玩过react的同学应该是知道的) es6转换为es5 Less,Sass转换为CSS 首 ...
- gulp入坑系列(3)——创建多个gulp.task
继续gulp的爬坑路,在准备get更多gulp的具体操作之前,先来明确一下在gulp中创建和使用多个task任务的情况. gulp所要做的操作都写在gulp.task()中,系统有一个默认的defau ...
- 2-STM32带你入坑系列(点亮一个灯--Keil)
1-STM32带你入坑系列(STM32介绍) 首先是安装软件 这一节用Kei来实现,需要安装MDK4.7这个软件,怎么安装,自己百度哈.都学习32的人了,不会连个软件都不会安装吧....还是那句话 没 ...
- oracle入坑日记<一> 安装
学习日记系列(前辈/大神勿喷) 一.下载 下载地址:http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads ...
- Docker入坑系列(二)
Docker入坑系列(二) 上一篇我们为Docker创造了一个良好的生活环境,这一篇我们就开始让Docker活起来. 安装Docker ok,原文地址在这里. 当然,我只是自己翻译了一下而已- -跟着 ...
- Docker入坑系列(一)
Docker入坑系列(一) 引用嘛,当然是来引用别人说的东西啦. Docker 是一个开源项目,诞生于 2013 年初,它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux ...
- 3-STM32带你入坑系列(自己封装点亮一个灯的库--Keil)
2-STM32带你入坑系列(点亮一个灯--Keil) 首先建一个stm32f103x.h的文件,然后 #include "stm32f103x.h" 还记得上一节 现在呢就是做一个 ...
- 1-STM32带你入坑系列(STM32介绍)
由于自己的物联网开发板上的单片机是用的STM32,但是有些朋友没有用过,所以我将用这块开发板,带着大家入门STM32 先介绍一下STM32,我是在大三下学期的时候开始接触STM32,当时是想做一个小车 ...
随机推荐
- .htaccess 语法以及应用
[转] http://blog.sina.com.cn/s/blog_6e8b46e701014drc.html http://blog.sina.com.cn/s/blog_6e8b46e70101 ...
- xcode6.0 模拟器打不开
只要设置下这个就行了 本来以为虚拟机的问题 都把虚拟机从新安装了 杯具啊
- 2013年Linux周刊读者投票出炉 Ubuntu、Android榜上有名
摘要:一年一度的Linux周刊读者投票结果已经登于2013第12期.这是Linux爱好者们自己的“奥斯卡”: Linux周刊的小编们列出一系列Linux相关的“最佳项目”进行面向读者的投票.竞选项目包 ...
- ruby AES加密解密
最近和京东合作做一个项目,在接口对接传递参数时,参数需要通过AES加密解密. 本来想到用gem 'aescrypt'处理,但是aescrypt的编码方式用的base64,而京东那边用的是16进制.所以 ...
- React JS 基础知识17条
1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...
- Three.js源码阅读笔记-5
Core::Ray 该类用来表示空间中的“射线”,主要用来进行碰撞检测. THREE.Ray = function ( origin, direction ) { this.origin = ( or ...
- SNF开发平台WinForm之十三-单独从服务器上获取PDF文件进行显示-SNF快速开发平台3.3-Spring.Net.Framework
1运行效果: 2开发实现: 如果需要单独显示PDF文件时用下面代码去实现,指定url地址. 地址: . 获取附件管理的实体对象: List<KeyValuePair<string, obj ...
- 用 .NET Reflector 8 查看 System.Windows.Controls 命名空间下的类
为了学习自定义控件,就想看看WPF基本元素的代码.使用到工具.NET Reflector. System.Windows.Controls 命名空间在PresentationFramework.dll ...
- 免费下载:320+ 手绘风格 Apple iOS7 图标
Themify 图标是一套用在网页设计和应用程序的图标,包括 320+ 手工制作的像素完美的苹果 iOS7 图标中汲取灵感.这些图标完全免费,您可以用于任何目的,无论是个人或商业. 您可能感兴趣的相 ...
- JavaScript之旅(二)
JavaScript之旅(二) 二.进阶知识 js的正则表达式 异常处理 调试 变量提升 表单验证 JSON javascript:void(0) JavaScript 代码规范 二.进阶知识 1. ...