gulp插件很多，这里介绍几个比较常用的插件。。。
1.gulp-less：用于把less文件编译成css文件。
因为html文件中不能直接引用less文件（需要导入相关编译js文件配合才行），因此需要想方设法把相应less文件编译成less文件编译成css文件。除了考拉编译外，还可以通过gulp这个自动化构建工具实现less文件的编译。
在用gulp编译前，首先你需要安装node.js。gulp是基于node.js，理所当然需要安装node.js。npm（node package manager)是node.js的包管理器，用于node插件管理（包括安装，卸载，管理依赖等），在安装gulp的时候，npm已经随着安装成功了。因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以建议使用cnpm。命令提示符执行：
npm install cnpm -g --registry=https://registry.npm.taobao.org
通过上面一步，cnmp可以取代npm了，它们的用法完全一致。
接着全局安装gulp。全局安装gulp的目的是为了通过它执行gulp任务。命令提示符执行：
cnmp install gulp -g
命令提示符执行：
gulp -v
出现版本号即为正确安装
然后本地安装gulp。全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。命令提示符执行：
cnpm install gulp --save-dev
此时gulp写进项目package.json。
完成以上步骤以后，你只需要在所在项目里安装gulp-less插件即可。命令提示符执行：
cnpm install gulp-less --save-dev
等命令执行完成后，你的项目已经具备了编译less文件的能力。然后配置你的gulpfile.js文件。
配置如下：
var gulp = require(‘gulp‘), less = require(‘gulp-less‘)；
//定义一个testLess任务（自定义任务名称）gulp.task(‘testLess‘, function () { gulp.src(‘less/*.less‘) //该任务针对的文件 .pipe(less()) //该任务调用的模块 .pipe(gulp.dest(‘css‘)); //将会在css下生成index.css});//监听less文件gulp.task(‘gulpWatch‘,function(){
gulp.watch(‘less/*.less‘,[‘testLess‘]);
});
//同时让默认程序执行一次，可以提高开始执行速度。gulp.task(‘default‘,[‘testLess‘,‘gulpWatch‘]);
最后在你的当前项目命令行中输入gulp执行即可。你会看到在相关的路径下生成对应的css文件。2.gulp-clean-css：css文件压缩。3.gulp-uglify：js压缩4.gulp-concat：js合并5.gulp-rename：重命名，给js压缩文件添加.min后缀6.gulp-jshint：js语法检查 tip：如果以上插件都需要用到，可以使用一行命令提示符搞定，如下：cnpm install gulp gulp-clean-css gulp-uglify gulp-concat gulp-rename gulp-jshint jshint gulp-less gulp-sass --save-dev 配置gulpfile.js如下：
var gulp = require(‘gulp‘), less = require(‘gulp-less‘), sass = require(‘gulp-sass‘); minifycss = require(‘gulp-clean-css‘),//css文件压缩 concat = require(‘gulp-concat‘),//js合并 uglify = require(‘gulp-uglify‘),//js压缩 rename = require(‘gulp-rename‘),//重命名 给js压缩文件添加.min前缀 jshint=require(‘gulp-jshint‘);//js语法检查//定义一个testLess任务（自定义任务名称）gulp.task(‘testLess‘, function () { gulp.src(‘less/*.less‘) //该任务针对的文件 .pipe(less()) //该任务调用的模块 .pipe(gulp.dest(‘css‘)); //将会在css下生成index.css});//定义一个testScss任务（自定义任务名称）gulp.task(‘testSass‘, function () { gulp.src(‘sass/*.scss‘) //该任务针对的文件 .pipe(sass()) //该任务调用的模块 .pipe(gulp.dest(‘css‘)); //将会在css下生成index.css});
//语法检查gulp.task(‘jshint‘, function () { return gulp.src(‘js/*.js‘) .pipe(jshint()) .pipe(jshint.reporter(‘default‘));});//压缩cssgulp.task(‘minifycss‘, function() { return gulp.src(‘css/*.css‘) //需要操作的文件 .pipe(rename({suffix: ‘.min‘})) //rename压缩后的文件名 .pipe(minifycss()) //执行压缩css .pipe(gulp.dest(‘allcss‘)); //输出文件夹});//压缩,合并jsgulp.task(‘minifyjs‘, function() { return gulp.src(‘js/*.js‘) //需要操作的文件 .pipe(concat(‘all.js‘)) //合并所有js到all.js .pipe(gulp.dest(‘alljs‘)) //输出到文件夹alljs下 .pipe(rename({suffix: ‘.min‘})) //rename压缩后的文件名 .pipe(uglify()) //压缩 .pipe(gulp.dest(‘alljs‘)); //输出});/*//默认命令,在cmd中输入gulp后,执行的就是这个任务(压缩js需要在检查js之后操作) gulp.task(‘default‘,[‘jshint‘],function() { gulp.start(‘minifycss‘,‘minifyjs‘); });*/
gulp.task(‘gulpWatch‘,function(){ gulp.watch(‘js/*.js‘,[‘minifyjs‘]); gulp.watch(‘less/*.less‘,[‘testLess‘,‘minifycss‘]);});//同时让默认程序执行一次，可以提高开始执行速度。gulp.task(‘default‘,[‘jshint‘,‘testLess‘,‘testSass‘,‘minifycss‘,‘minifyjs‘,‘gulpWatch‘]);
插件安装完成后在命令行运行gulp即可。