使用 gulp 检测文件更改

Question

我有这个 gulpfile:

  var gulp = require('gulp'),
      concat = require('gulp-concat'),
      uglify = require('gulp-uglify');

  gulp.task('minifyJS', function() {
    return gulp.src(['src/*.js'])
      .pipe(uglify())
      .pipe(gulp.dest('min'));
  });

  gulp.task('watch', function() {
    gulp.watch(['src/*.js'], ['minifyJS']);
  });

我想知道什么文件触发观察者及其绝对路径。

例如：如果我的项目放在/myCode，我改文件src/main.js，我想在 /myCode/src/main.js 任务中查看 。有办法吗？

感谢您的宝贵时间。

Answer 1

使用 gulp-changed npm 包。

$ npm install --save-dev gulp-changed

在 gulp 文件中尝试以下内容，（我没试过）

var gulp = require('gulp'),
      concat = require('gulp-concat'),
      uglify = require('gulp-uglify'),
      changed = require('gulp-changed');

  gulp.task('minifyJS', function() {
    return gulp.src(['src/*.js'])
      .pipe(changed('min'))
      .pipe(uglify())
      .pipe(gulp.dest('min'));
  });

  gulp.task('watch', function() {
    gulp.watch(['src/*.js'], ['minifyJS']);
  });

查看这个包的文档https://www.npmjs.com/package/gulp-changed

Answer 2

您可以使用 gulp-ng-annotate 和 gulp-changed:

var gulp = require('gulp');
var changed = require('gulp-changed');
var rename = require('gulp-rename');
var ngAnnotate = require('gulp-ng-annotate'); // just as an example
var SRC = 'src/*.js';
var DEST = 'src/';

//Function to get the path from the file name
function createPath(file) {
    var stringArray = file.split('/');
    var path = '';
    var name = stringArray[1].split('.');
    stringArray = name[0].split(/(?=[A-Z])/);
    if (stringArray.length>1) {stringArray.pop()};
    return {folder: stringArray[0], name: name[0]}
}


gulp.task('default', function () {
    return gulp.src(SRC)
        .pipe(changed(DEST))
        // ngAnnotate will only get the files that
        // changed since the last time it was run
        .pipe(ngAnnotate())
        .pipe(rename(function (path) {
            var createdPath = createPath(path);
            path.dirname = createdPath.folder;
            path.basename: createdPath.name,
            path.prefix: "",
            path.suffix: "",
            path.extname: ".min.js"
         }))
        .pipe(gulp.dest(DEST));
});

结果：

Answer 3

根据您对 Julien 的回答的评论，这应该非常接近您想要的，或者至少让您朝着正确的方向前进：

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    cache = require('gulp-cached'),
    rename = require('gulp-rename'),
    path = require('path');

function fileName(file) {
  return file.dirname + path.sep + file.basename + file.extname;
}

gulp.task('minifyJS', function() {
  return gulp.src(['src/*.js'])
    .pipe(cache('minifyJS'))
    .pipe(rename(function(file) {
      var nameOfChangedFile = fileName(file);
      if (nameOfChangedFile == './main.js') {
        file.basename = 'main.min'
      }
      if (nameOfChangedFile == './userView.js') {
        file.basename = 'user/userView.min'
      }
      console.log(nameOfChangedFile + ' -> ' + fileName(file));
    }))
    .pipe(uglify())
    .pipe(gulp.dest('min'));
});

gulp.task('watch', function() {
  gulp.watch(['src/*.js'], ['minifyJS']);
});

这使用 gulp-cached 保留 src/ 文件夹中已通过流的所有文件的内存缓存。只有自上次调用 minifyJS 以来更改过的文件才会传递给 gulp-rename 插件。

然后 gulp-rename 插件本身用于更改已更改文件的目标路径。

注意：第一个运行缓存为空，因为还没有文件通过 gulp-cached 插件。这意味着您第一次更改文件 时，src/ 中的所有 个文件都将写入目标文件夹。在随后的更改中，只会写入更改的文件。

使用 gulp 检测文件更改

Detect what file change with gulp

javascript

gulp

gulp-watch