gulp

gulp的使用方法

1 全局安装gulp(首先要进入当前所在的目录下下载)

npm  install  gulp   -g

2 然后局部安装gulp(在当前所在的目录下下载)

npm  install  gulp   --save-dev

3 注册任务

gulp.task('任务名',function(){
   //配置任务的操作
})

在该路径下的终端中可以执行gulp  任务名

4 注册默认任务

gulp.task('default',['任务名'])

5 使用gulp的插件

1  gulp-concat:合并文件（js/css）
2  gulp-uglify:压缩文件
3  gulp-rename:重命名文件
4  gulp-clean-css:压缩css
5  gulp-livereload:实时自动编译刷新

6 重要的API

1  gulp.src(filePath/PathArr)
   指向指定路径的文件，返回文件流对象
   用于读取文件

2 gulp.dest(dirPath/pathArr)
	指向指定的所有文件夹
	用于向文件夹中输出文件

gulp的实际使用案例

1 下载完gulp后下载相关的插件

1 下载插件
npm  install  gulp-concat   gulp-uglify   gulp-rename  --save-dev

2 在packfile.s文件中配置编码
		var  concat = require("gulp-concat")
		var  uglify = require(“gulp-uglify”)
		var    rename = require("gulp-rename")

2 注册合并压缩js文件

gulp.task("js",function(){
	return   gulp.src("src/js/*.js")   //找到目标源文件，将数据读取到gulp中
	.pipe(concat("build.js"))  //将目录下的js文件都临时保存到build,js中
	.pipe(gulp.dest("dist/js/"))//将上面的临时文件放入指定目录下
	.pipe(uglify()) //压缩该文件
	.pipe(rename({suffix:".min"})) //将压缩后为文件重命名加上一个后缀.min
	.pipe(gulp.dest("dist/js/")) 将压缩并重名后的文件保存到指定的目录下


})

3 注册转换less的任务

1  npm  install  gulp-less   gulp-clean-css  --save-dev
2  配置编码
	var   less = require("gulp-less");
	var  cleanCss = require("gulp-clean-css");
3 注册转换less的任务
	gulp.task("less",function(){
	return    gulp.src("src/less/*.js")  //查找目标文件
		.pipe(less()) //编译less文件为css文件
		.pipe(gulp.dest("src/css/")) 将编译后的文件保存到指定路径下
})

4 压缩html任务

1 下载插件
npm install  gup-htmlmin  --save-dev
2 配置编码
	var   htmlmain = require("gulp-htmlmain");
3 压缩html任务
 gulp.task("html",function(){
	return    gulp.src("index.html")
	.pipe(htmlMin({collapseWhitespace:true}))
	.pipe(gulp.dest("dist"))

})

5 压缩合并css文件

gulp.task("css",["less"],function(){
	return   gulp.src("src/css/*.css")
	.pipe(concat("build.css"))
	.pipe(rename("suffix:min"))
	.pipe(cssClean({compatibility:"ie8"}))
})