安装gulp
安装gulp之前必须先安装node.js，然后在命令行里输入 $ npm install gulp-cli -g (-g 表示全局安装)然后在输入$ gulp -v ,验证，安装完成后再安装gulp，命令行里输入 $ npm install gulp 安装 再输入 $ gulp --version。
创建一个Gulp项目
在学习过程中，将一个名为package.json的文件作为根目录，在命令行内运行 $ npm init ,这将会为你的项目创建一个叫package.json的文件，文件会储存关于你的项目的信息，就像在项目里使用的依赖，在创建了package.json之后就可以通过 $ npm install gulp --save-dev (--save-dev 意思是把gulp作为依赖添加到当前项目。)在项目中只能装Gulp，这次我们是把Gulp安装到有package.json的项目中，而这个不是全局安装。现在可以在文件夹中看到一个node_modules文件夹，安装的gulp就在node_modules文件夹中。
我们已经做好了使用Gulp的准备工作，在我们使用之前必须清楚我们将要怎么使用Gulp。
1.使用Gulp我们先引入依赖
二、gulp常用插件
1、gulp-uglify(JS压缩)
安装：npm install gulp-uglify --save-dev
gulpfile.js代码如下：
var gulp = require(‘gulp‘)；//引入依赖
var uglify= require("gulp-uglify");//引入插件
gulp.task(‘jsmin‘,function() {
gulp.src(‘src/**/*.js‘)//要压缩的文件
.pipe(uglify())//压缩
.pipe(gulp.dest(‘build/js‘));//压缩到哪
});
gulp.task(‘default‘,[‘jsmin‘]);//注册默认任务
2、gulp-minify-html（html压缩）
安装：npm install --save-dev gulp-minify-html
代码如下：
var gulp = require(‘gulp‘)；//引入依赖
var htmlmin= require("gulp-minify-html");//引入插件
gulp.task(‘minify-html‘,function() {
gulp.src(‘src/**/*.html‘)//要压缩的html文件
.pipe(htmlmin())//压缩
.pipe(gulp.dest(‘build‘));//压缩到哪，
});
gulp.task(‘default‘,[‘minify-html‘]);//注册默认任务
3. gulp-concat (js文件合并)
安装：npm install --save-dev gulp-concat
代码如下：
var gulp = require(‘gulp‘)；//引入依赖
concat= require("gulp-concat");//引入插件
gulp.task(‘concat‘,function() {
gulp.src(‘src/**/*.js‘) //要合并的文件
.pipe(concat(‘index.js‘)) //合并匹配到的js文件并命名为 "index.js"
.pipe(gulp.dest(‘build/js‘));//合并完保存到哪
});
gulp.task(‘default‘,[‘concat‘]);//注册默认任务
4、gulp-clean-css(压缩css)
安装：npm install gulp-clean-css --save-dev
Gulpfile.js代码如下：
var gulp= require(‘gulp‘);//引入依赖
var mincss= require("gulp-clean-css");//引入插件
gulp.task(‘cssmin‘,function(){
gulp.src(‘css/*.css‘)//要压缩的css
.pipe(mincss())//压缩
.pipe(gulp.dest(‘dest‘))//压缩完保存到哪
});gulp.task(‘default‘,[‘cssmin‘])//注册默认任务
5、gulp-less
安装：npm install gulp-less --save-dev
Gulpfile.js代码如下：
var gulp = require(‘gulp‘),//引入依赖
var less= require("gulp-less");//引入插件
gulp.task(‘compile-less‘,function() {
gulp.src(‘src/less/*.less‘)//
.pipe(less())
.pipe(gulp.dest(‘build/css‘));
});
gulp.task(‘default‘,[‘compile-less‘]);//注册默认任务
6、gulp-sass
安装：npm install gulp-sass --save-dev
代码如下：
var gulp = require(‘gulp‘)；//引入依赖
var sass= require("gulp-sass");//引入插件
gulp.task(‘compile-sass‘,function() {
gulp.src(‘src/sass/*.sass‘)
.pipe(sass())
.pipe(gulp.dest(‘build/css‘));
});
gulp.task(‘default‘,[‘compile-sass‘]);//注册默认任务
7、gulp-imagemin（图片压缩）
安装：npm install –save-dev gulp-imagemin
代码如下：
var gulp = require(‘gulp‘);//引入依赖
var imagemin = require(‘gulp-imagemin‘);//引入插件
gulp.task(‘uglify-imagemin‘,function() {
returngulp.src(‘src/images/*‘)；//压缩图片的路径
.pipe(imagemin())//压缩
.pipe(gulp.dest(‘build/images‘));//压缩完保存的路径
});
gulp.task(‘default‘,[‘uglify-imagemin‘]);//注册默认任务