时间:2021-07-01 10:21:17 帮助过:20人阅读
js/app.js 指定确切的文件名 js/*.js 某个目录所有后缀名为js的文件 js/**/*.js 某个目录及其所有子目录中所有后缀名为js的文件 !js/app.js 除了js/app.js以外所有文件 *.+(js css)匹配项目根目录下,所有后缀名为js或css的文件
src方法的参数还可以是一个数组,用来指定多个成员
gulp.src(['js/**/*.js','!js/**/*.min.js'])
2 dest()
dest方法将管道的输出写入文件,同时将这些输出继续输出,所以可以依次调用多次dest方法,将输出写入多个目录。如果有目录不存在,将会被重建。
gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./build/template')) .pipe(minify()) .pipe(gulp.dest('./build/minified_templates'));
dest方法还可以接受第二个参数,表示配置对象
gulp.dest('build',{ cwd:'./app', mode:'0644'})
配置对象有两个字段。cwd字段指定写入路径的基准目录,默认是当前目录;mode字段指定写入文件的权限,默认是0777.
3.task()
task方法用于定义具体的任务。它的第一个参数是任务名,第二个参数是任务函数。
gulp.task('greet',function(){ console.log('Hello world'); });
task方法还可以指定按顺序运行的一组任务
gulp.task('build',['css','js','imgs']);
指定任务build,它由css,js,imgs三个任务所组成。task方法会并发执行这三个任务。注意,每个任务都是异步调用,所以没有办法保证js任务的开始运行的时间。
如果希望各个任务严格按照次序运行,可以把掐一个任务写成后一个任务的依赖模块。
gulp.task('css',['greet'],function(){ //deal with css here});
css任务依赖greet任务,所以css一定会在greet运行完成后在运行。
task方法的回调函数,还可以接受一个函数作为参数,这对执行异步任务非常有用.
//执行shell命令var exec=require('child_process').exec; gulp.task('jekyll',function(cb){//build jekyllexec('jekyll build',function(err){ if(err) return cb(err);//return error cb();//finished task}) })
如果一个任务的名字为default,就表明它是默认任务,在命令行直接输入gulp命令,就会运行该任务。
gulp.task('default',function(){ //default task})//或者gulp.task('default',['styles','jshint','watch']);
执行的时候,直接使用gulp,就会运行styles,jshint,watch三个任务。
4 watch()
watch方法用于指定需要监视的文件。一旦这些文件发生变动,就运行指定任务。
gulp.task('watch',function(){ gulp.watch('templates/*.tmpl.html',['build']); });
代码指定,一旦templates目录中的模板文件发生变化,就会运行build任务。
watch方法也可以用回调函数,代替指定的任务
gulp.watch('templates/*.tmpl.html',function(event){ console.log('Event type: '+event.type); console.log('Event path: '+event.path); });
另一种写法是watch方法所监控的文件发生变化时(修改、增加、删除文件),就会触发change事件,可以对change事件指定回调函数
var watcher=gulp.watch('templates/*.tmpl.html',['build']); watcher.on('change',function (event){ console.log('Event type: '+event.type); console.log('Event path: '+event.path); });
除了change事件,watch方法还可能触发以下事件
end 回调函数运行完毕时触发
error 发生错误时触发
ready 当开始监听文件时触发
nomatch 没有匹配的监听文件时触发
watcher对象还包含其他一些方法
watcher.end() 停止watcher对象,不会再调用任务或回调函数
watcher.files() 返回watcher对象监视的文件
watcher.add(glob)增加所要监视的文件,它还可以附件第二个参数,表示回调函数
watcher.remove(filepath) 从watcher对象中移走一个监听的文件
5.gulp-livereload模块
gulp-livereload模块用于自动刷新浏览器,反映出源码的最新变化。它除了模块以外,还需要在浏览器中安装插件,用于配合源码变化。
var gulp=require('gulp'), less=require('gulp-less'), livereload=require('gulp-livereload'), watch=require('gulp-watch'); gulp.task('less',function(){ gulp.src('less/*.less') .pipe(watch("less/*.less") ) .pipe(less()) .pipe(gulp.dest('css')) .pipe(livereload()); })
代码用来监视less文件,一旦编译完成,就会自动刷新浏览器。
6 gulp-load-plugins模块
一般情况下,gulpfile.js中的模块需要一个个加载
var gulp=require('gulp'), jshint=require('gulp-jshint'), uglify=require('gulp-uglify'), concat=require('gulp-concat'); gulp.task('js',function(){ return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); })
代码中除了gulp模块以外,还加载另外三个模块
这种加载的写法比较麻烦,使用gulp-load-plugins模块,可以加载package.json文件中所有的gulp模块。
var gulp=require('gulp'), gulpLoadPlugins=require('gulp-load-plugins'), plugins=gulpLoadPlugins(); gulp.task('js',function(){ return gulp.src('js/*.js') .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter('default')) .pipe(plugins.uglify()) .pipe(plugins.concat('app.js')) .pipe(gulp.dest('build')); })
本文讲解了gulp模块的方法,更多相关内容请关注Gxl网。
相关推荐:
js将html生成为图片,并保存在本地
js中函数的三种定义方式
JS 中的‘’真假‘’
以上就是gulp模块的方法的详细内容,更多请关注Gxl网其它相关文章!