笔记:gulp的安装以及less插件安装与使用

果是新手就请先看完全篇文章再开始动手操作,否则中间遗漏了什么细节的话有可能导致安装失败或者安装后测试时出现找不到文件的尴尬。

相信大家再写代码的时候或多或少都会遇到一个问题,比如css文件中,某一些参数因为一些不可避免的原因需要改动,而改动的参数内容时是完全一样的,但是却不是在同一个地方,而且css文件篇幅很长。这是你就会存在一种无法言语的难受。那么接下来我们就一起学习一种减轻你负担的方法。


大家都知道gulp好用,可是就时安装的时候很烦人,本人通过反复的实验之后总结了以下几点:

1.安装node.js:

有的人就在想,我要安装的是gulp,你给我说node.js干嘛?

举个简单的例子。我们日常生活中都要做饭、吃饭。而node就像是做饭用的灶台(能量来源)。gulp就像是厨具。而gulp的功能性插件就像是餐具(本文以less为例)

因此我们要先安装node.js;

2.安装gulp:

文中会有两次提到安装gulp。

a.全局安装;

b.非全局安装。

3.新建package.json文件(重要)

4.安装需要的对应模块。

5.创建gulpfile.js文件(重要)

6.开始使用。

==============================这是一条分割线==============================================

1.下载node.js

官网页面:https://nodejs.org/en/   点击打开链接

官网里面就有点击下载的显眼按钮,点就下载就好了

2.安装node.js后

我们打开cmd

笔记:gulp的安装以及less插件安装与使用

这时我们输入 node -v  以及  npm -v  检查是否安装成功。

笔记:gulp的安装以及less插件安装与使用


确保出现版本号之后我们继续操作。


3.为了提高后续使用的快速,我们安装一个cnpm。

什么是cnpm?简单的来说就是把国外的npm完全映照在国内

这就是镜像的cnpm。内容会不断的同步npm的内容。

至于怎么安装请跳转:http://blog.csdn.net/qq_38712750/article/details/71750734点击打开链接


4.安装好了之后我们开始进入今天的正题gulp的安装使用;

输入安装命令 cnpm install gulp-g          注意这里的-g 是全局安装

笔记:gulp的安装以及less插件安装与使用


安装好后查看是否安装成功(用查看版本号的方法)输入 gulp -v

笔记:gulp的安装以及less插件安装与使用


然后进入下一步

5.新建package.json文件

在这之前我们先要跳转到想存放的文件目录中

笔记:gulp的安装以及less插件安装与使用


确定跳转成功后接着输入:cnpm init笔记:gulp的安装以及less插件安装与使用


输入关键内容:

笔记:gulp的安装以及less插件安装与使用


填写完后一定要确认内容

最后确认生成package.json文件

笔记:gulp的安装以及less插件安装与使用

先检查一下,成功生成文件后继续下一步


6.安装less:输入cnpm install gulp-less --save-dev  以及cnpm install gulp --save-dev注意这里不是全局安装

--save:将保存配置信息至package.json(package.json是nodejs项目配置文件);

-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;一般保存在dependencies的像这些express/ejs/body-parser等等。

笔记:gulp的安装以及less插件安装与使用


接着检查package.josn文件里是否存在安装的内容(12,13),没有的话要手动添加。

笔记:gulp的安装以及less插件安装与使用


7.创建gulpfile.js文件内容如下:(第一次输入最好手打  提高印象)

笔记:gulp的安装以及less插件安装与使用


一定要注意的是图中标记的路径以及文件名是可变的。

特别是less文件名,如果不想那么麻烦就直接用 ‘*’(星号代替) 代替;

然后就完成了一系列安装。

创建less文件后


开始测试,过程就用图片说明吧。

笔记:gulp的安装以及less插件安装与使用

笔记:gulp的安装以及less插件安装与使用

笔记:gulp的安装以及less插件安装与使用


笔记:gulp的安装以及less插件安装与使用笔记:gulp的安装以及less插件安装与使用


最后来个效果图

笔记:gulp的安装以及less插件安装与使用


笔记:gulp的安装以及less插件安装与使用



特别鸣谢:

参考内容来源:http://www.ydcss.com/archives/18 点击打开链接