gulp基础使用

一、安装

1、全局安装：npm install gulp -g     （通过它执行gulp任务)

2、本地安装：npm install gulp --save-dev  (项目目录中安装)

gulp的其他插件也按照类似操作。

二、使用

gulp.task('polarless',function(){   //执行一个gulp-less转译css任务
	gulp.src(['app/less/index.less','app/less/reset.less','app/less/com.less'])    //选择源文件路径
	    .pipe(less())                    //less编译
	    .pipe(concat('index.css'))      //合并两个css
	    .pipe(gulp.dest('app/css'));    //编译完成后的路径
})

gulp.task('diagsjs',function(){    //执行一个es6转译成es5任务           
	gulp.src('app/script/diagstock.js')    //选择要处理的js文件
		.pipe(babel({                  //执行babel
			presets:['env']
		}))
		.pipe(gulp.dest('app/scripts')); //输出至app/scripts目录中
})

gulp.task('webserver',['polarless','diagsjs'],function(){    //执行一个本地服务任务
	gulp.src('app')  
    	.pipe(webserver({
    		host:'localhost',
    		port:8000,
    		livereload:true,
    		directoryListening:true,
    		open:true
	    }));

	gulp.watch("app/less/*.less",['polarless']);   //监听less文件变化 及时更新
	gulp.watch("app/script/*.js",['diagsjs']);   
})

gulp.task  建立要执行的gulp任务

gulp.src   传入需要做处理的文件

gulp.dest 处理完后，文件输出至指定目录

gulp.watch  监听任务  

.pipe()  流，执行完上一个pipe再执行下一个

三、命令

以上例子中，在命令行中执行gulp.webserver便可以看到处理完后的文件。

注：gulp.task定义的任务，在命令行中输入gulp.任务名 即可得到你想要的结果。

这里只是简单举出几个小例子，还有很多gulp命令，比如js的合并压缩，图片的处理、删除命令等等。