如何通过gulp构建工具来编译less文件

简介：

gulp：gulp是自动化构建工具,构建工具可以使繁琐的工作简单化，提高开发人员的工作效率，对于前端开发开发人员来说，我们通常用gulp来合并文件，压缩文件，编译less和sass文件等。

less：less 是动态的样式表语言，通过简洁明了的语法定义，使编写 css的工作变得非常简单。程序员通过变量和函数来定义less文件，通过less文件编译成css文件以便使用，less引入变量和函数的概念可以很方便高效的管理和维护css样式文件。

今天我们就通过gulp工具来编译less文件，以便了解gulp的使用。

具体操作：

1.安装nodejs

gulp 是基于 node 实现的，那么我们就需要先安装 node。在windows平台可以直接到https://nodejs.org/en/下载客户端，安装nodejs就像其他windows平台软件安装一样简单。使用nodejs需要依赖命令行，安装好后在命令行执行 node -v 可以查看版本号，若看到版本号说明安装成功。

2.全局安装gulp

gulp的安装需要依赖npm包管理工具，用该工具能解决NodeJS代码部署上的很多问题，目前该管理工具和nodejs是一起打包安装的不需要另外安装。在安装好nodejs后在命令行执行 npm -v 可以查看版本号，若看到版本号说明安装成功。

接下来通过命令行执行 npm install gulp -g 全局安装gulp，安装过程视情况可能会很慢甚至不能成功。下图是正在安装。

安装成功后在命令行执行 gulp -v 可以查看版本号，若看到版本号说明安装成功。

3.在项目目录中创建package.json

创建package.json文件有两种方式

方式1：不通过命令行在项目目录中直接创建该文件。文件内容类似如下。

{
  "name": "gulp2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp-less": "^3.3.0"//安装less插件依赖该文件，此处配置安装那个版本的gulp-less
  }
}

方式2：通过命令行方式创建该文件

在命令行中通过cd命令切换到项目目录，在windows平台下，例如你的项目目录在c:/test/web1,可以在命令行执行 c：让当前目录切换到c盘，然后执行 cd /test/web1 即可切换到要执行任务的项目目录，接着在命令行执行 npm init ，得到如下结果提示你配置package.json文件。

如果不做任何输入，每个字段都通过enter键忽略掉会得到一个默认的配置文件，就像下图，至此package.json文件配置成功，项目文件中新建了一个package.json。

4.在项目中安装gulp

在项目目录下，在命令行执行 npm install gulp –save-dev 命令，会在项目中安装gulp。

下图是安装成功的部分显示。

5.在项目中安装gulp-less插件

在项目目录下，在命令行执行 npm install gulp-less –save-dev 命令，会在项目中安装gulp-less插件。

安装完成会看到很长一段下图的内容，下图是其中的一部分，说明安装成功了。

6.通过gulp和插件gulp-less执行编译less文件的任务

在项目目录中创建你需要编译的less文件（例如项目目录中css/index.less文件）。 通过gulp执行任务之前需要配置执行任务的文件，在项目目录中创建gulpfile.js文件，文件内容如下，gulp通过该配置执行任务。

var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');//本地安装gulp-less所用到的地方

//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('css/index.less') //该任务针对的文件，你需要编译的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('css/index')); //将会在css下生成index.css
});

gulp.task('default',['testLess']); //定义默认任务，通过命令行执行gulp命令若没提供任务名就按此处定义的任务来执行，可以是一次执行多个任务。

最后在项目目录下通过命令行执行 gulp 就会执行编译less文件的任务了（也可以执行gulp 任务名）。得到类似如下结果：

至此整个任务就算成功了。

备注：

除了可以用npm之外，还可以使用cnpm来执行以上用到npm的命令，使用cnpm会快一点，这是淘宝提供的镜像，服务器在国内，npm在国外，使用cnpm需要先安装cnpm，可以执行在命令行执行 npm install cnpm -g –registry=https://registry.npm.taobao.org 命令，安装完后最好查看其版本号cnpm -v，后面执行看到的提示信息和npm不一样，当操作步骤几乎是一样的。