使用gulp实现定制化需求

栏目: 编程工具 · 发布时间: 6年前

内容简介:使用gulp实现定制化需求

最近再做项目时,遇到了一些定制化需求,虽说需求比较简单,但还是在此做下记录。

需求

  • 通过命令行方式进行定制化打包

  • 项目与项目间的定制化需求并不完全一致,需做出区分

  • 每个项目一套配置文件,分别读取配置文件实现定制化需求

为何选择gulp

首先是因为此项目是基于ionic1的老项目, 默认集成了gulp(-_-11 哈哈), 但主要还是因为gulp是一套基于流的自动化构建工具,易于使用,并有健全的插件机制,完全适用于目前需要。

gulp的使用

gulp的基本使用在此不做赘述,需要了解的同学点 此链接 进行学习。

进入正题

上面说过gulp有健全的插件系统,我们就是通过这些插件来实现需求. 插件通过 npm install 安装插件。

  • yargs (处理命令行传参)

var args = require('yargs').argv;  //argv就是传递的命令行参数
    var env = args.env || 'default';
    执行gulp xxx --env=xxx |  gulp xxx --env xxx 都可得到args.env = xxx
  • gulp-sequence

gulp任务的默认执行方式是并行执行,所有task会同时执行。但在有些特定需求中,会造成不确定性。如果我们希望任务串行执行,即一个任务完成后在执行下个任务,就需要使用到gulp-sequence。

var gulpSequence = require('gulp-sequence');
    gulp.task('build', function (callback) {
        gulpSequence(
          'clean',
          'copy',
          ['task1', 'task2', 'task3'],
          function () {
            console.log('success');
          });
    });

clean, copy, ['task1', 'task2', 'task3'] 三个任务会按顺序执行,['task1','task2', 'task3']中的任务会并行执行。

注意: 我们期望的顺序是clean执行完成后执行copy,copy完成后执行['task1', 'task2', 'task3'],所以每个task必须要返回stream, 如return gulp.src().pipe()....,或者支持回调,如gulp.task('task1', function(done){...})。这样才能保证任务按顺序执行。如果没有满足上述要求,任务是串行执行,但不会等一个任务完成才执行下一个。

结合yargs与gulpSequence,可以解决前两点需求

var args = require('yargs').argv;
    var gulpSequence = require('gulp-sequence');
    
    var defaultTask = ['task1', 'task2', 'task3'];
    var xxxTask = ['task4', 'task5', 'task6'];
    
    gulp.task('build', function (callback) {
        gulpSequence(
          'clean',
          'copy',
          eval(args.env || 'default' + 'Task'),
          function () {
            console.log('success');
          });
    });

提取出各个定制化的需求,通过 gulp build --env xxx 传参的不同,分别执行对应任务。

  • fs, gulp-template, gulp-replace

fs插件用于读取配置文件

var fs = require('fs');
    var config = JSON.parse(fs.readFileSync('config.json', 'utf8'));

使用gulp-template替换读取到的数据到html中

test.html
    <h1>Hello <%= name %></h1>
var template = require('gulp-template');
    gulp.task('task1', () =>
        gulp.src('src/test.html')
            .pipe(template({name: config.name}))
            .pipe(gulp.dest('dist'))
    );

gulp-replacegulp-template 使用相似,详情点击查看

  • merge-stream

在使用gulp-template, gulp-replace中,总会遇到task处理逻辑相同,但src和dest不同的情况,重复定义任务过于繁琐,这时就需要是用到merge-stream。

未使用merge-stream

var template = require('gulp-template');
    
    gulp.task('task1', () =>
        gulp.src('src/test-1.html')
            .pipe(template({name: config.name}))
            .pipe(gulp.dest('dist/test-1.html''))
    
    gulp.task('task2', () =>
        gulp.src('src/test-2.html')
            .pipe(template({name: config.name}))
            .pipe(gulp.dest('dist/test-2.html''))

使用merge-stream

var merge = require('merge-stream');
    
    function html (src, dest) {
      return gulp.src(src)
                .pipe(template({name: config.name}))
                .pipe(gulp.dest(dest));
      }
    }
    
    gulp.task('template', function () {
        var stream1 = html('src/test-1.html', 'dest/test-1.html');
        var stream2 = html('src/test-2.html', 'dest/test-2.html');
        return merge(stream1, stream2)
    })

通过以上几个简单插件,就可以实现简单的定制化需求。

总结

gulp这种前端自动构建工具,可以大量减少重复操作,把复杂问题简单化,从而提高开发效率。这篇文章也只是几个插件简单的结合使用,更多的功能还有待去继续挖掘。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数学世纪

数学世纪

皮耶尔乔治·奥迪弗雷迪 / 胡作玄、胡俊美、于金青 / 上海科学技术出版社 / 2012-1 / 28.00元

《数学世纪:过去100年间30个重大问题》以简短可读的方式论述了整个20世纪的数学。20世纪的数学博大精深,新兴领域及学科的建立发展,许多经典问题得到解决,大量新的有意义的问题的引入,为数学带来了活力。《数学世纪:过去100年间30个重大问题》介绍了数学基础,20世纪的纯粹数学、应用和计算数学,以及目前未解的重要问题,中间穿插了希尔伯特的23个问题的解决情况、菲尔兹奖和沃尔夫奖得主的工作成就等。一起来看看 《数学世纪》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试