使用gulp搭建less编译环境

一、首先要确定全局安装了gulp， gulp的全局安装命令

npm install gulp -g

二、在项目目录下执行以下命令，创建package.json文件：

 npm init

三、依次执行下面的命令下载gulp依赖包和gulp-less以及gulp-autoprefixer工具：

  npm install gulp  -D

  npm install gulp-less  gulp-autoprefixer  -D

四、在项目目录中创建一个gulpfile的js文件，js代码如下

//1:引入所需要的模块

var gulp  =require("gulp");

var less  =require("gulp-less");

//css前缀兼容

var auto  =require("gulp-autoprefixer");

//2:创建编译less任务，第一个参数为任务名称

gulp.task("compileLess",function(){

       //找到项目中less文件夹中所有文件夹下的所有less文件

        gulp.src("./less/**/*.less")

               //进行预编译处理,保持与引入的模块一致

              .pipe(less())

              .pipe(auto({

                     grid:true,

                    browsers:['last 2 version']

       }))

              //编译后将less编译成的css文件保存到项目目录下的css文件夹中

             .pipe(gulp.dest('./css'))

})

//到此，到项目目录下，在终端输入以下命令，就会在项目目录下生成一个css文件夹，并且在css文件夹中生成一个与预编译的less文件同名的css文件：

执行命令：

gulp compileLess

//拓展：在最后添加以下代码，在终端直接输入：gulp 也可以达到相同效果。这个适用于编译多个不同类型的文件

//第一个参数为要预编译的目标文件，第二个参数为数组，数组存储各个任务名

gulp.task("watch:less",function(){

          gulp.watch('./less/**/*.less',['compileLess']);

})

//数组存储各个任务名

gulp.task("default",["compileLess","watch:less"]);