首页 > 其他 > 详细

gulp入门之常见处理方式(三)

时间:2017-01-10 13:22:39      阅读:340      评论:0      收藏:0      [点我收藏+]

整合 streams 来处理错误

默认情况下,在 stream 中发生一个错误的话,它会被直接抛出,除非已经有一个时间监听器监听着 error时间。 这在处理一个比较长的管道操作的时候会显得比较棘手。

这里是一个在 gulpfile 中使用它的例子:

var combiner = require(‘stream-combiner2‘);
var uglify = require(‘gulp-uglify‘);
var gulp = require(‘gulp‘);

gulp.task(‘test‘, function() {
  var combined = combiner.obj([
    gulp.src(‘bootstrap/js/*.js‘),
    uglify(),
    gulp.dest(‘public/bootstrap‘)
  ]);

  // 任何在上面的 stream 中发生的错误,都不会抛出,
  // 而是会被监听器捕获
  combined.on(‘error‘, console.error.bind(console));

  return combined;
});

删除文件和文件夹

最好的一个选择就是使用一个原生的 node 模块。

$ npm install --save-dev gulp del

假想有如下的文件结构:

.
├── dist
│   ├── report.csv
│   ├── desktop
│   └── mobile
│       ├── app.js
│       ├── deploy.json
│       └── index.html
└── src

在 gulpfile 中,我们希望在运行我们的编译任务之前,将 mobile 文件的内容先清理掉:

var gulp = require(gulp);
var del = require(del);

gulp.task(clean:mobile, function (cb) {
  del([
    dist/report.csv,
    // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
    dist/mobile/**/*,
    // 我们不希望删掉这个文件,所以我们取反这个匹配模式
    !dist/mobile/deploy.json
  ], cb);
});

gulp.task(default, [clean:mobile]);

 在管道中删除文件

你可能需要在管道中将一些处理过的文件删除掉。

我们使用 vinyl-paths 模块来简单地获取 stream 中每个文件的路径,然后传给 del 方法。

$ npm install --save-dev gulp del vinyl-paths

假想有如下的文件结构:

.
├── tmp
│   ├── rainbow.js
│   └── unicorn.js
└── dist
var gulp = require(gulp);
var stripDebug = require(gulp-strip-debug); // 仅用于本例做演示
var del = require(del);
var vinylPaths = require(vinyl-paths);

gulp.task(clean:tmp, function () {
  return gulp.src(tmp/*)
    .pipe(stripDebug())
    .pipe(gulp.dest(dist))
    .pipe(vinylPaths(del));
});

gulp.task(default, [clean:tmp]);

只有在已经使用了其他的插件之后才需要这样做,否则,请直接使用 gulp.src 来代替。

增量编译打包,包括处理整所涉及的所有文件

在做增量编译打包的时候,有一个比较麻烦的事情,那就是你常常希望操作的是 所有 处理过的文件,而不仅仅是单个的文件。举个例子,你想要只对更改的文件做代码 lint 操作,以及一些模块封装的操作,然后将他们与其他已经 lint 过的,以及已经进行过模块封装的文件合并到一起。如果不用到临时文件的话,这将会非常困难。

使用 gulp-cached 以及 gulp-remember 来解决这个问题。

var gulp = require(gulp);
var header = require(gulp-header);  //给文本文件头部追加内容
var footer = require(gulp-footer);
var concat = require(gulp-concat);
var jshint = require(gulp-jshint); //js代码校验
var cached = require(gulp-cached);
var remember = require(gulp-remember); //gulp-remember is a gulp plugin that remembers files that have passed through it. gulp-remember adds all the files it has ever seen back into the stream.

var scriptsGlob = src/**/*.js;

gulp.task(scripts, function() {
  return gulp.src(scriptsGlob)
      .pipe(cached(scripts))        // 只传递更改过的文件   A temp file based caching proxy task for gulp.
      .pipe(jshint())                 // 对这些更改过的文件做一些特殊的处理...
      .pipe(header((function () {)) // 比如 jshinting ^^^
      .pipe(footer(})();))          // 增加一些类似模块封装的东西
      .pipe(remember(scripts))      // 把所有的文件放回 stream
      .pipe(concat(app.js))         // 做一些需要所有文件的操作
      .pipe(gulp.dest(public/));
});

gulp.task(watch, function () {
  var watcher = gulp.watch(scriptsGlob, [scripts]); // 监视与 scripts 任务中同样的文件
  watcher.on(change, function (event) {
    if (event.type === deleted) {                   // 如果一个文件被删除了,则将其忘记
      delete cached.caches.scripts[event.path];       // gulp-cached 的删除 api
      remember.forget(scripts, event.path);         // gulp-remember 的删除 api
    }
  });
});

 

在 gulp 中运行 Mocha 测试

运行所有的测试用例

// npm install gulp gulp-mocha

var gulp = require(gulp);
var mocha = require(gulp-mocha);

gulp.task(default, function() {
  return gulp.src([test/test-*.js], { read: false })
    .pipe(mocha({
      reporter: spec,
      globals: {
        should: require(should)
      }
    }));
});

在文件改动时候运行 mocha 测试用例

// npm install gulp gulp-mocha gulp-util

var gulp = require(gulp);
var mocha = require(gulp-mocha);
var gutil = require(gulp-util);

gulp.task(mocha, function() {
    return gulp.src([test/*.js], { read: false })
        .pipe(mocha({ reporter: list }))
        .on(error, gutil.log);
});

gulp.task(watch-mocha, function() {
    gulp.watch([lib/**, test/**], [mocha]);
});

仅仅传递更改过的文件

默认情况下,每次运行时候所有的文件都会传递并通过整个管道。通过使用 gulp-changed 可以只让更改过的文件传递过管道。这可以大大加快连续多次的运行。

// npm install --save-dev gulp gulp-changed gulp-jscs gulp-uglify

var gulp = require(gulp);
var changed = require(gulp-changed);
var jscs = require(gulp-jscs);
var uglify = require(gulp-uglify);

// 我们在这里定义一些常量以供使用
var SRC = src/*.js;
var DEST = dist;

gulp.task(default, function() {
    return gulp.src(SRC)
        // `changed` 任务需要提前知道目标目录位置
        // 才能找出哪些文件是被修改过的
        .pipe(changed(DEST))
        // 只有被更改过的文件才会通过这里
        .pipe(jscs())
        .pipe(uglify())
        .pipe(gulp.dest(DEST));
});

从命令行传递参数

// npm install --save-dev gulp gulp-if gulp-uglify minimist

var gulp = require(gulp);
var gulpif = require(gulp-if);
var uglify = require(gulp-uglify);

var minimist = require(minimist);

var knownOptions = {
  string: env,
  default: { env: process.env.NODE_ENV || production }
};

var options = minimist(process.argv.slice(2), knownOptions);

gulp.task(scripts, function() {
  return gulp.src(**/*.js)
    .pipe(gulpif(options.env === production, uglify())) // 仅在生产环境时候进行压缩
    .pipe(gulp.dest(dist));
});
$ gulp scripts --env development

 

gulp入门之常见处理方式(三)

原文:http://www.cnblogs.com/myzy/p/6265910.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!