gulp入门教程详解
最近使用gulp自动化构建工具来开发网站，在此给大家分享一下使用gulp的一些使用教程。
一 gulp安装
1、安装nodejs
1.1、说明：gulp是基于nodejs，理所当然需要安装nodejs
1.2、安装：打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。
2、全局安装gulp
2.1、说明：全局安装gulp目的是为了通过她执行gulp任务；
2.2、安装：命令提示符执行npm install gulp -g；
2.3、查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。
3、新建package.json文件
3.1、说明：package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件；
3.2、执行命令提示符执行npm init进行手动安装
3.3、安装完成后会在当前文件夹下看到如下package.json文件
package.json文件
文件说明：
"name":"test",//项目名称（必须）
"version":"1.0.0",//项目版本（必须）
"description":"This is for study gulp project !",//项目描述（必须）
"devDependencies":{//项目依赖的插件
3.4、查看package.json帮助文档，命令提示符执行npm help package.json
4、安装本地gulp及其常用插件
4.1、执行命令行npm install gulp 安装本地gulp
4.2、安装gulp插件：以gulp—sass为例
执行命令npm install gulp-sass即可安装gulp-sass插件，安装完成后即可在node_modules文件夹下查看到新安装的插件
5、新建gulpfile.js文件（重要）
5.1、说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）
5.2、gulpfile.js文件用法（以gulp-sass为例）
5.2.1 导入工具包 require('node_modules里对应模块')
var gulp=require('gulp')
var less=require('gulp-less');
5.2.2 定义一个testLess任务（自定义任务名称）
gulp.task('testLess',function(){
gulp.src('src/less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
gulp.task("default",["watch"],function(){ //定义默认任务 并让gulp监视文件变化自动执行
gulp.watch("sass/*.scss",["sass"]);
})
二、gulp常用插件
1、gulp-uglify(JS压缩)
安装：npm install --save-dev gulp-uglify
gulpfile.js代码如下：
var gulp = require('gulp'),
var rename= require('gulp-rename')
var uglify= require("gulp-uglify");
gulp.task('rename',function() {
gulp.src('src/**/*.js')
.pipe(uglify())//压缩
.pipe(rename('index.min.js'))
.pipe(gulp.dest('build/js'));
});
gulp.task('default',['rename']);
uglify= require("gulp-uglify");
2、gulp-minify-html（html压缩）
安装：npm install --save-dev gulp-minify-html
代码如下：
var gulp = require('gulp'),
var minifyHtml= require("gulp-minify-html");
gulp.task('minify-html',function() {
gulp.src('src/**/*.html')//要压缩的html文件
.pipe(minifyHtml())//压缩
.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-jada
安装：npm install –save-dev gulp-jada
Gulpfile.js代码如下：
var gulp= require('gulp');
var jade= require('gulp-jade');
gulp.task("jade",function(){
gulp.src("./jade/*.jade")
.pipe(jade({
pretty:true
}))
.pipe(gulp.dest("html/"))
})
gulp.task("default",["watch"],function(){
gulp.watch("jade/*.jade",["jade"]);
})
4、gulp-less
安装：npm install –save-dev gulp-less
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']);
5、gulp-sass
安装：npm install –save-dev gulp-sass
代码如下：
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']);
6、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']);
7、理解Browserify
browserify是一个使用node支持的CommonJS模块标准 来为浏览器编译模块的，可以解决模块及依赖管理；
先来看看使用gulp常见的问题：
1. 使用 gulp 过程中，偶尔会遇到 Streaming not supported 这样的错误。这通常是因为常规流与 vinyl 文件对象流有差异、
gulp 插件默认使用了只支持 buffer （不支持 stream）的库。比如，不能把 Node 常规流直接传递给 gulp 及其插件。
比如如下代码：会抛出异常的；
vargulp = require('gulp');
varuglify = require('gulp-uglify');
varconcat = require('gulp-concat');
varrename = require('gulp-rename');varfs = require('fs');
gulp.task('bundle',function() {returnfs.createReadStream('./test.txt')
.pipe(uglify())
.pipe(rename('bundle.min.js'))
.pipe(gulp.dest('dist/'));
});
gulp.task('default',['bundle']);
