gulp模块的方法

1. src()
gulp模块的src方法,用于产生数据流。它的参数表示所要处理的文件,这些指定的文件会转换成数据流。

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模块的方法,更多相关内容请关注【创想鸟】。

相关推荐:

js将html生成为图片,并保存在本地

js将html生成为图片,并保存在本地

js将html生成为图片,并保存在本地

以上就是gulp模块的方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3184155.html

(0)
上一篇 2025年3月31日 21:35:50
下一篇 2025年3月31日 21:35:57

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • gulp实用配置的介绍与使用

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。 gulp…

    编程技术 2025年4月1日
    200
  • 在angular1中如何配合gulp和bower来使用?

    这篇文章主要介绍了angular1配合gulp和bower使用教程,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 一 安装gulp和bower gulp安装: npm install -g gulpbower安装: np…

    编程技术 2025年3月31日
    100
  • 使用Gulp如何实现静态网页模块化具体怎么做?

    众所周知gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。下面这篇文章主要给大家介绍了关于gulp实现静态网页模块化的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。 前言 在做纯静态页…

    编程技术 2025年3月31日
    200
  • 使用nodejs如何实现gulp打包

    因为之前一直有人给我推荐gulp,说他这里好哪里好的。实际上对我来说够用就行。grunt熟悉以后实际上他的配置也不难,说到效率的话确实是个问题,尤其项目大了以后,目前位置遇到的项目都还可以忍受。不过不管怎么说,需要亲自用过gulp之后才能品…

    编程技术 2025年3月31日
    200
  • thinkphp5(tp5)整合gulp到项目实现静态资源的压缩

    不知道大家是否会遇到每次代码提交都手动取消选中config.php和database.php的烦恼。(config.php文件线下线上打开关闭调试模式和显示关闭错误 database.php线下线上数据库的配置)反正我以前是每次git提交代…

    2025年3月31日
    100
  • Gulp实现静态网页模块化实例分享

    在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题。比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同。那么同样的两段代码我们复制了40遍(最难受的方法)。众所周知gulp.js 是一个自动化构建工具,开发者可以使用它在项目开…

    编程技术 2025年3月31日
    100
  • 利用gulp实现压缩的实例

    1,下载安装node 访问  ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪。 npm 会随着安装包一起安装, 2,打开代码行 node -v //查看node版本,如果显示版本号,则安装成功。 npm…

    编程技术 2025年3月29日
    100
  • svg中的symbol如何制作icon

    本篇文章给大家带来的内容是关于svg中的symbol如何制作icon,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1. cnpm i gulp -g 2. 新建一个gulpfile.js文件 var gulp = req…

    编程技术 2025年3月29日
    100
  • 通过yeoman、gulp、angular编写前段时的html模板处理,打包后找不到html的问题解决_html/css_WEB-ITnose

    最近遇到了一个问题,就是通过yeoman、gulp编写前段的时候,自己的html文件,在一些插件中用到,在代码中,直接写了相对路径,在正常调试的情况下,是没有任何问题的,但是当打包发布代码之后,引用相对路径的html无法找到,提示404 研…

    编程技术 2025年3月29日
    100
  • gulp安装以及打包合并详解

    本文主要给大家介绍了关于gulp实现人一个打包合并的方法教程,并分享了gulp打包js/css时合并成一个文件时的顺序的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。希望能帮助到大家。 前言…

    2025年3月8日
    300

发表回复

登录后才能评论