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 在 minifyJS 任务中。有办法吗？

感谢您的时间。

Answer 1

您可以使用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 2

使用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 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检测文件的变化

3 个答案: