gulp备忘录

• 以前一直用的webpack,发现有些臃肿,仿佛一个插满了各类兵器的架子.要啥有啥,可是每次都得搬个架子,确实够累
• gulp基于nodejs的流操做,没有声势却暗放光华,为所欲为,确实轻巧好用
• 本文只作简单实用记录,具体高级的用法,请参见官方文档

gulp工做流程:

1. 经过 gulp.src() 获取上游文件流
2. pipe()方法把文件流导入到 gulp插件 中
3. 经过pipe把处理后的流导入到 gulp.dest()中g

4. gulp.dest() 是把流中的内容写入到文件中
    还有一个很重要的api gulp.watch()

gulp.src('res/src.js')
	.pipe(gulp.dest('dist/dist.js'))

gulp.src(globs,[options]) 获取须要操做的文件 globs是文件匹配模式(相似正则表达式)

gulp.dest(path,[opts]) 把文件流中的内容写入到硬盘文件

注意:

• 咱们传入的路径参数只能用来指定***要生成的文件的目录***,而不能指定生成文件的文件名
• 生成的文件名是由导入到它的文件流决定-> 可使用gulp-rename模块改变文件名
• 经过指定 gulp.src()中的base参数,能够灵活的改变gulp.dest()生成的文件路径 咱们能够理解为,gulp.dest中的path路径代替了gulp.src的base看\路径

gulp.src(script/lib/*.js) //没有配置base参数，此时默认的base路径为script/lib
 //假设匹配到的文件为script/lib/jquery.js
.pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js

gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script
//假设匹配到的文件为script/lib/jquery.js
.pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js     
用gulp.dest()把文件流写入文件后，文件流仍然能够继续使用。

gulp.task() 定义一个任务

• gulp.task(name,[deps],fn) /**
  • name:任务名
  • deps:当前任务的依赖,可选
  • fn: 当前任务的实现函数,当前任务须要执行的代码都写在fn里面 */
• 注意: 若是它的依赖中含有异步代码的,会先把依赖中的同步代码执行,而后就执行fn,不会等待"依赖中的异步代码"

gulp.watch() 监视文件的变化,当文件发生变化时,执行相应的操做(例如文件压缩)

• 使用方法

• gulp.wacth(glob,[opts],tasks) /**

• opts: 可选的配置对象,通常不用

• tasks [Array] 监测到文件变化时,要执行的任务 */

  gulp.task('uglify',function(){
  	  //do something
  	});
  	gulp.task('reload',function(){
  	  //do something
  	});
  	gulp.watch('js/**/*.js', ['uglify','reload']);

• gulp.watch(glob,[opts],cb(event)) /**

• cb参数为一个函数。每当监视的文件发生变化时，就会调用这个函数
• 而且会给它传入一个对象，该对象包含了文件变化的一些信息，
• type属性为变化的类型，能够是 added , changed , deleted ；
• path 属性为发生变化的文件的路径 */

  gulp.watch('js/**/*.js', function(event){
  	    console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变 
  	    console.log(event.path); //变化的文件的路径
  	});

gulp插件

• 使用
  1. npm install --save-dev xxx 安装插件
  2. 在gulpfile.js顶部require此插件
  3. 在task中使用插件
• 经常使用插件
  • gulp-load-plugins 自动加载package.json中的gulp插件 例如

  var gulp = require('gulp');
  	//加载gulp-load-plugins插件，并立刻运行它
  	var $ = require('gulp-load-plugins')();

  而后就能够$.concat和$.connect来代替了,也就是原始插件名去掉gulp-前缀，以后再转换为驼峰命名。
  • gulp-less 编译 less文件
  • gulp-connect 建立本地服务器

一个示例配置

var gulp = require('gulp');
gulp.task('copy-html',function(){
	return gulp.src('index.html')
		       .pipe(gulp.dest('dist'))
})

gulp.task('cp-imgs',function(){
	//return gulp.src('res/imgs/*.{css,jpg}')// 复制多个后缀名的文件类型
	return gulp.src(['res/imgs/*.{css,jpg}'])
			   .pipe(gulp.dest('dist'))

})

//组合任务
gulp.task('default',['copy-html','copy-imgs'],function(){
    console.log('所有拷贝任务执行完毕!');
});
//-------------------

gulp.task('f1',function(){
    console.log('111111!');
});
gulp.task('f2',function(){
    console.log('2222222!');
});

gulp.task('watch',function(){
	gulp.watch('index.html',['f1','f2']);
}) //-> 每一次监听到index.html的变化以后,都会执行 f1和f2

//========
var less = require('gulp-less');
gulp.task('trsless',function(){
	return gulp.src('res/less.less')
			   .pipe(less())// 让less执行,用less模块来处理这个流
			   .pipe(gulp.dest('dist'));
})

//------------
var connect = require('gulp-connect');
    
gulp.task('server',function(){
   connect.server({
       root:'dist',//服务器的根目录
       port:8080 //服务器的地址，没有此配置项默认也是 8080
   });
});

//++++++++文件变化时,浏览器自动刷新++++++++++++


gulp.task('copy-html',function(){
     gulp.src('app/index.html')//指定源文件
         .pipe(gulp.dest('dist'))//拷贝到dist目录
         .pipe(connect.reload());//通知浏览器重启
});

gulp.task('watch',function(){
    gulp.watch('app/index.html',['copy-html']);//当index.html文件变化时执行copy-html任务
});

gulp.task('server',function(){
    connect.server({
        root:'dist',//服务器的根目录
        port:8080, //服务器的地址，没有此配置项默认也是 8080
        livereload:true//启用实时刷新的功能
    });
});
gulp.task('default',['server','watch']);//运行此任务的时候会在8080上启动服务器，