如果从“src”中删除原型，如何从“dist”文件夹中自动删除文件？

Question

我是构建系统的新手，所以很抱歉这个问题。

我的样板有这种结构。

/src (working folder) ___/templates(jade files) ___/scss ___/scripts /dist (compiled files) ___/css ___/js ___.html files

在templates 文件夹中，我有.jade 文件，这些文件被编译为.html 文件。 .scss 文件也是如此。当我创建一个.jade 文件时，它会自动编译为.html 并移至dist 文件夹。 当我删除或重命名 src 文件夹中的文件时，我想这样做 - 它自动发生在 dist 文件夹中。这是我的gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var csso = require('gulp-csso');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var jade = require('gulp-jade');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');

//sass
gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
  browsers: ['last 5 versions'],
  cascade: false
}))
.pipe(gulp.dest('dist/css'))
.pipe(rename({
  suffix: '.min'
}))
.pipe(autoprefixer({
  browsers: ['last 5 versions'],
  cascade: false
}))
.pipe(csso())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
  stream: true
}));
});

//browserSync
gulp.task('browserSync', function() {
  browserSync({
    server: {
       baseDir: 'dist'
    },
  });
});

//jade
gulp.task('jade', function() {
 return gulp.src('src/templates/**/!(_)*.jade')
.pipe(plumber())
.pipe(jade({
  pretty: true
}))
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({
  stream: true
}));
});

//scripts
gulp.task('uglify', function() {
  return gulp.src('src/scripts/**/*.js')
.pipe(plumber())
.pipe(gulp.dest('dist/js'))
.pipe(concat('app.min.js'))
.pipe(gulp.dest('dist/js'))
.pipe(uglify({
  mangle: false
}))
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.reload({
  stream: true
}));
});

gulp.task('watch', ['browserSync', 'sass', 'jade', 'uglify'], function() {
  gulp.watch('src/scss/**/*.scss', ['sass']);
  gulp.watch('src/templates/**/*.jade', ['jade']);
  gulp.watch('src/scripts/**/*.js', ['uglify']);
});

我尝试添加这个

var delDest;
gulp.task('del', function(cb) {
    return del(delDest, cb);
});

并且在每个任务函数中给出delDest它的src eg

gulp.task('jade', function() {
    delDest = 'dist/*.html';

并在 .watch 函数中添加

gulp.watch('src/templates/**/*.jade', ['del', 'jade']);

但它不起作用。 请。帮助我做到这一点。当然，如果您在我的 gulpfile 中提示要更改/添加/做得更好的内容，我将非常感激:)

谢谢。

Answer 1

gulp.watch 返回的观察者能够在添加/更新/删除发生时专门绑定事件并执行您的自定义代码。 here 也证明了这一点。

下面是我在项目中使用的示例代码，当我从脚本文件夹中删除 ts 文件时，我从 dev-build 文件夹中删除 .js 和 .d.ts 文件。

|-dev-build
| |-scripts
|-src
| |-scripts

我有一个简单的文件夹结构，一旦从 src/scripts 文件夹中删除了 ts 文件，这些文件就会从 dev-build/scripts 文件夹中删除。

gulp.task('deleteWatch', function(){
    var watcher = gulp.watch('./src/scripts/**/*.ts',['compilescripts']);

    watcher.on('change', function(event){
        if (event.type === 'deleted'){
            console.log(event.path + " is deleted. Deleting corresponding .js and .d.ts files from dev-build\\scripts");
            var fileNameBase = path.basename(event.path, '.ts');
            del(['./dev-build/scripts/'+fileNameBase+'.*'])
            .then(function(paths){
                console.log("deleted files: " + paths.join('\n'));
                });
        }
    })
})

我使用的 npm 包是 del 和 path。您需要自定义路径分辨率以适合您的项目结构。但这是从 src 中删除文件时删除 dist 文件的方法。