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

代码目录树