Gulp和所有Gulp插件都是基于nodeJs来运行的，因此在你的电脑上需要安装nodeJs，安装过程请移驾安装并配置前端自动化工具——grunt。安装完成后，通过运行cmd进入DOS命令窗口，如图：
如上图，输入node -v然后回车，看到有版本号，证明nodeJs安装成功。
接下来就是安装Gulp了：
1、首先进行全局安装gulp,如图：
安装完成后，输入gulp -v然后回车，看到有版本号，证明gulp安装成功。
2、在你的项目中安装作为项目的开发依赖（devDependencies），如图：
安装过程中会出现WARN警告提示，可以不用管它。
3、在项目根目录下创建一个名为gulpfile.js的文件，如图：
4、运行gulp，如图：
上图已经说明，可以成功运行gulp了。
5、下载项目所需要插件：
- （5.1）如果只需要下载一个插件（以js压缩gulp-uglify为例）,输入如下代码，回车。
- （5.2）如果需要下载多个插件，则插件之间用空格隔开。
6、配置gulpfile.js
//引入gulp
var gulp = require('gulp');
//引入组件
var less = require('gulp-less'),//编译less
minifyCss = require('gulp-minify-css'),//压缩css
uglify = require('gulp-uglify'),//压缩js
htmlmin = require('gulp-htmlmin'),//压缩html
concat = require('gulp-concat'),//文件合并
rename = require('gulp-rename');//重命名js
//编译less 定义一个less任务（自定义任务名称）
gulp.task('less',function(){
gulp.src('./less/*.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('./css'));//编译后的路径
});
//压缩css
gulp.task('cssmin', function() {
gulp.src('./css/*.css') //压缩的文件
.pipe(rename({suffix: '.min'}))
.pipe(minifyCss()) //执行压缩
.pipe(gulp.dest('./dist/css')); //输出文件夹
});
//压缩并且重命名js
gulp.task('jsmin',function(){
gulp.src('./js/*.js')
.pipe(concat('all.js')) //合并文件，如果没有这一句，则不进行合并
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
//压缩html
gulp.task('htmlmin',function(){
var options = {
collapseWhitespace:true, //从字面意思应该可以看出来，清除空格，压缩html，这一条比较重要，作用比较大，引起的改变压缩量也特别大。
collapseBooleanAttributes:true, //省略布尔属性的值，比如：<input checked="checked"/>,那么设置这个属性后，就会变成 <input checked/>。
removeComments:true, //清除html中注释的部分，我们应该减少html页面中的注释。
removeEmptyAttributes:true, //清除所有的空属性。
removeScriptTypeAttributes:true, //清除所有script标签中的type="text/javascript"属性。
removeStyleLinkTypeAttributes:true, //清楚所有Link标签上的type属性。
minifyJS:true, //压缩html中的javascript代码。
minifyCSS:true //压缩html中的css代码。
};
gulp.src('./*.html')
.pipe(htmlmin(options))
.pipe(gulp.dest('./dist/html'));
}); //总之，压缩Html的原则就是清除没用的代码，删除本就是默认值的属性，将html压缩到最小，这样才能提高项目运行的性能。
//默认任务
gulp.task('default',function(){
gulp.run('jsmin','less','cssmin','htmlmin');//run同时并行多个文件
//监听文件变化
gulp.watch(['./js/*.js','./less/*.less','./*.html'],function(){ //实时监听js less css的变化
gulp.run('jsmin','less','cssmin','htmlmin');
});
});
//gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径
其中：
1.task(参数1，参数2) 配置任务，参数1任务名称，参数2回调方法
2.src(参数为路径) 放的是源文件路径
3.dest(参数) 参数为我们打包的资源的路径，就是你所有处理之后的文件的输出路径,如果某文件夹不存在，将会自动创建它
4.watch() 自动监听文件变化
具体的，可以去gulp官网查看其API。
最后就是在项目中使用这些插件了，下图是我的项目目录，里边的css文件夹中有开发时写的css样式文件，js文件夹中有开发时写的js文件：
然后在DOS命令中运行gulp，会在项目中新建一个生产用dist文件夹，该文件夹里边就是压缩之后的css和js文件：
同时，由于在项目中也有less预编译文件，也安装了less插件，gulpfile.js中也配置了less，所以在css开发文件夹下也出现了less被编译后的css文件：
- 注意，由于在运行gulp时，css开发文件夹下没有style.css，因此运行gulp后在dist生产文件夹下的css文件夹中也就没有style.min.css，但是在css开发文件夹中却出现了style.css，如上图，因为此时这个style.css文件就是style.less在被编译后所生成的，所以要想使得这个css文件也被压缩，就要再运行一次gulp了。如下图，再一次运行gulp后style.css也被成功压缩了。
至此，gulp的安装和使用过程就全部介绍完毕了。从中，本人也获得了和广大的前端开发人员同有的一个感触就是gulp的配置确实比grunt简单多了。