gulp模块的方法

ゝ一世哀愁。 2022-09-21 13:25 177阅读 0赞

**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 jekyll
    exec('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'));
    })

![这里写图片描述][20160622111408758]

[20160622111408758]: /images/20220721/515823b77c2b43948be2c363f502bce9.png