gulp插件使用

 1 //引入gulp组件
 2 var gulp=require(‘gulp‘);
 3
 4 //创建任务
 5 gulp.task(‘hello‘,function(){
 6     console.log(‘hello‘);
 7 });
 8 //创建另一个任务
 9 gulp.task(‘world‘,function(){
10     console.log(‘world‘);
11 });
12 //默认执行两个任务
13 //一个gulpfile.js中只能有一个default
14 //三种写法，3个参数
15 /**
16  * [description] default默认 的写法
17  * 写法一：gulp.task(‘default‘,function(){});
18  * 写法二：gulp.task(‘default‘,[‘task1‘,‘task2‘,‘....‘]);
19  * 写法三：gulp.task(‘difault‘,[‘task1‘,‘task2‘,‘...‘],function(){});
20  *
21  */
22 /*gulp.task(‘default‘,[‘hello‘,‘world‘],function(){
23     console.log(‘finish‘);
24 });*/
25 //gulp的具体用法
26
27 //拷贝文件
28 gulp.task(‘copy-files‘,function(){
29     //src:找到源文件   相对于gulpfile.js的路径
30     //pipe ‘拷贝’ 管道  参数 拷贝完需要做的事
31     //dest 目标 参数:路径
32     gulp.src(‘src/index.html‘).pipe(gulp.dest(‘dist‘));
33 });
34 //只拷贝类型为jpg的文件
35 gulp.task(‘copy-images‘,function(){
36     gulp.src(‘src/images/*.jpg‘).pipe(gulp.dest(‘dist/img‘));
37 });
38 //拷贝所有文件
39 //*表示第1层 **表示第二层 /**/*所有文件
40 gulp.task(‘copy-allfiles‘,function(){
41     gulp.src(‘src/images/*‘).pipe(gulp.dest(‘dist/img‘));
42 });
43 //将多个文件的内容拷贝到一个文件夹下
44 gulp.task(‘copy-data‘,function(){
45     //src路径可以是一个数组[‘src1‘,‘src2‘] 不需要的文件在路径前加一个!
46     gulp.src(‘src/data/*‘).pipe(gulp.dest(‘dist/data‘));
47 });
48 //监听
49 /*gulp.task(‘watch‘,function(){
50     //watch()监听 参数1：需要监听的文件 参数2：当监听到变化后完成的方法
51     gulp.watch(‘src/index.html‘,[‘copy-files‘]);
52 });*/
53 // 停止监听（其他命令） Ctrl+C
54
55 //引入gulp的插件gulp-connect 这个差价可以启动本地服务
56 var connect=require(‘gulp-connect‘);
57 gulp.task(‘server‘,function(){
58     //启动本地服务
59     connect.server({
60         //设置服务的根路径
61         root:‘dist‘,
62         //开启实时更新
63         livereload:true,
64         //设置端口 默认8080
65         port:80
66     });
67 });
68 gulp.task(‘watch‘,function(){
69     gulp.watch(‘src/index.html‘,function(){
70         gulp.src(‘src/index.html‘).pipe(gulp.dest(‘dist‘)).pipe(connect.reload());
71     });
72 });
73 gulp.task(‘default‘,[‘server‘,‘watch‘]);
74
75 var concat=require(‘gulp-concat‘);
76 //创建任务合并js文件
77 gulp.task(‘concat-js‘,function(){
78     gulp.src([‘src/js/test1.js‘,‘src/js/test2.js‘]).pipe(concat(‘vendor.js‘)).pipe(gulp.dest(‘dist/js‘));
79 });
80 //压缩js文件
81 var uglify=require(‘gulp-uglify‘);
82 gulp.task(‘uglify-js‘,function(){
83     gulp.src([‘src/js/test1.js‘,‘src/js/test2.js‘]).pipe(concat(‘vendor.js‘)).pipe(uglify()).pipe(gulp.dest(‘dist/js‘));
84 });
85 //重命名插件
86 var rename=require(‘gulp-rename‘);
87 gulp.task(‘rename-js‘,function(){
88     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/‘));
89 });
90 //合并css
91 gulp.task(‘concat-css‘,function(){
92     gulp.src([‘src/css/style1.css‘,‘src/css/style2.css‘]).pipe(concat(‘style.css‘)).pipe(gulp.dest(‘dist/css‘));
93 });
94 var minify=require(‘gulp-minify-css‘);
95 gulp.task(‘minify-css‘,function(){
96     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‘));
97 });

来到本地路径，创建工程配置文件
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

代码目录树