利用gulp来对less编译成css

Veröffentlicht am

利用gulp来对less编译成css

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

  1. 我们需要知道gulp是啥，它是一个拥有很多功能的东西，例如压缩图片啊，检验js书写是否正确啦，但是这里介绍的是，它的其中一个功能就是用于编译less。
  2. 好，接下来设计到另一个词，这里的编译时什么意思，我们或许可以理解成“翻译”，相当于有个机器将英文翻译成中文那样子，并且是实时是那种，这个过程我们叫做编译。
  3. 接着，less又是什么呢？它是一种语言，它有它的书写方式，整体架构跟CSS差别不会太大，但是，它却可以快速提高书写的效率，至于怎么的一种语法可以让它快速书写呢？大致情况如下：less1 less2less3less4它的使用大概就是像上面截图的那个样子了，就是加了一些算法和方便的技巧进去，可能有人觉得这约么就是方便了一点点而已，有这个必要吗？其实很有必要，写代码最怕的就是乱，这个可以在大工程里面帮助到你很多的，至少你书写会很方便，这点优处等你用了之后你才能切身感受到，你要做到的就是去用就行了。
  4. 知道什么是less之后，剩下的就是css了，这个应该不用作过多的解释了。

    第二步，了解了什么是什么之后，接下来真枪实弹地开干了。

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

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

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

  1. 接下来，我们在工程文件夹里面新建一个 package.json文件，代码如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {
      "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": "surging2@qq.com"
      },
      "license": "ISC",    //项目许可协议
      "devDependencies": {    //项目依赖的插件
        "gulp": "^3.8.11",
        "gulp-less": "^3.0.0"
      }
    }

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

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

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

  2. 接下来，安装本地的插件，我们要安装的是less的相关插件。

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

gulp-less

  1. 新建gulpfile.js文件，这是一个配置文件，里面的内容，每一条代码都要学会自己写出来，详情见图的解释，慢慢看，肯定能懂。gulpfile

  2. 然后输入指令运行

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

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

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