zoukankan      html  css  js  c++  java
  • gulp学习

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。

    我们首先来说一下Grunt.js和Gulp.js工作方式的一个区别。Grunt主要是以文件为媒介来运行它的工作流的,比如在Grunt中执行完一项任务后,会把结果写入到一个 临时文件中 ,然后可以在这个临时文件内容的基础上执行其它任务,执行完成后又把结果写入到临时文件中,然后又以这个为基础继续执行其它任务...就这样反复下去。而在Gulp中,使用的是Nodejs中的stream(流) ,首先获取到需要的stream,然后可以通过stream的pipe()方法把流导入到你想要的地方,比如Gulp的插件中,经过插件处理后的流又可以继续导入到其他插件中,当然也可以把流写入到文件中。所以Gulp是以stream为媒介的,它不需要频繁的生成临时文件,这也是Gulp的速度比Grunt快的一个原因 。再回到正题上来, gulp.src()方法正是用来获取流的 ,但要注意这个流里的内容不是原始的文件流,而是一个 虚拟文件对象流(Vinyl files) ,这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息,这个我们暂时不用去深入理解,你只需简单的理解可以用这个方法来读取你需要操作的文件就行了。


    gulp API 文档

    1.gulp.src(globs[, options])
    • globs参数是文件匹配模式(类似正则表达式),用来匹配文件路径(包括文件名),当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时,该参数可以为一个数组。
    • options为可选参数。通常情况下我们不需要用到。

    输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件。 将返回一个 Vinyl files 的 stream 它可以被 ** piped 到别的插件中。 **

    gulp.src('client/templates/*.jade')
      .pipe(jade()) //调用 jade 模块
      .pipe(minify())
      .pipe(gulp.dest('build/minified_templates'));
    
    2.gulp.dest(path[, options]) 方法是用来写文件的
    • path为写入文件的路径
    • options为一个可选的参数对象,通常我们不需要用到

    能被 pipe 进来,并且将会写文件。并且重新输出(emits)所有数据,因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在,将会自动创建它。

    gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且将 `base` 解析为 `client/js/`
      .pipe(minify())
      .pipe(gulp.dest('build'));  // 写入 'build/somedir/somefile.js'
    
    gulp.src('client/js/**/*.js', { base: 'client' })
      .pipe(minify())
      .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js'
    
    3.gulp.task(name[, deps], fn) 用来定义任务,内部使用的是Orchestrator
    • name 为任务名
    • deps 是当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则可省略这个参数
    • fn 为任务函数,我们把任务要执行的代码都写在里面。该参数也是可选的。
    gulp.task('somename', function() {
      // 做一些事
    });
    
    //定义一个有依赖的任务
    gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { 
      // Do something
    });
    
    //只要执行default任务,就相当于把one,two,three这三个任务执行了; gulp默认执行default任务
    gulp.task('default',['one','two','three']);
    
    
    3.1异步任务支持

    如果任务相互之间没有依赖,任务会按你书写的顺序来执行,如果有依赖的话则会先执行依赖的任务。
    但是如果某个任务所依赖的任务是异步的,就要注意了,gulp并不会等待那个所依赖的异步任务完成,而是会接着执行后续的任务

    有三种方法可以解决异步任务的问题:

    • 第一:在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。
    gulp.task('one',function(cb){ //cb为任务函数提供的回调,用来通知任务已经完成
      //one是一个异步执行的任务
      setTimeout(function(){
        console.log('one is done');
        cb();  //执行回调,表示这个异步任务已经完成
      },5000);
    });
    
    //这时two任务会在one任务中的异步操作完成后再执行
    gulp.task('two',['one'],function(){
      console.log('two is done');
    });
    
    • 第二:定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。
    gulp.task('one',function(cb){
      var stream = gulp.src('client/**/*.js')
          .pipe(dosomething()) //dosomething()中有某些异步操作
          .pipe(gulp.dest('build'));
        return stream;
    });
    
    gulp.task('two',['one'],function(){
      console.log('two is done');
    });
    
    • 第三:返回一个promise对象,例如
    var Q = require('q'); //一个著名的异步处理的库 https://github.com/kriskowal/q
    gulp.task('one',function(cb){
      var deferred = Q.defer();
      // 做一些异步操作
      setTimeout(function() {
         deferred.resolve();
      }, 5000);
      return deferred.promise;
    });
    
    gulp.task('two',['one'],function(){
      console.log('two is done');
    });
    
    4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb]) 【用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务,例如文件压缩等。】
    • glob 为要监视的文件匹配模式,规则和用法与gulp.src()方法中的glob相同。
    • opts 为一个可选的配置对象,通常不需要用到
    • tasks 为文件变化后要执行的任务,为一个数组

    如果有task的值,需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字,然后在执行callback。

    var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
    watcher.on('change', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    

    没有task的时候,每次变动需要执行的 callback。

    gulp.watch('js/**/*.js', function(event) {
      console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    

    一些常用的gulp插件


    参考文章

  • 相关阅读:
    How to build Linux system from kernel to UI layer
    Writing USB driver for Android
    Xposed Framework for Android 8.x Oreo is released (in beta)
    Linux Smartphone Operating Systems You Can Install Today
    Librem 5 Leads New Wave of Open Source Mobile Linux Contenders
    GUADEC: porting GNOME to Android
    Librem 5 – A Security and Privacy Focused Phone
    GNOME and KDE Join Librem 5 Linux Smartphone Party
    Purism计划推出安全开源的Linux Librem 5智能手机
    国产系统之殇:你知道的这些系统都是国外的
  • 原文地址:https://www.cnblogs.com/yldf55/p/5685206.html
Copyright © 2011-2022 走看看