gulp插件使用

 //引入gulp组件
 var gulp=require('gulp');

 //创建任务
 gulp.task('hello',function(){
     console.log('hello');
 });
 //创建另一个任务
 gulp.task('world',function(){
     console.log('world');
 });
 //默认执行两个任务
 //一个gulpfile.js中只能有一个default
 //三种写法，3个参数
 /**
  * [description] default默认 的写法
  * 写法一：gulp.task('default',function(){});
  * 写法二：gulp.task('default',['task1','task2','....']);
  * 写法三：gulp.task('difault',['task1','task2','...'],function(){});
  *
  */
 /*gulp.task('default',['hello','world'],function(){
     console.log('finish');
 });*/
 //gulp的具体用法

 //拷贝文件
 gulp.task('copy-files',function(){
     //src:找到源文件   相对于gulpfile.js的路径
     //pipe ‘拷贝’ 管道  参数 拷贝完需要做的事
     //dest 目标 参数:路径
     gulp.src('src/index.html').pipe(gulp.dest('dist'));
 });
 //只拷贝类型为jpg的文件
 gulp.task('copy-images',function(){
     gulp.src('src/images/*.jpg').pipe(gulp.dest('dist/img'));
 });
 //拷贝所有文件
 //*表示第1层 **表示第二层 /**/*所有文件
 gulp.task('copy-allfiles',function(){
     gulp.src('src/images/*').pipe(gulp.dest('dist/img'));
 });
 //将多个文件的内容拷贝到一个文件夹下
 gulp.task('copy-data',function(){
     //src路径可以是一个数组['src1','src2'] 不需要的文件在路径前加一个!
     gulp.src('src/data/*').pipe(gulp.dest('dist/data'));
 });
 //监听
 /*gulp.task('watch',function(){
     //watch()监听 参数1：需要监听的文件 参数2：当监听到变化后完成的方法
     gulp.watch('src/index.html',['copy-files']);
 });*/
 // 停止监听（其他命令） Ctrl+C

 //引入gulp的插件gulp-connect 这个插件可以启动本地服务
 var connect=require('gulp-connect');
 gulp.task('server',function(){
     //启动本地服务
     connect.server({
         //设置服务的根路径
         root:'dist',
         //开启实时更新
         livereload:true,
         //设置端口 默认8080
         port:80
     });
 });
 gulp.task('watch',function(){
     gulp.watch('src/index.html',function(){
         gulp.src('src/index.html').pipe(gulp.dest('dist')).pipe(connect.reload());
     });
 });
 gulp.task('default',['server','watch']);

 var concat=require('gulp-concat');
 //创建任务合并js文件
 gulp.task('concat-js',function(){
     gulp.src(['src/js/test1.js','src/js/test2.js']).pipe(concat('vendor.js')).pipe(gulp.dest('dist/js'));
 });
 //压缩js文件
 var uglify=require('gulp-uglify');
 gulp.task('uglify-js',function(){
     gulp.src(['src/js/test1.js','src/js/test2.js']).pipe(concat('vendor.js')).pipe(uglify()).pipe(gulp.dest('dist/js'));
 });
 //重命名插件
 var rename=require('gulp-rename');
 gulp.task('rename-js',function(){
     gulp.src(['src/js/test1.js','src/js/test2.js']).pipe(concat('vendor.js')).pipe(gulp.dest('dist/js')).pipe(uglify()).pipe(rename('vendor.min.js')).pipe(gulp.dest('dist/js/'));
 });
 //合并css
 gulp.task('concat-css',function(){
     gulp.src(['src/css/style1.css','src/css/style2.css']).pipe(concat('style.css')).pipe(gulp.dest('dist/css'));
 });
 var minify=require('gulp-minify-css');
 gulp.task('minify-css',function(){
     gulp.src(['src/css/style1.css','src/css/style2.css']).pipe(concat('style.css')).pipe(rename('style.min.css')).pipe(minify()).pipe(gulp.dest('dist/css'));
 });

来到本地路径，创建工程配置文件
npm init

本地安装gulp
npm install gulp --save-dev
让package.json依赖于gulp

安装package.json中依赖了的组件
npm install

安装服务的插件
npm install gulp-connect --save-dev

合并文件的插件
npm install gulp-concat --save-dev

压缩js文件的插件
npm install gulp-uglify --save-dev

给文件重命名的插件
npm install gulp-rename --save-dev

压缩css文件的插件
npm install gulp-minify-css --save-dev

代码目录树