如何从“;dist”;文件夹中删除原型;src”;

How to auto delete files from the "dist" folder if you delete prototype from "src"?

本文关键字：删除 src 原型 文件夹 dist      更新时间：2023-09-26

我是构建系统的新手，这就是为什么很抱歉出现这个问题。

我的样板有这样的结构。

/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，例如

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

以及在watch功能中添加

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

但它不起作用。请帮我做那件事。当然，如果你在我的gulpfile中提示更改/添加/做得更好，我将非常感激：）

谢谢。

gull.watch返回的观察程序能够在添加/更新/删除发生时绑定事件并执行自定义代码。这里也证明了这一点。

下面是我在项目中使用的示例代码，当我从脚本文件夹中删除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文件的方法。

相关文章：