gulp的使用

1.使用淘宝镜像
npm install cnpm -g --registry=https://registry.npm.taobao.org

2.安装gulp
cnpm install gulp -g

下次在新建以上就不用写了

3.找盘
d:

4.找路径
cd 

5.创建gulp工程
cnpm init

6.项目依赖于gulp
cnpm install gulp --save-dev

7.检查版本
gulp -v
    （完成创建gulp）

8.配置glupfile.js （在自己的工程下）
与package.son同一级
(node_modules下东西不能动)

9. glupfile.js中的操作

9.1 引入gulp

	var gulp = require("gulp");

------------安装引入需要的插件们

             //sass插件cnpm install gulp-sass --save-dev

       var sass=require("gulp-sass");

            //合并js 插件cnpm install gulp-concat --save-dev

        var concat=require("gulp-concat");

            //压缩 插件cnpm install gulp-uglify --save-dev

        var uglify=require("gulp-uglify");

                //压缩前后都保存 插件cnpm install gulp-rename --save-dev

            var rename=require("gulp-rename");

                //图片压缩 插件cnpm install gulp-imagemin --save-dev

            var imagemin=require("gulp-imagemin");

                //css压缩 cnpm install gulp-minify-css --save-dev

            var minify=require("gulp-minify-css");

9.2 创建任务    测试任务 （gulp 任务名）

	gulp.task("hello",function(){
		console.log("hello");
	});
	gulp.task("world",function(){
		console.log("world");
	});

默认任务  想要执行这些任务 就输入命令gulp aaa aaa就是你定义的任务名字如copy-images1
gulp.task("default",['hello','world']);
//拷贝单个文件

		gulp.task('copy-index',function(){
			//找到我的index。html文件     然后拷贝到dist文件夹中
			return gulp.src("index.html").pipe(gulp.dest("dist"));
		})

//拷贝多个文件(同类型的)

		gulp.task("copy-images",function(){
			//找到所有的images下的.jpg 格式的文件然后拷贝到dist中
			return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'));
		});

//拷贝多个文件(不同类型的)

		gulp.task("copy-images1",function(){
			return gulp.src('images/*{jpg,png}').pipe(gulp.dest('dist/images'));
		})

//拷贝多个文件(不同文件夹下不同类型的)

	gulp.task("copy-data",function(){
		return gulp.src(["myApp/json/optlist.json","myApp/xml/list.xml"]).pipe(gulp.dest("myAppRelease/data"));
	})

//拷贝除了XXX的文件

	gulp.task("copy-not",function(){
		gulp.src(["myApp/json/*.json","!myApp/json/optlist.json"]).pipe(gulp.dest("myAppRelease/data"))
	})
	

//拷贝所有文件

		gulp.task("copy-allfile",function(){
			//src("images/*/*")找到img下的文件夹下的所有文件
			//src("images/**/*")找到img下的所有文件以及文件夹
			gulp.src("images/**/*").pipe(gulp.dest("dist/images"))
		});

10.搭建服务器（开启本地服务）

    10.1安装插件cnpm install gulp-connect --save-dev
    10.2 在gulpfile.js中引入插件

var connect = require("gulp-connect");

//同步监听

gulp.task('copy-index1',function(){
	    	return gulp.src('myApp/index1.html').pipe(gulp.dest('myAppRelease'))
		.pipe(connect.reload());
	});

//监听

	gulp.task("watch-index",function(){
		gulp.watch('myApp/index1.html',['copy-index1']);
	})
	gulp.task("default",["server","watch-index"]);

//开始开启本地服务 需要用插件

	gulp.task("server",function(){
		connect.server({
			root:'myApp',
			livereload:true
		})
	})