利用gulp来对less编译成css

利用gulp来对less编译成css（操作教程图解）

本文旨在介绍借助gulp这个打包工具来将less预编译语言编译成我们正常的css语言的整个基本操作流程。其中还提及到部分底层原理并避开了百度上部分杂七乱八的不完整答案

1.我们需要明白什么是gulp，什么是less，编译又是什么意思，这样做的意义在于哪里，对我们有什么帮助（请先安装好了node.js，需要这个环境）

（1）我们需要知道gulp是啥，它是一个拥有很多功能的东西，例如压缩图片啊，检验js书写是否正确啦，但是这里介绍的是，它的其中一个功能就是用于编译less。
（2）好，接下来设计到另一个词，这里的编译时什么意思，我们或许可以理解成“翻译”，相当于有个机器将英文翻译成中文那样子，并且是实时是那种，这个过程我们叫做编译。
（3）接着，less又是什么呢？它是一种语言，它有它的书写方式，整体架构跟CSS差别不会太大，但是，它却可以快速提高书写的效率，至于怎么的一种语法可以让它快速书写呢？大致情况如下：

它的使用大概就是像上面截图的那个样子了，就是加了一些算法和方便的技巧进去，可能有人觉得这约么就是方便了一点点而已，有这个必要吗？其实很有必要，写代码最怕的就是乱，这个可以在大工程里面帮助到你很多的，至少你书写会很方便，这点优处等你用了之后你才能切身感受到，你要做到的就是去用就行了。
（4）知道什么是less之后，剩下的就是css了，这个应该不用作过多的解释了。

2.了解了什么是什么之后，接下来真枪实弹地开干了

（1）先全局安装gulp，对于全部这个概念相当重要，如果想有更进一步的理解，可以百度。去到你要建立工程的文件夹下，右键，选择gitbash，输入命令行

$ npm install gulp -g #全局安装gulp

原则上任意位置都是可以输入这个命令行的，以为-g代表的就是全局安装，去哪都一样，但是之所以选择这个目录，是因为接下来还得安装一次本地的gulp。 接下来，输入

$ npm gulp -v #其实套路都一样，检测版本号

（2）接下来，我们在工程文件夹里面新建一个 package.json文件，代码如下：

{
  "name": "test",   //项目名称（必须）
  "version": "1.0.0",   //项目版本（必须）
  "description": "This is for study gulp project !",   //项目描述（必须）
  "homepage": "",   //项目主页
  "repository": {    //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": {    //项目作者信息
    "name": "surging",
    "email": "[email protected]"
  },
  "license": "ISC",    //项目许可协议
  "devDependencies": {    //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

当然上面都是菜鸟的操作，高手像下面图示这样用命令行来操作，新手咋一看，哇，这还不如我自己新建一个文件直接输入来得快的呢！其实等你真正操作你就知，用命令行打，甚至比你复制粘贴还要快，就是那么快，所以，毋庸置疑，最终，还是得输入命令行来执行这一步。

（3）接下来安装本地gulp，你可能会问，刚才不是安装了全局gulp了吗？不是全局都能使用吗？还装啥本地项目gulp呢？全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能

$ npm install gulp --save-dev #注意后面的--save-dev了，相当重要，因为这个把gulp保存在pacgage.json上面，以后可以打包发送给别人，不然，发给别人就会不完善

（4）接下来，安装本地的插件，我们要安装的是less的相关插件

$ npm install gulp-less --save-dev #后面的--save-dev和上面同理

（5）新建gulpfile.js文件，这是一个配置文件，里面的内容，每一条代码都要学会自己写出来，详情见图的解释，慢慢看，肯定能懂。
（6）然后输入指令运行

$ gulp #这个直接输入的时候就是代表默认状态的指令，当然也可以在gulp后面添加具体 的任务名字指定去执行某个任务，gulp等同于gulp default

（7）来，接下来看效果，这个时候less和css是会同时变化的，但是记得命令台一定要一直开着，才会有这个效果，关了之后它们两者就关联不起来了，也就是说，输入命令的那界面不可以关闭。

3.流程总结

流程基本讲完了，其实就是五分钟的事，但是如果看了凌乱的百度的相关资料的话，有可能会走上很多弯路，并且重重复复不知道问题出现在哪里，这里只是用来编译less这个单一的功能的，没有其他的整套功能。不过如果仅仅是想学习这个的话，还是看这篇文章写得比较有逻辑性，并且在逻辑上和顺序上是合理的，没有那么多和那么乱。