zoukankan      html  css  js  c++  java
  • gulp 流处理

    包含的内容:

        穿插流
        流合并
        流队列
        流筛选
    1. 穿插流
    // passthrough  stream  把流传递给其他的
    
    // use
    
    gulp.src(glob,{passthrough:true})
    
    // function 
    进行流的合并处理,避免多余配置以及冗余代码
    2. 合并流
    // 使用merge2
    
    // install 
    
    yarn  add merge2  or  npm install merge2
    
    // use
    
    const gulp = require('gulp')
    const merge2 = require('merge2')
    const concat = require('gulp-concat')
    const minifyHtml = require('gulp-minify-html')
    const ngtemplate = require('gulp-ngtemplate')
     
    gulp.task('app-js', function () {
      return merge2(
          gulp.src('static/src/tpl/*.html')
            .pipe(minifyHtml({empty: true}))
            .pipe(ngtemplate({
              module: 'genTemplates',
              standalone: true
            })
          ), gulp.src([
            'static/src/js/app.js',
            'static/src/js/locale_zh-cn.js',
            'static/src/js/router.js',
            'static/src/js/tools.js',
            'static/src/js/services.js',
            'static/src/js/filters.js',
            'static/src/js/directives.js',
            'static/src/js/controllers.js'
          ])
        )
        .pipe(concat('app.js'))
        .pipe(gulp.dest('static/dist/js/'))
    })
    3. 流队列
    // 使用 streamqueue
    //use
    
    var StreamQueue = require('streamqueue');
    var queue = new StreamQueue();
    queue.queue(
     gulp.src('static/src/tpl/*.html')
            .pipe(minifyHtml({empty: true}))
            .pipe(ngtemplate({
              module: 'genTemplates',
              standalone: true
            })
          ), gulp.src([
            'static/src/js/app.js',
            'static/src/js/locale_zh-cn.js',
            'static/src/js/router.js',
            'static/src/js/tools.js',
            'static/src/js/services.js',
            'static/src/js/filters.js',
            'static/src/js/directives.js',
            'static/src/js/controllers.js'
          ])
    );
    queue.pipe(process.stdout);
    4. 流修改
    // 使用 gulp-filter
    
    // use
    
    const gulp = require('gulp');
    const uglify = require('gulp-uglify');
    const filter = require('gulp-filter');
     
    gulp.task('default', () => {
        // Create filter instance inside task function 
        const f = filter(['**', '!*src/vendor']);
     
        return gulp.src('src/**/*.js')
            // Filter a subset of the files 
            .pipe(f)
            // Run them through a plugin 
            .pipe(uglify())
            .pipe(gulp.dest('dist'));
    });
    
    参考文档
    https://www.npmjs.com/package/gulp-filter
    5. 顺序流、并行流
    // gulp-series  gulp.parallel (4.0) 
    // use
    
    gulp.series 
    gulp.task("scripts",gulp.series("test","deploy"))
    
    gulp.parallel
    gulp.tast("mixs",gulp.series("clean",gulp.parallel("style","scripts")))
  • 相关阅读:
    Python 爬虫的工具列表
    使用rabbitmq手动确认消息的,定时获取队列消息实现
    redis订阅发布简单实现
    ubuntu下打开html页面
    关系数据库基本术语
    事务的基本概念,附图示
    oracle 一对多数据分页查询筛选
    一个在linux环境执行io操作的bug
    再springMVC中自定义文件上传处理解决与原spring中MultipartResolve冲突问题
    oracle存储过程删除树状结构的表数据
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/7819544.html
Copyright © 2011-2022 走看看