1.gulp的简介：特点：
1.任务化
2.基于流（数据流I/O） 首先会先读本地文件到gulp的一个内存中，然后在这个内存中处理。
再输出，从gulp的内存中输出出来。
2.gulpAIP：
当安装完gulp以后，本地就有了一个gulp对象
1.gulp.src(globs[, options]) .src的路径是去找目标源文件
2.gulp.dest(path[, options]) 从gulp所占内存中输出的文件
3.gulp.task(name[, deps], fn) 去gulp中注册一个任务 fn中可以任意铺管道pipe()
4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb]) 监视gulp中的文件
常用的gulp插件:
gulp-concat:合并文件（js/css）
gulp-uglify:压缩js文件
gulp-rename:文件重命名
gulp-less:编译less
gulp-clean-css:压缩css
gulp-livereload:实时自动编译刷新
重要API
gulp.src(filePath/pathArr):
指向指定路径的所有文件,返回文件流对象
用于读取文件
gulp.dest(dirPath/pathArr)
指向指定的所有文件夹
使用方法：
1.npm install 安装所需要的包
gulp
gulp-clean-css
gulp-concat
gulp-less
gulp-rename
gulp-uglify
gulp-connect
gulp-htmlmin
gulp-livereload
open
2.在gulpfile中引入
var
gulp=
require(
"gulp");
var
concat=
require(
"gulp-concat");
var
rename=
require(
"gulp-rename");
var
uglify=
require(
"gulp-uglify");
var
cssClean=
require(
"gulp-clean-css");
var
less=
require(
"gulp-less");
var
htmlMin=
require(
"gulp-htmlmin");
var
livereload =
require(
"gulp-livereload");
var
connect=
require (
"gulp-connect");
var
open =
require(
"open");
3.合并压缩js任务
//注册任务
// gulp.task("任务名",function(){
// //配置任务的操作
// })
//注册合并压缩js的任务 /**表示深度遍历
gulp.
task(
'js',
function(){
return
gulp.
src(
'src/js/*.js')
//找到目标源文件，将数据读取到gulp的内存中
.
pipe(
concat(
'build.js'))
//合并文件
.
pipe(
gulp.
dest(
'dist/js/'))
//临时输出到dist下的js中
.
pipe(
uglify())
//压缩文件
.
pipe(
rename({
suffix:
'.min'}))
//重命名
.
pipe(
gulp.
dest(
'dist/js/'))
.
pipe(
livereload())
//实时刷新
.
pipe(
connect.
reload())
});
4.注册转换less
//注册转换less的任务
gulp.
task(
'less',
function(){
return
gulp.
src(
'src/less/*.less')
.
pipe(
less())
//编译less文件为css文件
.
pipe(
gulp.
dest(
'src/css/'))
.
pipe(
livereload())
//实时刷新
.
pipe(
connect.
reload())
})
5.注册转换css
/**注册合并压缩css文件 因为现在是异步的，所以要在less执行完成后再执行，
用法就是在任务和回调之间加数组，里边写要执行完的任务名称
*/
gulp.
task(
'css',[
'less'],
function(){
return
gulp.
src(
'src/css/*.css')
.
pipe(
concat(
'build.css'))
.
pipe(
rename({
suffix:
'.min'}))
.
pipe(
cssClean({
compatibility:
'ie8'}))
.
pipe(
gulp.
dest(
'dist/css/'))
.
pipe(
livereload())
//实时刷新
.
pipe(
connect.
reload())
})
6.处理html
gulp.
task(
'html',
function(){
return
gulp.
src(
'index.html')
.
pipe(
htmlMin({
collapseWhitespace:
true}))
//把html文件中的空格去掉
.
pipe(
gulp.
dest(
'dist/'))
.
pipe(
livereload())
//实时刷新
.
pipe(
connect.
reload())
})
7.注册监视任务
//注册监视任务
gulp.
task(
'watch',[
'default'],
function(){
//开启监听
livereload.
listen();
//确认监听的目标以及绑定相应的任务
gulp.
watch(
'src/js/*.js',[
'js']);
gulp.
watch([
'src/css/*.css',
'src/less/*.less'],[
'css'])
})
8.自动化-启动一个服务
//注册监视任务(自动化)
gulp.
task(
'server',[
'default'],
function(){
//配置服务器的选项
connect.
server({
root:
'dist',
livereload:
true,
//实时刷新
port:
5000
});
//open可以自动打开指定的链接
open(
'http://localhost:5000/');
gulp.
watch(
'src/js/*.js',[
'js']);
gulp.
watch([
'src/css/*.css',
'src/less/*.less'],[
'css'])
})
9.注册默认任务
//注册默认任务
gulp.
task(
'default',[
'js',
'less',
'css'])
技术点总结：
/*执行gulp default的时候可以看出来它是异步的 显示启动 至于谁先完成
谁后完成取决于任务量的大小,因为写了return
如果不写return 则它会同步执行
*/
/*
*处理html
npm install gulp-htmlmin --save-dev
*/
/**
*
* 自动编译
* npm install gulp-livereload --save-dev
*/
/**
*
* 热加载(实时加载)
* npm install gulp-connect --save-dev
*/
/**
* 自动打开连接
* npm install open --save-dev
*
*/
/**
* 扩展
* 打包加载gulp插件
* 前提：将插件下载好
* 下载打包插件:gulp-load-plugins
* npm install gulp-load-plugins --save-dev
*
* 引入:var $=require('gulp-load-plugins')();
*
*/