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,当时是想做一个小车 ...
随机推荐
- sizeof()用法汇总
sizeof()功能:计算数据空间的字节数 1.与strlen()比较 strlen()计算字符数组的字符数,以"\0"为结束判断,不计算为'\0'的数组元素. ...
- 图文安装Windows Template Library - WTL Version 9.0
从http://wtl.sourceforge.net/下载 WTL 9.0,或者点此链接下载:WTL90_4140_Final.zip,然后解压到你的VC目录下面, 我的地址是:C:\Program ...
- [原]如何在Android用FFmpeg+SDL2.0解码显示图像
如何在Android上使用FFmpeg解码图像参考文章[原]如何在Android用FFmpeg解码图像 ,如何在Android上使用SDL2.0来显示图像参考[原]零基础学习SDL开发之在Androi ...
- WPF中多个RadioButton绑定到一个属性
如图样: 在View中: <RadioButton IsChecked="{Binding Option, Converter={cvt:EnumToBooleanConverter} ...
- EHCACHE采用分布需要注意的地方
分布式EHCACHE系统,有两种同步方式 方式1 : RMI组播方式 这也是最常用的方式,配置简单,关键一点,各EHCACHE的节点配置都是一样的 原理:这样当缓存改变时,ehcache会向230. ...
- AngularJS的学习--TodoMVC的分析
最近一段时间一直在看AngularJS,趁着一点时间总结一下. 官网地址:http://angularjs.org/ 先推荐几个教程 1. AngularJS入门教程 比较基础,是官方Tutorial ...
- [Matlab.Matrix] reshape
a=[1,2,3;4,5,6;7,8,9]; a=reshape(a,1,9); a=[1,4,7,2,5,8,3,6,9]; a=reshape(a,9,1); a=[1;4;7;2;5;8;3;6 ...
- 叨叨PS那些活
临睡前记得今天技术小结没写...就起来叨叨些使用Photoshop做网站的活吧. 一般网站的建站流程和人员配置是: 1 美工,创建页面的psd图 2 前端工程师,根据psd图,切出html页面 3 后 ...
- JS魔法堂:doctype我们应该了解的基础知识
一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...
- Mysql数据库安全管理配置
1.删除test库 原因: The default MySQL installation comes with a database named test that anyone can access ...